/* Selecao e criacao usam o largo dos espelhos de Etherborne. */
#screen-select, #screen-create { position: relative; isolation: isolate; min-height: 100dvh; }
#screen-select.active { display: block; height: 100dvh; overflow: hidden; }
#character-scene { position: absolute; inset: 0; z-index: -2; background: #31566a; }
#character-scene canvas { display: block; width: 100%; height: 100%; }
#screen-select::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #03131dda 0%, #03131d30 38%, #03131d12 65%, #03131dc9 100%),
    linear-gradient(180deg, #03131dd6, transparent 26% 60%, #03131de8);
}
#screen-select .select-box {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: 100%; height: 100dvh;
  padding: 18px clamp(16px, 3vw, 44px) 18px;
}
#screen-select .select-header { justify-self: center; text-align: center; color: #ffe5a5; text-shadow: 0 2px 5px #001016; }
#screen-select .select-header h2 {
  margin: 6px 0 4px; padding: 4px 30px 9px;
  color: #ffe4a1; font: bold clamp(25px, 2.8vw, 40px) Georgia, serif; letter-spacing: 1px;
  border-bottom: 2px solid #cfa857;
  background: linear-gradient(90deg, transparent, #071e2bcc 15% 85%, transparent);
  box-shadow: 0 10px 16px -12px #40d3e4;
}
#screen-select .select-header p { margin: 5px 0 0; color: #c7d4d5; font-size: 13px; }
#screen-select .select-layout { display: flex; align-items: center; justify-content: space-between; min-width: 0; min-height: 0; gap: 20px; }
#screen-select .select-roster {
  display: flex; flex-direction: column; width: min(360px, 31vw); max-height: min(64dvh, 560px); min-width: 0; min-height: 0;
  padding: 13px; border: 1px solid #d0a95b;
  background: linear-gradient(145deg, #0d3340ee, #041922ee 63%, #082732eb);
  box-shadow: inset 0 0 0 2px #174855, inset 0 0 0 3px #74562c, 0 14px 36px #0009;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
#screen-select .select-roster-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 5px 10px; border-bottom: 1px solid #9a793e; }
#screen-select .select-roster-heading span { color: #ffde93; font: bold 14px Georgia, serif; letter-spacing: 1px; }
#screen-select .select-roster-heading small { color: #72c7d0; font-size: 11px; white-space: nowrap; }
#screen-select .character-list { display: grid; gap: 8px; min-width: 0; min-height: 0; padding: 12px 1px 1px; overflow: auto; scrollbar-color: #d4ad5f #092631; }
#screen-select .character-slot {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 8px 12px;
  border: 1px solid #927540; color: #ffecbf; text-align: left; font: inherit; cursor: var(--cur-default), pointer;
  background: linear-gradient(110deg, #102f3a, #061923 65%, #0b2630);
  box-shadow: inset 0 0 0 2px #163d48, inset 0 -7px 12px #0005;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
#screen-select .character-slot:hover, #screen-select .character-slot:focus-visible {
  border-color: #64e1ec; background: linear-gradient(110deg, #185060, #082734 67%, #11404c);
  box-shadow: inset 0 0 0 2px #4ac5d4, 0 0 10px #43d5e766;
}
#screen-select .character-slot.selected {
  border-color: #ffe192; background: linear-gradient(110deg, #52502c, #15343c 59%, #0b2630);
  box-shadow: inset 0 0 0 2px #e5ba63, 0 0 12px #e6b55b77;
}
#screen-select .character-slot:focus-visible { outline: 2px solid #77f2f5; outline-offset: 2px; }
#screen-select .slot-number {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px;
  border: 1px solid #cfaa5f; color: #ffe3a1; background: #061922;
  font: bold 20px Georgia, serif;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
#screen-select .slot-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: bold 19px Georgia, serif; }
#screen-select .slot-name small { display: block; overflow: hidden; text-overflow: ellipsis; color: #9fd3d7; font: 12px 'Segoe UI', sans-serif; }
#screen-select .slot-empty { color: #d7c28f; font: 15px Georgia, serif; }
#screen-select .slot-arrow { color: #5bd9e4; font: 29px Georgia, serif; }
#screen-select .character-slot.selected .slot-arrow { color: #ffe19a; }
#screen-select .select-preview {
  align-self: flex-end; width: min(355px, 30vw); min-height: 90px; margin-bottom: 18px; padding: 14px 18px;
  border: 1px solid #cfaa5e; background: linear-gradient(115deg, #0e3540f2, #051b27ef);
  box-shadow: inset 0 0 0 2px #1a4e59, inset 0 0 0 3px #775a30, 0 10px 24px #0008;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
#screen-select .select-preview span { color: #6fdae3; font: bold 10px 'Segoe UI', sans-serif; letter-spacing: 2px; }
#screen-select .select-preview p { margin: 6px 0 0; color: #ffe2a1; font: 17px Georgia, serif; }
#screen-select .select-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 9px 2px 2px; }
#screen-select .select-actions #select-logout { margin-right: auto; }
#screen-select .select-actions .btn, #screen-create .btn {
  min-width: 150px; min-height: 45px; border: 1px solid #cda657; border-radius: 0;
  color: #ffe4a0; background: linear-gradient(145deg, #19424d, #071c28 65%, #123641);
  box-shadow: inset 0 0 0 2px #225363, 0 3px 10px #0007;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  font: bold 15px Georgia, serif; text-shadow: 0 1px 3px #001116;
}
#screen-select .select-actions .btn:hover:not(:disabled), #screen-create .btn:hover:not(:disabled) {
  border-color: #62dfeb; background: linear-gradient(145deg, #235b67, #0a2d3a 65%, #195360);
  box-shadow: inset 0 0 0 2px #53cad9, 0 0 12px #37d1e65d;
}
#screen-select .select-actions .btn.primary, #screen-create .btn.primary {
  min-width: 195px; border-color: #ffe19a; color: #fff0c3;
  background: linear-gradient(145deg, #927435, #394326 55%, #183d40);
  box-shadow: inset 0 0 0 2px #e0b963, 0 0 13px #dca94e59;
}
#screen-select .select-actions .btn:disabled, #screen-create .btn:disabled { opacity: .48; filter: grayscale(.5); }
#screen-select .error { min-height: 17px; margin: 0; text-align: right; }

/* Criacao: o personagem e parte do largo dos espelhos de Etherborne. */
#screen-create.active { display: block; height: 100dvh; overflow: hidden; padding: 0; background: #173f55; }
#create-character-scene { position: absolute; inset: 0; z-index: -2; }
#create-character-scene canvas { display: block; width: 100%; height: 100%; }
#screen-create::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #031722da 0%, #0317228c 22%, transparent 43% 62%, #03172280 82%, #031722d8),
    linear-gradient(180deg, #061b2cbe, transparent 25% 67%, #061b2ce0);
}
#screen-create .create-box {
  display: grid; grid-template-columns: minmax(285px, 360px) minmax(0, 1fr) minmax(270px, 325px);
  grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px;
  width: 100%; height: 100dvh; padding: 18px clamp(16px, 2.5vw, 42px) 22px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #e9e2ce;
}
#screen-create .create-header { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: flex-start; gap: 20px; }
#screen-create .create-header > div { flex: 1; padding-right: 130px; text-align: center; text-shadow: 0 2px 6px #06131c; }
#screen-create .create-header h2 { margin: 3px 0; color: #ffe5a7; font: bold clamp(28px, 3vw, 40px) Georgia, serif; }
#screen-create .create-header p { margin: 0; color: #e0f1ef; font-size: 13px; }
#screen-create #create-back { flex: none; min-height: 39px; margin: 0; font-size: 13px; }
#screen-create .create-roster, #screen-create .create-detail {
  min-width: 0; border: 1px solid #cfa75e;
  background: linear-gradient(145deg, #0d3541ed, #041923ed 65%, #092936ed);
  box-shadow: inset 0 0 0 2px #1a5260, inset 0 0 0 3px #785c32, 0 15px 36px #0009;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
#screen-create .create-roster { grid-column: 1; grid-row: 2 / 4; align-self: center; display: flex; flex-direction: column; max-height: min(72dvh, 665px); padding: 14px; }
#screen-create .create-panel-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 4px 11px; border-bottom: 1px solid #9b7c43; }
#screen-create .create-panel-heading span { color: #ffe19a; font: bold 15px Georgia, serif; letter-spacing: 2px; }
#screen-create .create-panel-heading small { color: #8bd9e1; font-size: 11px; }
#screen-create .class-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-height: 0; overflow: auto; margin: 0; padding: 9px 2px 2px; scrollbar-color: #cba65f #092631; }
#screen-create .class-card { position: relative; min-width: 0; height: 65px; overflow: hidden; padding: 0; border: 1px solid #7f7759; color: #fff1c5; background: #092631; cursor: var(--cur-default), pointer; }
#screen-create .class-card img { width: 100%; height: 100%; object-fit: cover; opacity: .78; transition: transform .2s, opacity .2s; }
#screen-create .class-card b { position: absolute; inset: auto 0 0; margin: 0; padding: 15px 5px 5px; background: linear-gradient(transparent, #04151feb 45%); font: bold 14px Georgia, serif; text-align: center; text-shadow: 0 1px 3px #000; }
#screen-create .class-card:hover, #screen-create .class-card:focus-visible { border-color: #6de6ee; outline: 1px solid #6de6ee; }
#screen-create .class-card:hover img { transform: scale(1.07); opacity: 1; }
#screen-create .class-card.selected { border-color: #ffe49c; box-shadow: inset 0 0 0 2px #e6bb6d, 0 0 12px #ffd072a8; }
#screen-create .class-card.selected img { opacity: 1; }
#screen-create .create-stage-label { grid-column: 2; grid-row: 3; justify-self: center; align-self: end; margin-bottom: 5px; color: #d1f9f8; text-align: center; text-shadow: 0 2px 8px #001522; }
#screen-create .create-detail { grid-column: 3; grid-row: 2 / 4; align-self: end; display: flex; flex-direction: column; gap: 10px; padding: 20px; }
#screen-create .create-eyebrow { color: #8be5eb; font: bold 10px 'Segoe UI', sans-serif; letter-spacing: 2px; }
#screen-create .create-detail h3 { margin: 0; color: #ffe5a7; font: bold 29px Georgia, serif; }
#screen-create #create-class-weapon { margin: -6px 0 5px; color: #b9e5e6; font-size: 13px; }
#screen-create .create-class-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 9px; }
#screen-create .create-class-stats span { display: grid; gap: 3px; padding: 7px 2px; border: 1px solid #476d71; color: #8fced5; background: #071f2a; font-size: 10px; text-align: center; }
#screen-create .create-class-stats b { color: #ffe4a3; font: bold 16px Georgia, serif; }
#screen-create .name-field { display: grid; gap: 6px; color: #ffdf95; font-size: 13px; }
#screen-create .name-field input { width: 100%; height: 43px; border: 1px solid #aa8848; border-radius: 0; color: #ffeac0; background: #061923; }
#screen-create .name-field input:focus { border-color: #57dbe7; box-shadow: 0 0 0 2px #44d2e75c; }
#screen-create #create-submit { width: 100%; margin: 3px 0 0; }
#screen-create #create-error { min-height: 17px; margin: 0; }

@media (min-width: 701px) and (max-width: 950px) {
  #screen-select .select-roster { width: min(320px, 39vw); }
  #screen-select .select-roster-heading small { display: none; }
}
@media (max-width: 1100px) and (min-width: 781px) {
  #screen-create .create-box { grid-template-columns: minmax(255px, 310px) minmax(0, 1fr) minmax(245px, 285px); gap: 10px; padding: 12px; }
  #screen-create .create-roster { padding: 10px; }
  #screen-create .class-card { height: 64px; }
  #screen-create .create-detail { padding: 14px; }
}
@media (max-width: 780px) {
  #screen-create.active { height: 100dvh; overflow-x: hidden; overflow-y: auto; }
  #screen-create .create-box { display: flex; flex-direction: column; gap: 9px; min-height: 100dvh; height: auto; padding: 10px; }
  #screen-create .create-header { align-items: center; }
  #screen-create .create-header > div { padding: 0; }
  #screen-create .create-header h2 { font-size: 23px; }
  #screen-create .create-header p { display: none; }
  #screen-create #create-back { min-width: 0; width: 96px; min-height: 35px; padding: 4px; font-size: 11px; }
  #screen-create .create-stage-label { order: 1; min-height: 25dvh; margin: 0; visibility: hidden; }
  #screen-create .create-roster { order: 2; align-self: stretch; flex: none; width: 100%; max-height: none; padding: 8px; }
  #screen-create .create-panel-heading { padding: 2px 3px 5px; }
  #screen-create .class-grid { display: flex; gap: 6px; padding: 7px 2px 2px; overflow-x: auto; overflow-y: hidden; }
  #screen-create .class-card { flex: 0 0 118px; height: 57px; }
  #screen-create .class-card b { font-size: 12px; }
  #screen-create .create-detail { order: 3; align-self: stretch; flex: none; width: 100%; gap: 6px; padding: 10px; }
  #screen-create .create-detail h3 { font-size: 22px; }
  #screen-create .create-class-stats { margin: 0; }
  #screen-create .create-class-stats span { padding: 4px 2px; }
  #screen-create .name-field input { height: 39px; }
}
@media (max-width: 700px) {
  #screen-select .select-box { padding: 10px 12px 12px; }
  #screen-select .select-header h2 { margin: 3px 0; padding: 3px 10px 6px; font-size: clamp(20px, 5vw, 28px); }
  #screen-select .select-header p { font-size: 11px; }
  #screen-select .select-layout { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 8px; }
  #screen-select .select-roster { width: 100%; max-height: none; padding: 8px; }
  #screen-select .select-roster-heading { padding-bottom: 5px; }
  #screen-select .select-roster-heading small { font-size: 10px; }
  #screen-select .character-list { display: flex; gap: 6px; padding: 7px 1px 5px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; }
  #screen-select .character-slot { flex: 0 0 190px; min-height: 54px; padding: 5px 9px; scroll-snap-align: start; }
  #screen-select .slot-number { width: 34px; height: 34px; font-size: 17px; }
  #screen-select .slot-name { font-size: 16px; }
  #screen-select .select-preview { align-self: stretch; width: 100%; min-height: 61px; margin: 0; padding: 8px 12px; }
  #screen-select .select-preview p { margin-top: 3px; font-size: 14px; }
  #screen-select .select-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding-top: 7px; }
  #screen-select .select-actions .btn, #screen-select .select-actions .btn.primary { min-width: 0; min-height: 39px; padding: 5px; font-size: 13px; }
  #screen-select #select-logout { grid-column: 1; margin: 0; }
  #screen-select #select-create { grid-column: 2; }
  #screen-select #select-enter { grid-column: 1 / -1; }
}
@media (max-height: 700px) and (min-width: 701px) {
  #screen-select .select-header h2 { font-size: 27px; }
  #screen-select .select-roster { max-height: 57dvh; }
  #screen-select .select-preview { margin-bottom: 5px; }
}