/* THE ENTRANCE — the classic 640x480 login/creation stage (public/js/entrance.js).
   Every picture is a client gump (assets/uo/SOURCE.md); the stage scales by a
   whole number when it can (pixel-crisp) and down to fit a phone. */

#menu.entrance-menu {
  z-index: 20;
  position: absolute; inset: 0;
  display: block; overflow: hidden;
  background: #000;
}
#entrance-stage {
  position: absolute; left: 0; top: 0;
  width: 640px; height: 480px;
  transform-origin: 0 0;
  image-rendering: pixelated;
  overflow: hidden;
  color: #1c160e;
  font-family: Georgia, 'Times New Roman', serif;
  -webkit-text-size-adjust: none;
}
#entrance-stage img { image-rendering: pixelated; }
.ent-screen { position: absolute; inset: 0; }
.ent-abs { position: absolute; }
.ent-gump { display: block; pointer-events: none; user-select: none; }
.ent-backdrop { background-repeat: repeat; }
.ent-nine { pointer-events: none; }

.ent-loading {
  position: absolute; left: 0; right: 0; top: 214px; text-align: center;
  color: #d8c89a; font-size: 16px; text-shadow: 0 1px 2px #000;
}

/* gump buttons: the art is the button */
.ent-button {
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer; line-height: 0;
}
.ent-button img { display: block; pointer-events: none; }
.ent-button:focus-visible { outline: 1px dotted #f4e3a0; outline-offset: 1px; }

/* text */
.ent-text { white-space: normal; line-height: 1.25; pointer-events: none; }
.ent-center { text-align: center; }
.ent-title { font-size: 17px; font-weight: bold; color: #2a2014; letter-spacing: .3px; }
.ent-label { font-size: 15px; color: #2a2014; }
.ent-label.ent-on { color: #7a1a0c; font-weight: bold; }
.ent-value { font-weight: bold; }
.ent-small { font-size: 12px; color: #3a2e1e; }
.ent-tiny { font-size: 11px; color: #3a2e1e; line-height: 1.2; }
.ent-hint { font-size: 11px; color: #e8dcb8; text-shadow: 0 1px 1px #000; }
.ent-gold { font-size: 13px; color: #e6c75e; text-shadow: 0 1px 1px #000; }
.ent-pale { font-size: 13px; color: #efe6cc; text-shadow: 0 1px 1px #000; }
.ent-desc { font-size: 12.5px; line-height: 1.35; color: #2a2014; }
.ent-question { font-size: 11.5px; line-height: 1.2; color: #f0e4c4; text-shadow: 0 1px 1px #000; }
#login-account, #login-password { font-size: 16px; }
.ent-status {
  min-height: 16px; text-align: center; font-size: 13px; font-weight: bold;
  color: #ffcf8a; text-shadow: 0 1px 2px #000; pointer-events: none; z-index: 5;
}
.ent-status[data-kind="info"] { color: #e8e0c8; font-weight: normal; }

/* the login panel sits on grey stone: light letters */
#entrance-stage[data-screen="login"] .ent-title,
#entrance-stage[data-screen="login"] .ent-label { color: #efe3bd; text-shadow: 0 1px 2px #000; }

/* inputs: bare letters on the 0x0BB8 field */
.ent-input {
  border: 0; outline: 0; background: transparent;
  color: #16120b; font: 15px Georgia, serif; padding: 0 2px;
  user-select: text; -webkit-user-select: text;
}
.ent-input::placeholder { color: #8a7c62; font-style: italic; }
.ent-name { color: #f2e6c2; font-size: 14px; text-align: center; text-shadow: 0 1px 1px #000; }
.ent-name::placeholder { color: #bfb08a; }
.ent-question-input { background: rgba(240,230,200,.92); font-size: 13px; }
.ent-select {
  border: 0; background: transparent; color: #16120b; font: 14px Georgia, serif; cursor: pointer;
}

/* character select */
.ent-slot {
  border: 0; background: transparent; cursor: pointer;
  font: 16px Georgia, serif; color: #2a2014; text-align: center;
}
.ent-slot:disabled { cursor: default; }
.ent-slot[aria-selected="true"] { color: #8a1a0a; font-weight: bold; }
.ent-slot-sel { filter: brightness(1.08) sepia(.35); }
.ent-link {
  border: 0; background: transparent; cursor: pointer; text-align: center;
  font: italic 12px Georgia, serif; color: #e8d9a8; text-shadow: 0 1px 1px #000; text-decoration: underline;
}
.ent-link.ent-mini { font-size: 11.5px; color: #3a2a18; text-shadow: none; }
.ent-resume { text-align: left; }

/* professions */
.ent-prof { border-radius: 30px; }
.ent-prof.sel img { filter: drop-shadow(0 0 3px #fff2b0); }

/* sliders: the 0x00D5/0x00D6/0x00D7 bar with the 0x00D8 knob */
.ent-slider {
  -webkit-appearance: none; appearance: none; margin: 0; padding: 0; height: 14px; cursor: pointer;
  background:
    url(assets/uo/gumps/00213-0x00D5.png) left center no-repeat,
    url(assets/uo/gumps/00215-0x00D7.png) right center no-repeat,
    url(assets/uo/gumps/00214-0x00D6.png) center / auto 14px repeat-x;
  background-origin: border-box;
}
.ent-slider::-webkit-slider-runnable-track { height: 14px; background: transparent; }
.ent-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; border: 0;
  background: url(assets/uo/gumps/00216-0x00D8.png) no-repeat; margin-top: 0;
}
.ent-slider::-moz-range-track { height: 14px; background: transparent; }
.ent-slider::-moz-range-thumb {
  width: 13px; height: 13px; border: 0; border-radius: 0;
  background: url(assets/uo/gumps/00216-0x00D8.png) no-repeat;
}

/* appearance */
.ent-strip { background-repeat: repeat-x; }
.ent-doll { pointer-events: none; }
.ent-swatch {
  border: 1px solid #0c0a08; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 1px 2px #000; cursor: pointer;
}
.ent-veil { background: rgba(0,0,0,.45); z-index: 4; }
.ent-veil-clear { background: rgba(0,0,0,.25); }
.ent-palette { display: grid; gap: 0; }
.ent-cell { border: 0; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.ent-cell.sel, .ent-cell:hover { box-shadow: inset 0 0 0 2px #fff4c2; }

/* starting city */
.ent-town-label {
  font: bold 12px Georgia, serif; color: #2b1d10; cursor: pointer; pointer-events: auto;
  text-shadow: 0 0 2px #f2e8c8, 0 0 3px #f2e8c8;
}
.ent-town-label.ent-on { color: #8a1a0a; }
.ent-town-label.ent-right { text-align: right; }

.ent-busy .ent-button, .ent-busy .ent-slot { cursor: progress; }

/* entering the world: the character fades in out of black */
#world-fade {
  position: absolute; inset: 0; z-index: 19; background: #000;
  opacity: 0; pointer-events: none; transition: opacity 1.6s ease-out;
}
#world-fade.dark { opacity: 1; transition: none; }