#flyff-title-screen[hidden],
#flyff-title-screen [hidden] {
  display: none;
}

#flyff-title-screen {
  position: fixed;
  inset: 0;
  z-index: 24010;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #000;
  /* Default.thm: m_texWallPaper = "screen.bmp", m_dwWallPaperType = 1
     (WPT_STRETCH). This is the lossless generated image from that source. */
  background: #000 url('/WebClient/generated/images/da84d532b8f3e584eb80.png') center / 100% 100% no-repeat;
  font: 12px Tahoma, Verdana, sans-serif;
  user-select: none;
}

.flyff-title-window {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  border: 0;
  filter: drop-shadow(0 3px 5px rgb(0 0 0 / 55%));
}

#flyff-select-server {
  width: 416px;
  height: 368px;
  background-color: #fff;
  /* APP_SELECT_SERVER is tiled from WndTile00..11 in 16px cells. */
  background-image:
    url('/WebClient/generated/images/5b6908f5e6799daeb89f.png'),
    url('/WebClient/generated/images/a3d9ab33f7fce74c2eff.png'),
    url('/WebClient/generated/images/ea29c8edc56f2cbc9328.png'),
    url('/WebClient/generated/images/a2bd4bbd65887496e523.png'),
    url('/WebClient/generated/images/b8dc335e0360c5b1ae2b.png'),
    url('/WebClient/generated/images/0cd24eaf3b6f44c7fe9a.png'),
    url('/WebClient/generated/images/f80379836d5c7ef1d649.png'),
    url('/WebClient/generated/images/a42bcc50139f6694b671.png'),
    url('/WebClient/generated/images/59d51c3718e5dc0fc55d.png'),
    url('/WebClient/generated/images/9ae88c0026062a0d1d18.png'),
    url('/WebClient/generated/images/d3f9077df02db6442db6.png'),
    url('/WebClient/generated/images/40ea52e15b8a2613bf43.png');
  background-position:
    0 0, 400px 0, 0 16px, 400px 16px, 0 352px, 400px 352px,
    0 0, 0 16px, 0 32px, 400px 32px, 0 352px, 0 32px;
  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    repeat-x, repeat-x, repeat-y, repeat-y, repeat-x, repeat;
}

#flyff-select-character {
  width: 604px;
  height: 388px;
  /* The supplied native 602x388 capture removes the 16px blank band between
     the title row and WndSelectChar's three slot boxes. Keep the original
     lossless texture, shift only its body, then restore its top/bottom frame
     slices so the chrome itself is not displaced. */
  background: transparent url('/WebClient/generated/images/fa859f279243a1c71cab.png') 0 -16px / 604px 388px no-repeat;
}

#flyff-select-character::before,
#flyff-select-character::after {
  content: '';
  position: absolute;
  left: 0;
  z-index: 0;
  width: 604px;
  pointer-events: none;
  background-image: url('/WebClient/generated/images/fa859f279243a1c71cab.png');
  background-size: 604px 388px;
  background-repeat: no-repeat;
}

#flyff-select-character::before {
  top: 0;
  height: 22px;
  background-position: 0 0;
}

#flyff-select-character::after {
  bottom: 0;
  height: 16px;
  background-position: 0 -372px;
}

#flyff-character-caption {
  left: 6px;
  right: auto;
  width: 140px;
  text-align: left;
}

.flyff-tiled-window {
  background-color: #fff;
  background-image:
    url('/WebClient/generated/images/5b6908f5e6799daeb89f.png'),
    url('/WebClient/generated/images/a3d9ab33f7fce74c2eff.png'),
    url('/WebClient/generated/images/ea29c8edc56f2cbc9328.png'),
    url('/WebClient/generated/images/a2bd4bbd65887496e523.png'),
    url('/WebClient/generated/images/b8dc335e0360c5b1ae2b.png'),
    url('/WebClient/generated/images/0cd24eaf3b6f44c7fe9a.png'),
    url('/WebClient/generated/images/f80379836d5c7ef1d649.png'),
    url('/WebClient/generated/images/a42bcc50139f6694b671.png'),
    url('/WebClient/generated/images/59d51c3718e5dc0fc55d.png'),
    url('/WebClient/generated/images/9ae88c0026062a0d1d18.png'),
    url('/WebClient/generated/images/d3f9077df02db6442db6.png'),
    url('/WebClient/generated/images/40ea52e15b8a2613bf43.png');
  background-position:
    left top, right top, left 16px, right 16px, left bottom, right bottom,
    left top, left 16px, left top, right top, left bottom, left top;
  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    repeat-x, repeat-x, repeat-y, repeat-y, repeat-x, repeat;
}

.flyff-title-caption {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 3px;
  height: 14px;
  overflow: hidden;
  color: #fff;
  font: bold 9px Verdana, Tahoma, sans-serif;
  line-height: 12px;
  text-align: center;
  text-shadow: 0 1px 1px #555;
  white-space: nowrap;
  pointer-events: none;
}

.flyff-title-close {
  right: 8px;
  top: 5px;
  width: 15px;
  height: 14px;
  background-image: url('/WebClient/generated/images/5ca93c335ac43c2529ee.png');
  background-position: 0 0;
}
.flyff-title-close:hover { background-position: -15px 0; }
.flyff-title-close:active { background-position: -30px 0; }

.flyff-server-heading {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 100px;
  height: 16px;
  overflow: hidden;
  color: #2e70a9;
  font: 12px Tahoma, Verdana, sans-serif;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
}

.flyff-native-listbox {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  padding: 3px;
  overflow: hidden;
  border: 0;
  outline: 0;
  background-color: #f7f4ec;
  /* WTYPE_LISTBOX uses the native WndEditTile00..08 3x3 skin. */
  background-image:
    url('/WebClient/generated/images/8537d63f414ff8d103ba.png'),
    url('/WebClient/generated/images/62f899fae317fbbd6e2c.png'),
    url('/WebClient/generated/images/e2c70d9f9fb22d76ab52.png'),
    url('/WebClient/generated/images/c4a62c910fad63200f97.png'),
    url('/WebClient/generated/images/31cbd626ca66171d968f.png'),
    url('/WebClient/generated/images/ed6ea9e9702b1503259f.png'),
    url('/WebClient/generated/images/11c10f25e24990139479.png'),
    url('/WebClient/generated/images/06676f96d4dc7a104cff.png'),
    url('/WebClient/generated/images/184654b04c0ad49ce6aa.png');
  background-position:
    left top, right top, left bottom, right bottom,
    left top, left bottom, left top, right top, left top;
  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat,
    repeat-x, repeat-x, repeat-y, repeat-y, repeat;
}

.flyff-native-edit {
  box-sizing: border-box;
  margin: 0;
  padding: 2px 4px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: #000;
  background-color: #f7f4ec;
  background-image:
    url('/WebClient/generated/images/8537d63f414ff8d103ba.png'),
    url('/WebClient/generated/images/62f899fae317fbbd6e2c.png'),
    url('/WebClient/generated/images/e2c70d9f9fb22d76ab52.png'),
    url('/WebClient/generated/images/c4a62c910fad63200f97.png'),
    url('/WebClient/generated/images/31cbd626ca66171d968f.png'),
    url('/WebClient/generated/images/ed6ea9e9702b1503259f.png'),
    url('/WebClient/generated/images/11c10f25e24990139479.png'),
    url('/WebClient/generated/images/06676f96d4dc7a104cff.png'),
    url('/WebClient/generated/images/184654b04c0ad49ce6aa.png');
  background-position:
    left top, right top, left bottom, right bottom,
    left top, left bottom, left top, right top, left top;
  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat,
    repeat-x, repeat-x, repeat-y, repeat-y, repeat;
  font: 12px/16px Tahoma, Verdana, sans-serif;
}

#flyff-server-roots {
  left: 8px;
  top: 28px;
  width: 188px;
  height: 219px;
}

#flyff-server-channels {
  left: 208px;
  top: 28px;
  width: 188px;
  height: 217px;
}

.flyff-native-list-option {
  display: block;
  width: 100%;
  height: 13px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  outline: 0;
  color: #000;
  background: transparent;
  font: 12px/13px Tahoma, Verdana, sans-serif;
  text-align: left;
  text-overflow: clip;
  white-space: nowrap;
  cursor: default;
}

.flyff-native-list-option:hover { color: #ff8000; }
.flyff-native-list-option[aria-selected='true'] { color: #0000ff; }

.flyff-server-banner {
  position: absolute;
  left: 12px;
  top: 286px;
  width: 380px;
  height: 40px;
  border: 0;
  pointer-events: none;
}

#flyff-title-screen .flyff-sprite-button,
#flyff-title-screen .flyff-native-button {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: transparent;
  background-color: transparent;
  background-repeat: no-repeat;
  font: 0/0 sans-serif;
  cursor: pointer;
}

#flyff-title-screen .flyff-sprite-button:focus-visible,
#flyff-title-screen .flyff-native-button:focus-visible,
.flyff-character-slot:focus-visible,
.flyff-native-listbox:focus-visible {
  outline: 1px dotted #382515;
  outline-offset: 1px;
}

#flyff-title-screen .flyff-native-button {
  width: 72px;
  height: 20px;
  background-position: 0 0;
}
#flyff-title-screen .flyff-native-button:hover:not(:disabled) { background-position: -72px 0; }
#flyff-title-screen .flyff-native-button:active:not(:disabled) { background-position: -144px 0; }
#flyff-title-screen .flyff-native-button:disabled { background-position: -216px 0; cursor: default; }

.flyff-button-back { background-image: url('/WebClient/generated/images/fa2b25cfbf63352c8d83.png'); }
.flyff-button-next { background-image: url('/WebClient/generated/images/a8922d08ca76b66358c7.png'); }
.flyff-button-create { background-image: url('/WebClient/generated/images/5e51ff92d1a08a77ce5e.png'); }
.flyff-button-delete { background-image: url('/WebClient/generated/images/a823b4f779c180758e13.png'); }
.flyff-button-accept { background-image: url('/WebClient/generated/images/e767ba172197bc39ded6.png'); }
.flyff-button-ok { background-image: url('/WebClient/generated/images/d90699b4d7f6dc356cbe.png'); }
.flyff-button-cancel { background-image: url('/WebClient/generated/images/9a273ca72862e398e1a7.png'); }
.flyff-button-male { background-image: url('/WebClient/generated/images/10f9ed6135c1acef34c5.png'); }
.flyff-button-female { background-image: url('/WebClient/generated/images/f4d15f8d4704f116bb7f.png'); }
.flyff-button-left { background-image: url('/WebClient/generated/images/44bdb4a9b428fdc616b8.png'); }
.flyff-button-right { background-image: url('/WebClient/generated/images/f9ebaf9f736ed02a42bd.png'); }

#flyff-server-back { left: 120px; top: 256px; }
#flyff-server-next { left: 206px; top: 256px; }

#flyff-character-account {
  /* The supplied native selection screen does not paint this legacy static;
     retain it for accessibility/session state without leaking it into the
     compact title/slot gap. */
  display: none;
}

.flyff-character-group {
  position: absolute;
  top: 46px;
  width: 160px;
  height: 280px;
}
.flyff-character-group[data-slot='0'] { left: 48px; }
.flyff-character-group[data-slot='1'] { left: 220px; }
.flyff-character-group[data-slot='2'] { left: 392px; }

.flyff-character-slot {
  position: absolute;
  left: 2px;
  top: 0;
  z-index: 2;
  width: 156px;
  height: 248px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: transparent;
  background: transparent;
  cursor: pointer;
}

.flyff-character-group[data-selected='true'] .flyff-character-slot::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 156px;
  height: 250px;
  background: rgb(64 51 154 / 5.9%);
  pointer-events: none;
}

.flyff-character-name {
  position: absolute;
  left: 0;
  top: 257px;
  z-index: 2;
  width: 160px;
  height: 23px;
  overflow: hidden;
  color: #666;
  font: 12px/23px Tahoma, Verdana, sans-serif;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.flyff-character-selection {
  display: none;
  position: absolute;
  left: 2px;
  top: 260px;
  z-index: 1;
  width: 156px;
  height: 17px;
  background: rgb(109 80 255 / 9.8%);
  pointer-events: none;
}

.flyff-character-group[data-selected='true'] .flyff-character-selection {
  display: block;
  animation: flyff-character-selection-flash 1.04s linear infinite alternate;
}

@keyframes flyff-character-selection-flash {
  from { background-color: rgb(109 80 255 / 9.8%); }
  to { background-color: rgb(109 80 255 / 58.8%); }
}

#flyff-character-back { left: 129px; top: 342px; }
#flyff-character-create { left: 219px; top: 342px; }
#flyff-character-delete { left: 309px; top: 342px; }
#flyff-character-accept { left: 399px; top: 342px; }

#flyff-create-character {
  width: 768px;
  height: 608px;
}

.flyff-create-label,
.flyff-create-pin-note {
  position: absolute;
  overflow: hidden;
  color: #000;
  font: 12px/20px Tahoma, Verdana, sans-serif;
  white-space: nowrap;
}

.flyff-create-name-label { left: 9px; top: 8px; width: 104px; height: 20px; }
#flyff-create-name {
  position: absolute;
  left: 116px;
  top: 6px;
  width: 172px;
  height: 23px;
}

#flyff-create-jobs { position: absolute; inset: 0; pointer-events: none; }
.flyff-job-button {
  position: absolute;
  width: 54px;
  height: 54px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-position: 0 0;
  background-repeat: no-repeat;
  cursor: pointer;
  pointer-events: auto;
}
.flyff-job-button:nth-child(1) { left: 23px; top: 32px; }
.flyff-job-button:nth-child(2) { left: 86px; top: 32px; }
.flyff-job-button:nth-child(3) { left: 149px; top: 32px; }
.flyff-job-button:nth-child(4) { left: 212px; top: 32px; }
.flyff-job-button:nth-child(5) { left: 23px; top: 91px; }
.flyff-job-button:nth-child(6) { left: 86px; top: 91px; }
.flyff-job-button:nth-child(7) { left: 148px; top: 91px; }
.flyff-job-button:nth-child(8) { left: 212px; top: 91px; }
.flyff-job-button:hover { background-position: -54px 0; }
.flyff-job-button:active { background-position: -108px 0; }
.flyff-job-button[aria-pressed='true'] { background-position: -162px 0; }
.flyff-job-slayer { background-image: url('/WebClient/generated/images/f0a86211fcb64cfb6e33.png'); }
.flyff-job-templar { background-image: url('/WebClient/generated/images/bbfc0d2033ea5ae2e562.png'); }
.flyff-job-mentalist { background-image: url('/WebClient/generated/images/fada8f1774167f5a4552.png'); }
.flyff-job-arcanist { background-image: url('/WebClient/generated/images/21b2fe4a8bdd747695ef.png'); }
.flyff-job-crackshooter { background-image: url('/WebClient/generated/images/80e6a2969575c8592e8e.png'); }
.flyff-job-harlequin { background-image: url('/WebClient/generated/images/4f8e812da33e1b973b13.png'); }
.flyff-job-seraph { background-image: url('/WebClient/generated/images/82f8491d61ec193605f1.png'); }
.flyff-job-force-master { background-image: url('/WebClient/generated/images/7bc16c9fbce94ed5e506.png'); }

.flyff-create-sex-label { left: 10px; top: 153px; width: 88px; height: 20px; }
#flyff-create-male { left: 104px; top: 153px; }
#flyff-create-female { left: 184px; top: 153px; }
.flyff-create-face-label { left: 10px; top: 176px; width: 84px; height: 20px; }
#flyff-create-face-left { left: 104px; top: 176px; }
#flyff-create-face-right { left: 184px; top: 176px; }
.flyff-create-hair-label { left: 10px; top: 199px; width: 92px; height: 20px; }
#flyff-create-hair-left { left: 104px; top: 199px; }
#flyff-create-hair-right { left: 184px; top: 199px; }
.flyff-create-color-label { left: 8px; top: 223px; width: 70px; height: 20px; }

#flyff-create-colors {
  position: absolute;
  left: 104px;
  top: 223px;
  width: 153px;
  height: 76px;
  padding: 0;
}
.flyff-color-channel {
  position: absolute;
  left: 16px;
  width: 127px;
  height: 16px;
  margin: 0;
  padding: 0;
  appearance: none;
  border: 0;
  outline: 0;
  background-color: transparent;
  background-position: left center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.flyff-color-red { top: 8px; background-image: url('/WebClient/generated/images/7ceedbfffbdd31ee0094.png'); }
.flyff-color-green { top: 30px; background-image: url('/WebClient/generated/images/def9d1253eae43eb6547.png'); }
.flyff-color-blue { top: 52px; background-image: url('/WebClient/generated/images/9ae19b10b269dd5c8bbd.png'); }
.flyff-color-channel::-webkit-slider-runnable-track { height: 11px; background: transparent; }
.flyff-color-channel::-webkit-slider-thumb {
  width: 11px;
  height: 11px;
  margin-top: 0;
  appearance: none;
  border: 0;
  background: url('/WebClient/generated/images/bc2298a4241c632da08d.png') 0 0 / 11px 11px no-repeat;
}

#flyff-create-preview {
  position: absolute;
  left: 272px;
  top: 11px;
  width: 479px;
  height: 440px;
  overflow: hidden;
  pointer-events: none;
}

#flyff-create-pet-preview {
  position: absolute;
  left: 580px;
  top: 296px;
  width: 166px;
  height: 142px;
  overflow: hidden;
  pointer-events: none;
}

.flyff-starter-list {
  display: flex;
  padding: 3px;
  gap: 0;
  width: 241px;
  height: 57px;
}
.flyff-starter-list[data-category='0'] { left: 10px; top: 302px; }
.flyff-starter-list[data-category='1'] { left: 10px; top: 357px; }
.flyff-starter-list[data-category='2'] { left: 10px; top: 412px; }
.flyff-starter-list[data-category='3'] { left: 10px; top: 467px; }
.flyff-starter-list[data-category='4'] { left: 10px; top: 522px; }
.flyff-starter-item {
  /* CWndCreateChar::DrawListBox fixes m_nFontHeight to 40 and advances the
     item rectangle by exactly that amount; the sixth cell is natively clipped. */
  flex: 0 0 40px;
  height: 49px;
  margin: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid #000;
  outline: 0;
  background: transparent;
  cursor: pointer;
}
.flyff-starter-icon {
  display: block;
  width: 32px;
  height: 32px;
  margin: 8px auto 0;
  object-fit: contain;
  image-rendering: auto;
  pointer-events: none;
}
.flyff-starter-item[aria-selected='true'] { background: #bef5b0; }

.flyff-create-pin-label { left: 378px; top: 464px; width: 132px; height: 18px; }
#flyff-create-pin {
  position: absolute;
  left: 560px;
  top: 464px;
  width: 96px;
  height: 20px;
}
.flyff-create-pin-confirm-label { left: 378px; top: 488px; width: 132px; height: 20px; }
#flyff-create-pin-confirm {
  position: absolute;
  left: 560px;
  top: 488px;
  width: 96px;
  height: 20px;
}
.flyff-create-pin-note {
  left: 378px;
  top: 514px;
  width: 289px;
  height: 20px;
  color: #f00;
}
#flyff-create-ok { left: 437px; top: 538px; }
#flyff-create-cancel { left: 528px; top: 538px; }

.flyff-title-modal-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
}

#flyff-delete-character {
  width: 256px;
  height: 224px;
}
.flyff-delete-instruction {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 222px;
  height: 20px;
  overflow: hidden;
  color: #000;
  font: 12px/20px Tahoma, Verdana, sans-serif;
  white-space: nowrap;
}
.flyff-number-button {
  position: absolute;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-position: 0 0;
  background-repeat: no-repeat;
  cursor: pointer;
}
.flyff-number-button:hover { background-position: -32px 0; }
.flyff-number-button:active { background-position: -64px 0; }
.flyff-number-0 { left: 16px; top: 32px; background-image: url('/WebClient/generated/images/25bbc610f8e1b1ec279e.png'); }
.flyff-number-1 { left: 61px; top: 32px; background-image: url('/WebClient/generated/images/316d0bbff5d056704d70.png'); }
.flyff-number-2 { left: 105px; top: 32px; background-image: url('/WebClient/generated/images/c948f3f4327918b9c6e0.png'); }
.flyff-number-3 { left: 148px; top: 32px; background-image: url('/WebClient/generated/images/4af9afd5309202bfe669.png'); }
.flyff-number-4 { left: 192px; top: 32px; background-image: url('/WebClient/generated/images/41207a5fb6cea4bff694.png'); }
.flyff-number-5 { left: 16px; top: 72px; background-image: url('/WebClient/generated/images/a2b0dc0c700b03743c05.png'); }
.flyff-number-6 { left: 60px; top: 72px; background-image: url('/WebClient/generated/images/a57f2d8b44ea31bc6fc7.png'); }
.flyff-number-7 { left: 104px; top: 72px; background-image: url('/WebClient/generated/images/62a4e62d623e3899b72b.png'); }
.flyff-number-8 { left: 148px; top: 72px; background-image: url('/WebClient/generated/images/18c8ff433b4467c2c1ec.png'); }
.flyff-number-9 { left: 192px; top: 72px; background-image: url('/WebClient/generated/images/108c6571c31b4875b306.png'); }
#flyff-delete-pin {
  position: absolute;
  left: 16px;
  top: 120px;
  width: 54px;
  height: 20px;
}
#flyff-delete-clear { left: 76px; top: 120px; }
#flyff-delete-ok { left: 152px; top: 120px; }
#flyff-delete-cancel { left: 86px; top: 152px; }

#flyff-title-message {
  width: 256px;
  height: 144px;
  background: transparent url('/WebClient/generated/images/a292413f6e2aa349c82e.png') 0 0 / 256px 144px no-repeat;
}
#flyff-title-message-text {
  position: absolute;
  left: 18px;
  top: 26px;
  width: 220px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #000;
  font: 12px/16px Tahoma, Verdana, sans-serif;
  text-align: center;
}
#flyff-title-message-ok { left: 92px; top: 84px; }

.flyff-title-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 428px), (max-height: 380px) {
  #flyff-select-server {
    transform: scale(min(calc((100vw - 12px) / 416), calc((100vh - 12px) / 368)));
  }
}

@media (max-width: 616px), (max-height: 400px) {
  #flyff-select-character {
    transform: scale(min(calc((100vw - 12px) / 604), calc((100vh - 12px) / 388)));
  }
}

@media (max-width: 780px), (max-height: 620px) {
  #flyff-create-character {
    transform: scale(min(calc((100vw - 12px) / 768), calc((100vh - 12px) / 608)));
  }
}