/* 02-screens.css: screens and panel content.
   Login, character, shop, skins, and room list. In-game versions appear in dock panels;
   panel-specific adjustments live in 04-panels.css. */

/* ===================================================================
   ROOM LIST
   =================================================================== */
.browser-button {
  width: 100%;
  margin-top: 12px;
}

#roomBrowserScreen h2 {
  margin-top: 28px;
  font-size: 18px;
}

.room-browser-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ui-room-browser-divider);
}

.private-join-form:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  padding: 14px 0;
}

.private-join-form label { flex: 1 1 180px; }
.private-join-form input { display: block; width: 100%; }

.room-browser-entry button,
.room-browser-entry .small {
  background: var(--t-btn-confirm-bg);
  color: var(--t-btn-confirm-color);
  border: var(--t-btn-confirm-border);
  font-weight: bold;
  font-size: 18px;
  width: 40%;
  height: 50px;
}

/* ===================================================================
   PANELS, LOGIN, AND CHARACTER
   =================================================================== */
.panel {
  max-width: var(--ui-panel-width);
  margin: var(--ui-panel-margin);
  padding: var(--ui-panel-padding);
  border: var(--ui-panel-border-width) solid var(--ink);
  background: var(--ui-panel-background);
  box-shadow: var(--ui-panel-shadow);
}

.character-panel > label,
.join-box label,
.auth-panel > label {
  display: grid;
  gap: 7px;
  font-weight: 700;
}

.auth-panel {
  max-width: var(--ui-auth-width);
}

.auth-panel > label {
  margin: 14px 0;
}

.auth-panel > label[hidden] {
  display: none !important;
}

.skin-loadout { margin: 18px 0 24px; }
.skin-loadout h2 { margin: 0 0 8px; font-size: 18px; }
.skin-loadout-slots { display: grid; grid-template-columns: repeat(5, minmax(108px, 1fr)); gap: 5px; overflow-x: auto; padding: 3px 1px 7px; }
.loadout-slot { display: grid; justify-items: center; align-content: start; gap: 5px; min-width: 0; padding: 3px; border: 0; background: transparent; box-shadow: none; }
.loadout-slot .skill-shop-preview, .loadout-slot .skin-preview { width: min(100%, 100px); height: auto; aspect-ratio: 1; }
.loadout-slot .skin-preview-frame { transform: translate(-50%, -50%) scale(1.9); }
.loadout-skin-card .skin-preview-frame { transform: translate(-50%, -50%) scale(2.0); }
.loadout-slot .skill-shop-sheet, .loadout-slot .skill-shop-preview > img { transform: scale(1.25); }
.loadout-skin-card .skill-shop-sheet, .loadout-skin-card .skill-shop-preview > img { transform: scale(1.5); }
.loadout-slot.selected .skill-shop-preview, .loadout-slot.selected .skin-preview { outline: 3px solid var(--orange); }
.loadout-slot small { width: 100%; font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
.skin-loadout-picker { margin-top: 10px; padding: 9px; border: 2px solid var(--ink); background: var(--ui-shop-card-background); }
.skin-loadout-picker h3 { margin: 0 0 8px; font-size: 18px; }
#skinLoadoutSelection { margin: 0 0 9px; font-size: 18px; }
.skin-loadout-carousel { display: flex; gap: 9px; overflow-x: auto; padding: 3px 3px 11px; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; }
.loadout-skin-card { flex: 0 0 140px; display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; padding: 7px; scroll-snap-align: start; }
.loadout-skin-card .skill-shop-preview, .loadout-skin-card .skin-preview { width: 112px; height: 112px; }
.loadout-skin-card-name { max-width: 100%; font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
.loadout-skin-card-status { font-size: 18px; }
#gameScreen .world-wrap .skin-loadout canvas.character-shop-sheet { width: 80px; height: 80px; aspect-ratio: auto; background: transparent; image-rendering: pixelated; }

/* Wallet and shop. */
.wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0;
  padding: var(--ui-wallet-padding);
  border: 2px solid var(--ink);
  background: var(--ui-wallet-background);
  font-size: 18px;
}

.wallet b,
.shop-balance b {
  color: var(--orange);
  font-size: 18px;
}

.wallet .small {
  margin: 0;
}

.shop-panel {
  max-width: var(--ui-shop-width);
}

.shop-balance {
  margin: 12px 0 20px;
  font-weight: 700;
}

.shop-items {
  display: grid;
  grid-template-columns: var(--ui-shop-columns);
  gap: var(--ui-shop-gap);
  margin: 18px 0;
}
.shop-section-help { margin: 0 0 12px; color: var(--muted); font-size: 18px; }
.shop-categories { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: var(--ui-shop-tabs-columns); gap: var(--ui-shop-category-gap); margin: 14px 0; padding: 5px 0; background: var(--ui-shop-tabs-background); }
.shop-categories button { min-width: 0; padding: 8px 4px; font-size: var(--ui-shop-category-button-size); line-height: 1.2; }
.shop-categories button.active { background: var(--ui-shop-active-tab-background); box-shadow: inset 0 -3px 0 var(--ink); }
.shop-notice { min-height: 0; margin: 0; color: var(--ui-shop-note-color); font-weight: 700; }
.shop-notice:not(:empty), #shopError:not(:empty) { margin: 8px 0; padding: 8px; border: 2px solid currentColor; }
.shop-price-note { display: block; margin: -5px 0 9px; color: var(--ui-shop-price-note-color); font-size: 18px; }
.skill-shop-preview { display: flex; align-items: center; justify-content: center; width: var(--ui-shop-preview-size); height: var(--ui-shop-preview-size); overflow: hidden; border: 3px solid var(--ink); background: var(--ui-shop-preview-background); }
.skill-shop-preview img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated; }
.skill-shop-preview .skill-shop-sheet { display: block; width: 64px; height: 64px; overflow: hidden; }
.skill-shop-preview canvas.skill-shop-sheet { image-rendering: pixelated; }
.skill-shop-preview .skill-shop-sheet img { max-width: none; max-height: none; }
@keyframes skill-preview-flight { to { transform: translateX(var(--skill-preview-travel)); } }
.shop-ability-label { display: block; margin-bottom: 4px; color: #586d45; font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

.shop-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
  padding: var(--ui-shop-card-padding);
  border: var(--ui-shop-card-border);
  background: var(--ui-shop-card-background);
}

.shop-item h2 {
  margin: 0 0 6px;
  font-size: var(--ui-shop-card-title-size);
}

.shop-item p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: var(--ui-shop-card-description-size);
}

.shop-item .price {
  display: block;
  margin-bottom: 10px;
  color: var(--orange);
  font-weight: 700;
}

/* Skins and rarities. */
.skin-preview {
  --core: #fff3a3;
  --glow: #f16c3f;
  --trail: #b9442e;
  position: relative;
  display: block;
  width: var(--ui-basic-preview-width);
  height: var(--ui-basic-preview-height);
  border: 3px solid var(--ink);
  background: #d9dee5;
  transform-origin: center;
  overflow: hidden;
}

.skin-preview::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 19px;
  width: 25px;
  height: 6px;
  background: var(--trail);
}

.skin-preview::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 11px;
  width: 20px;
  height: 20px;
  border: 4px solid var(--core);
  background: var(--glow);
}

.skin-preview.skin-empty::before,
.skin-preview.skin-empty::after {
  display: none;
}

.skin-preview.skin-sprite::before,
.skin-preview.skin-sprite::after {
  display: none;
}

.skin-preview-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 40px;
  height: 40px;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(2.0);
}

.skin-preview-sheet {
  display: block;
  width: 360px;
  height: 40px;
  max-width: none;
  image-rendering: pixelated;
  animation: skin-preview-flight 560ms steps(4) infinite;
}

@keyframes skin-preview-flight { to { transform: translateX(-160px); } }

.skin-preview.rarity-common { background-color: var(--ui-rarity-common); }
.skin-preview.rarity-uncommon { background-color: var(--ui-rarity-uncommon); }
.skin-preview.rarity-rare { background-color: var(--ui-rarity-rare); }
.skin-preview.rarity-epic { background-color: var(--ui-rarity-epic); }
.skin-preview.rarity-legendary { background-color: var(--ui-rarity-legendary); }

/* Character types and stats. */
fieldset {
  margin: 27px 0;
  padding: 0;
  border: 0;
}

legend {
  margin-bottom: 10px;
  font-weight: 700;
}

.types {
  display: grid;
  grid-template-columns: var(--ui-type-columns);
  gap: var(--ui-type-gap);
}

.type-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: var(--ui-type-card-padding);
  border: var(--ui-type-card-border);
  background: var(--ui-type-card-background);
  text-align: center;
  cursor: pointer;
}

.type-card.selected {
  border-color: var(--ink);
  box-shadow: var(--ui-type-card-selected-shadow);
}

.type-card input {
  position: absolute;
  opacity: 0;
}

.type-card small {
  color: var(--muted);
  font-size: 18px;
}

.class-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--ui-list-divider);
  color: var(--ink);
  font-size: var(--ui-class-stat-size);
}

.class-stats span {
  display: grid;
  gap: 2px;
}

.class-stats b {
  color: var(--orange);
  font-size: 18px;
}

/* Class portrait uses the first front-facing idle frame.
   Legacy sheets use 60×60 frames in a 480×780 image; editor configuration may override this. */
.avatar {
  width: 60px;
  height: 60px;
  margin: auto;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 480px 780px;
  image-rendering: pixelated;
}

.avatar.fast {
  background-image: url('../../assets/characters/fast.png');
}

.avatar.strong {
  background-image: url('../../assets/characters/strong.png');
}

.avatar.balanced {
  background-image: url('../../assets/characters/balanced.png');
}

.actions,
.join-box {
  display: flex;
  gap: 12px;
}

.join-box {
  align-items: end;
  margin-top: 18px;
}

.join-box label {
  flex: 1;
}


/* ===================================================================
   GOOGLE SIGN-IN AND PASSWORD RECOVERY
   =================================================================== */
.auth-extra { display: grid; justify-items: center; gap: 10px; margin-top: 16px; }
.google-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; }
.google-button[hidden] { display: none; }
.auth-extra .google-button { width: 100%; }
.google-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); color: #fff; font: 700 18px/1 var(--ui-body-font); }
.link-button { padding: 4px; border: 0; background: none; color: var(--ui-leave-color); text-decoration: underline; box-shadow: none; }
.auth-subform { display: grid; gap: 12px; margin-top: 8px; }
.auth-subform[hidden] { display: none; }
.auth-subform h2 { margin: 0; font-size: 18px; }
.auth-subform label { display: grid; gap: 7px; font-weight: 700; }
/* Server load at login: JavaScript sets the bar color from green to red. */
.server-load { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin: 12px 0 4px; font-size: 18px; font-weight: 700; }
.server-load[hidden] { display: none; }
.server-load-bar { position: relative; height: 10px; overflow: hidden; border: 2px solid var(--ink); background: #18202922; }
.server-load-fill { position: absolute; inset: 0 auto 0 0; width: 4%; background: #3aa35a; transition: width .4s ease, background-color .4s ease; }
.server-load.unlimited { grid-template-columns: auto 1fr; }
.server-load.unlimited .server-load-bar { width: 10px; height: 10px; border-radius: 50%; }
.server-load.unlimited .server-load-fill { width: 100% !important; }
.server-load.full .server-load-text { color: #c0392b; }
.login-queue { padding: 12px; border: 2px solid var(--ink); background: #fff6d8; }
.login-queue-position { margin: 0; font-size: 18px; font-weight: 700; }
.email-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 10px; }
.email-form label { display: grid; flex: 1 1 180px; gap: 4px; }
.email-form .small { margin: 0; }

/* ===================================================================
   ACCOUNT, CHARACTER, AND COLLECTION
   Screen selectors preserve the master layout palette over legacy 06-pixel-ui.css styles.
   Sprites, rarities, and --slot-* values continue to use editor content settings.
   =================================================================== */
:is(#authScreen, #characterScreen, #roomBrowserScreen) {
  color: var(--t-panel-text);
}
:is(#authScreen, #characterScreen, #roomBrowserScreen) > :is(h1, h2, h3, legend) {
  color: var(--t-panel-text);
  text-shadow: 1px 2px 0 var(--z-shadow);
}
:is(#authScreen, #characterScreen, #roomBrowserScreen) .eyebrow {
  color: var(--z-gold-light);
}
:is(#authScreen, #characterScreen, #roomBrowserScreen) > .muted,
#authScreen .auth-subform .muted {
  color: var(--t-panel-text);
  opacity: .85;
}
#authScreen .auth-actions { flex-wrap: wrap; }
#authScreen .auth-actions > button { flex: 1 1 150px; }
#authScreen .auth-subform {
  margin-top: 18px;
  padding: 16px;
  border: 2px solid var(--t-card-border);
  background: var(--t-panel-header-bg);
  color: var(--t-panel-text);
  box-shadow: inset 0 2px 0 var(--z-wood-light);
}
#authScreen .auth-subform h2 { color: var(--t-panel-text); line-height: 1.3; }
#authScreen .auth-subform .actions { flex-wrap: wrap; }
#authScreen .auth-subform .actions > button { flex: 1 1 130px; }
#authScreen .link-button { color: var(--z-gold-light); }
#authScreen .server-load { color: var(--t-panel-text); font-size: 14px; }
#authScreen .server-load-bar { border-color: var(--z-outline); background: var(--z-night); }
#authScreen .server-load.full .server-load-text { color: var(--z-red-light); }
#characterScreen .wallet {
  border-color: var(--z-outline);
  background: var(--t-panel-header-bg);
  color: var(--t-panel-text);
  box-shadow: inset 0 2px 0 var(--z-wood-light), 3px 3px 0 var(--z-shadow);
}
#characterScreen .wallet b { color: var(--z-gold-light); }
#characterScreen .wallet .small {
  border: var(--t-btn-highlight-border);
  background: var(--t-btn-highlight-bg);
  color: var(--t-btn-highlight-color);
}
#characterScreen .type-card,
#characterScreen :is(.loadout-slot, .loadout-skin-card) {
  border-color: var(--t-card-border);
  background: var(--t-card-bg);
  color: var(--t-card-text);
  box-shadow: inset 0 2px 0 var(--z-wood-light), 3px 3px 0 var(--z-shadow);
}
#characterScreen .type-card:hover,
#characterScreen :is(.loadout-slot, .loadout-skin-card):hover {
  border-color: var(--t-card-hover-border);
  background: var(--t-card-bg);
}
#characterScreen .type-card.selected,
#characterScreen .loadout-slot.selected {
  border-color: var(--t-card-selected-border);
  background: var(--t-card-bg);
  box-shadow: inset 0 0 0 2px var(--t-card-selected-shadow), 3px 3px 0 var(--z-shadow);
}
#characterScreen .type-card > :is(b, small),
#characterScreen :is(.loadout-slot-category, .loadout-slot small) {
  color: var(--t-card-text);
}
#characterScreen .type-card > small { opacity: .9; }
#characterScreen .class-stats {
  padding: 10px;
  border: 2px solid var(--z-outline);
  background: var(--t-field-bg);
  color: var(--t-field-color);
  box-shadow: inset 0 2px 0 var(--z-parchment-dark);
}
#characterScreen .class-stats .class-stat-heading :is(span, b) {
  color: var(--t-field-color);
}
#characterScreen .class-equipped,
#characterScreen .class-skin-worn,
#characterScreen .loadout-skin-card-status {
  border-color: var(--z-green-dark);
  background: var(--z-green);
  color: var(--z-light-text);
  box-shadow: inset 0 2px 0 var(--z-green-light);
}
#characterScreen :is(.class-skin-picker, .skin-loadout, .skin-loadout-picker, .class-info) {
  border: 2px solid var(--t-card-border);
  background: var(--t-panel-header-bg);
  color: var(--t-panel-text);
  box-shadow: inset 0 2px 0 var(--z-wood-light), 3px 3px 0 var(--z-shadow);
}
#characterScreen :is(.skin-loadout h2, .skin-loadout-picker h3, .class-skin-picker h3, #skinLoadoutSelection) {
  color: var(--t-panel-text);
}
#characterScreen :is(.skin-loadout-slots, .skin-loadout-carousel) {
  scrollbar-color: var(--z-wood-light) var(--t-panel-header-bg);
}
#characterScreen .loadout-skin-card.equipped {
  border-color: var(--z-green-light);
  background: var(--t-card-bg);
  color: var(--t-card-text);
  box-shadow: inset 0 0 0 1px var(--z-green), 3px 3px 0 var(--z-shadow);
}
#characterScreen .class-skin-slot {
  border-color: var(--z-outline);
  background: var(--t-card-bg);
  color: var(--t-card-text);
  box-shadow: inset 0 2px 0 var(--z-wood-light), 2px 2px 0 var(--z-shadow);
}
#characterScreen .class-skin-slot.selected {
  outline-color: var(--t-card-selected-border);
}
#characterScreen .class-skin-slot.empty {
  background: transparent;
  color: var(--t-panel-text);
  box-shadow: none;
}
#characterScreen .class-skin-preview { border-top-color: var(--t-card-border); }
#characterScreen .class-skin-stage {
  border-color: var(--z-outline);
  background: var(--t-card-bg);
  box-shadow: inset 0 0 0 2px var(--z-wood-light);
}
#characterScreen .class-skin-info :is(.muted, .shop-price-note) { color: var(--t-panel-text); }
#characterScreen .class-passive {
  border-color: var(--t-card-border);
  background: var(--t-panel-header-bg);
  color: var(--t-panel-text);
}
#characterScreen #classSkillInfo .class-info-tabs button[aria-selected="true"] {
  border: var(--t-btn-highlight-border);
  background: var(--t-tab-active-bg);
  color: var(--t-tab-active-color);
  box-shadow: var(--z-bevel);
}
#roomBrowserScreen .room-browser-entry {
  margin-bottom: 8px;
  padding: 12px;
  border: 2px solid var(--t-card-border);
  background: var(--t-card-bg);
  color: var(--t-card-text);
  box-shadow: inset 0 2px 0 var(--z-wood-light), 2px 2px 0 var(--z-shadow);
}
#roomBrowserScreen .room-browser-entry button {
  flex: 0 0 auto;
  width: auto;
  min-width: 100px;
  height: auto;
  min-height: 44px;
}
#roomBrowserScreen .private-join-form {
  padding: 12px;
  border: 2px solid var(--t-card-border);
  background: var(--t-panel-header-bg);
}
#characterScreen .class-skin-info { min-width: 0; }
#characterScreen .class-skin-head { flex-wrap: wrap; }
#characterScreen .class-skin-head b { overflow-wrap: anywhere; }
#characterScreen :is(.skin-loadout-carousel > .muted, .class-info p) { color: var(--t-panel-text); }
#characterScreen .type-card:focus-within { outline-color: var(--t-card-selected-border); }
#roomBrowserScreen .room-browser-entry :is(.muted, small) { color: var(--t-card-text); }
@media (max-width: 560px) {
  #authScreen .auth-subform { padding: 12px; }
  #characterScreen .join-box { flex-wrap: wrap; }
  #characterScreen .join-box label { flex: 1 1 180px; min-width: 0; }
  #roomBrowserScreen .room-browser-entry { flex-wrap: wrap; }
}