/*
 * Small, deliberately isolated polish layer for the pinned Java client.
 *
 * The Minecraft Web Client owns the pixel-art UI.  This file only deals with
 * browser chrome concerns that the upstream client cannot know about: safe
 * areas, touch hit targets, orientation guidance and an accessible connection
 * status.  Every selector is prefixed with `baiji-` or targets an upstream
 * mobile utility class, so an upstream stylesheet update remains low risk.
 */

:root {
  --baiji-java-font: minecraft, mojangles, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --baiji-safe-top: max(10px, env(safe-area-inset-top));
  --baiji-safe-right: max(10px, env(safe-area-inset-right));
  --baiji-safe-bottom: max(10px, env(safe-area-inset-bottom));
  --baiji-safe-left: max(10px, env(safe-area-inset-left));
}

/* The upstream pixel fonts do not contain Chinese glyphs and its stylesheet
 * loads after this host layer. Force a CJK-capable fallback only on visible
 * text controls; icon controls keep their own font. */
.fullscreen .screen-title,
.fullscreen .screen-content,
.fullscreen .screen-content button,
.fullscreen .screen-content label,
.fullscreen .screen-content input,
.fullscreen .screen-content textarea,
.fullscreen .screen-items,
.fullscreen .screen-items button,
.initial-loader-loading-title,
.initial-loader-error-title,
.initial-loader-error-subtitle,
.initial-loader-ios-warning,
[class*="splash-"],
[class*="bottom-info-"],
[class*="menu-"] > button,
[class*="menu-"] button,
[class*="pause_container-"] > button,
[class*="pause_container-"] button,
[class*="world_root-"],
[class*="world_root-"] button,
[class*="world_info-"],
[class*="world_title-"],
[class*="deathScreen-"],
[class*="deathScreen-"] button,
[class*="slider-container-"],
[class*="slider-container-"] button,
.button-KqXTeV,
.input-Vt4rMm,
.input-Mraw77 {
  font-family: var(--baiji-java-font) !important;
}

html,
body {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* F3 already provides the full diagnostics overlay. The always-mounted
 * upstream mini FPS graph is useful to developers but visually competes with
 * the Java title screen and touch controls in production. */
#corner-indicator-stats {
  display: none !important;
}

#baiji-empty-worlds {
  display: flex;
  min-height: 34vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #aaa;
  font: 10px/1.45 mojangles, monospace;
  text-align: center;
  text-shadow: 1px 1px #000;
}

#baiji-empty-worlds strong {
  color: #fff;
  font-size: 13px;
  font-weight: 400;
}

#baiji-empty-worlds[data-kind="search"] strong {
  color: #ffffa0;
}

/* The pinned world list has fixed card widths and no clipping for long names.
 * Keep vanilla-style single-line metadata inside the card and let narrow
 * phone layouts shrink the card instead of pushing actions off screen. */
[class*="world_root-"] {
  max-width: calc(100dvw / var(--guiScale, 1) - 12px);
}

[class*="world_info-"] {
  min-width: 0;
  overflow: hidden;
}

[class*="world_title-"] {
  min-width: 0;
  gap: 3px;
}

[class*="world_title-"] > div:first-child,
[class*="world_info_description_line-"] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

[class*="world_title_right-"] {
  flex: 0 0 auto;
}

[class*="world_root-"][role="button"]:focus-visible {
  border-color: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75);
}

/* Complete the local Create World flow with controls that map to real
 * integrated-server options. The 400px logical width matches the upstream
 * Java menu; the viewport bound keeps it usable at larger GUI scales. */
.baiji-create-seed,
.baiji-create-options {
  width: min(400px, calc(100dvw / var(--guiScale, 1) - 12px));
}

.baiji-create-seed {
  display: grid;
  gap: 2px;
  margin-top: 2px;
}

.baiji-create-seed > :first-child {
  width: 100% !important;
  min-width: 0;
}

.baiji-create-seed [aria-invalid="true"] {
  outline: 1px solid #ff6b6b;
  outline-offset: -1px;
}

.baiji-seed-help {
  min-height: 10px;
  color: #aaa;
  font-size: 8px;
  line-height: 1.25;
  text-align: center;
  text-shadow: 1px 1px #000;
}

.baiji-create-seed [aria-invalid="true"] + .baiji-seed-help,
.baiji-create-seed:has([aria-invalid="true"]) .baiji-seed-help {
  color: #ffb3b3;
}

.baiji-create-options {
  display: flex;
}

.baiji-create-options > button {
  min-width: 0;
  flex: 1 1 0;
}

/* A status chip is shown only while the client is loading or connecting. */
#baiji-client-status-visible {
  position: fixed;
  z-index: 100001;
  left: var(--baiji-safe-left);
  bottom: var(--baiji-safe-bottom);
  max-width: min(92vw, 34rem);
  padding: 6px 10px;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.65);
  font: 11px/1.35 mojangles, monospace;
  text-shadow: 1px 1px #000;
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 140ms ease, transform 140ms ease;
}

#baiji-client-status-visible[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}

#baiji-client-status-visible[data-state="error"] {
  color: #ffd4d4;
  border-color: rgba(255, 100, 100, 0.75);
}

/* Explain the storage/connection boundary without covering the vanilla HUD.
 * The badge is intentionally quiet and only appears once a world is active
 * (or while the browser is offline on the title screen). */
#baiji-runtime-mode {
  position: fixed;
  z-index: 100001;
  top: var(--baiji-safe-top);
  left: var(--baiji-safe-left);
  max-width: min(88vw, 28rem);
  padding: 4px 8px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.65);
  font: 10px/1.3 mojangles, monospace;
  text-shadow: 1px 1px #000;
  pointer-events: none;
  opacity: 0.92;
}

#baiji-runtime-mode[data-kind="local"] {
  color: #d9ffd2;
  border-color: rgba(130, 220, 110, 0.5);
}

#baiji-runtime-mode[data-kind="offline"] {
  color: #ffe5a5;
  border-color: rgba(255, 207, 96, 0.56);
}

#baiji-runtime-mode[hidden] {
  display: none !important;
}

/* Recovery controls are inserted into the upstream loader only after a
 * failure. Keep the same pixel-panel language while making the next action
 * obvious on desktop and touch devices. */
#baiji-load-recovery {
  width: min(560px, 88vw);
  margin-top: 14px;
  color: #ddd;
  font: 12px/1.45 mojangles, monospace;
  text-align: center;
  text-shadow: 1px 1px #000;
}

.baiji-recovery-copy {
  margin: 0 auto 12px;
  max-width: 48em;
}

.baiji-recovery-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.baiji-recovery-actions button {
  min-height: 36px;
  padding: 7px 12px;
  color: #fff;
  background: linear-gradient(#777, #555);
  border: 2px solid #000;
  outline: 2px solid #aaa;
  box-shadow: inset 2px 2px #aaa, inset -2px -2px #333;
  font: 11px/1.2 mojangles, monospace;
  text-shadow: 1px 1px #222;
  cursor: pointer;
}

.baiji-recovery-actions button:hover,
.baiji-recovery-actions button:focus-visible {
  color: #ffffa0;
  background: linear-gradient(#7185b5, #526799);
  outline-color: #c5d2ff;
}

.baiji-recovery-actions button:focus-visible {
  outline-offset: 2px;
}

.baiji-recovery-actions button:disabled {
  cursor: wait;
  filter: grayscale(0.7);
  opacity: 0.72;
}

/* Non-blocking hint: the title screen still works in portrait mode. */
#baiji-orientation-hint,
#baiji-touch-hint {
  position: fixed;
  z-index: 100002;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-family: mojangles, monospace;
  text-align: center;
  text-shadow: 2px 2px #000;
  pointer-events: none;
}

#baiji-orientation-hint[hidden],
#baiji-touch-hint[hidden],
#baiji-client-status-visible[hidden] {
  display: none !important;
}

.baiji-hint-card {
  width: min(340px, 90vw);
  padding: 18px 16px 14px;
  background: rgba(18, 18, 18, 0.94);
  border: 2px solid #777;
  outline: 2px solid #111;
  box-shadow: inset 2px 2px #aaa, inset -2px -2px #333, 0 12px 36px #000;
  pointer-events: auto;
}

.baiji-hint-title {
  margin: 0 0 8px;
  color: #fff;
  font-size: 17px;
}

.baiji-hint-copy {
  margin: 0;
  color: #d0d0d0;
  font-size: 11px;
  line-height: 1.5;
}

.baiji-hint-dismiss {
  width: 100%;
  min-height: 40px;
  margin-top: 14px;
  padding: 7px 12px;
  color: #fff;
  background: linear-gradient(#777, #555);
  border: 2px solid #000;
  outline: 2px solid #aaa;
  box-shadow: inset 2px 2px #aaa, inset -2px -2px #333;
  font: 12px/1.2 mojangles, monospace;
  text-shadow: 1px 1px #222;
  cursor: pointer;
}

.baiji-hint-dismiss:hover,
.baiji-hint-dismiss:focus-visible {
  color: #ffffa0;
  background: linear-gradient(#7185b5, #526799);
  outline-color: #c5d2ff;
}

.baiji-hint-dismiss:focus-visible {
  outline-offset: 2px;
}

/* Keep the reference client's compact top actions reachable on notched phones. */
@media (pointer: coarse) {
  [class*="mobile-top-btns-"] {
    padding-top: max(6px, env(safe-area-inset-top));
    gap: 0 8px;
  }

  /* The pinned client renders these quick actions as icon-only divs. Keep
     the artwork at its upstream size, but give each action a comfortable
     44px touch target. The pseudo element expands hit testing without
     changing layout or making the top row visually heavier. */
  [class*="mobile-top-btns-"] > div {
    position: relative;
    z-index: 0;
    touch-action: manipulation;
    cursor: pointer;
  }

  [class*="mobile-top-btns-"] > div::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -12px;
  }

  [class*="mobile-top-btns-"] > div:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
    filter: drop-shadow(0 0 3px #000);
  }

  [class*="mobile-top-btns-"] button,
  [class*="mobile-top-btns-"] [role="button"],
  [class*="mobile-top-btns-"] input,
  [class*="mobile-top-btns-"] select,
  [class*="mobile-top-btns-"] a {
    min-width: 40px;
    min-height: 40px;
    touch-action: manipulation;
  }

  .chat-input,
  #chatinput,
  .input-mobile input,
  .input-mobile textarea,
  input[type="text"],
  input[type="search"] {
    min-height: 40px;
    font-size: max(16px, 1em) !important;
  }

  /* Prevent iOS from zooming the canvas when a control receives a quick tap. */
  button,
  [role="button"],
  a {
    touch-action: manipulation;
  }
}

@media (max-width: 600px) {
  [class*="bottom-info-"] {
    bottom: max(2px, env(safe-area-inset-bottom)) !important;
    align-items: flex-end !important;
    font-size: 8px !important;
    line-height: 1.2;
  }

  [class*="bottom-info-"] > div:first-child > span:nth-child(2),
  [class*="product-link-"] {
    display: none !important;
  }

  [class*="product-description-"] {
    max-width: 52vw;
    padding-right: max(3px, env(safe-area-inset-right)) !important;
    font-size: 8px;
    text-align: right;
  }

  #baiji-client-status-visible {
    right: var(--baiji-safe-right);
    bottom: var(--baiji-safe-bottom);
    max-width: none;
    font-size: 10px;
  }

  #baiji-runtime-mode {
    right: var(--baiji-safe-right);
    max-width: none;
    font-size: 9px;
  }

  .baiji-hint-card {
    padding: 15px 13px 12px;
  }

  .baiji-hint-title {
    font-size: 15px;
  }

  #baiji-load-recovery {
    width: min(92vw, 28rem);
    font-size: 10px;
  }

  .baiji-recovery-actions {
    gap: 8px;
  }

  .baiji-recovery-actions button {
    min-height: 40px;
    flex: 1 1 42%;
  }

  #baiji-empty-worlds {
    min-height: 28vh;
    padding: 0 18px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #baiji-client-status-visible {
    transition: none;
  }
}