/* Crownlands.gg v10 UX/QoL hardening layer.
   Intentionally additive: improves interaction quality without changing game mechanics. */

:root {
  --ui-viewport-h: 100dvh;
  --ui-viewport-w: 100vw;
  --ui-safe-top: env(safe-area-inset-top, 0px);
  --ui-safe-right: env(safe-area-inset-right, 0px);
  --ui-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ui-safe-left: env(safe-area-inset-left, 0px);
  --ui-focus: #ffe083;
  --ui-focus-dark: #592d16;
  --ui-danger: #c84b4b;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--top-shell-h, 0px) + 18px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: var(--ui-viewport-h, 100dvh);
  min-width: 0;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

.app-main,
main,
section,
article,
.panel,
.glass-panel,
.world-select-page,
.blitz-browser-page,
.blitz-lobby-page,
.mode-select-page { min-width: 0; }

[id] { scroll-margin-top: calc(var(--top-shell-h, 0px) + 18px); }

/* Keyboard navigation */
.ui-skip-link {
  position: fixed;
  top: max(8px, var(--ui-safe-top));
  left: max(8px, var(--ui-safe-left));
  z-index: 30000;
  transform: translateY(-160%);
  padding: 10px 14px;
  border: 2px solid #5c2b13;
  border-radius: 10px;
  background: #ffdf78;
  color: #351407;
  font-weight: 900;
  box-shadow: 0 5px 0 rgba(60,25,8,.45);
  transition: transform .15s ease;
}
.ui-skip-link:focus { transform: translateY(0); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ui-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px var(--ui-focus-dark), 0 0 0 5px rgba(255,224,131,.28) !important;
}

button,
a,
summary,
label,
select { -webkit-tap-highlight-color: transparent; }

button:disabled,
.btn.disabled,
.btn-small.disabled,
[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .58;
  filter: saturate(.65);
}

/* Connection state and navigation progress */
.ui-connection-banner {
  position: fixed;
  top: max(8px, var(--ui-safe-top));
  left: 50%;
  z-index: 29000;
  transform: translate(-50%, -140%);
  max-width: min(520px, calc(100vw - 24px));
  padding: 9px 14px;
  border: 2px solid rgba(87,41,17,.75);
  border-radius: 999px;
  background: #f5c55a;
  color: #371708;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
  opacity: 0;
}
.ui-connection-banner.is-visible { transform: translate(-50%, 0); opacity: 1; }
.ui-connection-banner.is-offline { background: #f2b36b; }
.ui-connection-banner.is-online { background: #bde3a0; }

.ui-route-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 31000;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg,#ffd867,#fff0a4);
  box-shadow: 0 0 10px rgba(255,218,103,.7);
  opacity: 0;
  pointer-events: none;
  transition: width .25s ease, opacity .15s ease;
}
.ui-route-progress.is-active { width: 76%; opacity: 1; }
.ui-route-progress.is-finishing { width: 100%; opacity: 0; }

/* Toasts: readable, dismissible, safe around notches/nav. */
.toast-stack,
.world-select-messages {
  z-index: 22000 !important;
  max-width: min(460px, calc(100vw - 24px));
}
.toast {
  overflow-wrap: anywhere;
  touch-action: manipulation;
}
.toast .toast-close,
.toast-close {
  min-width: 32px;
  min-height: 32px;
}
.toast.ui-toast-persistent { animation: none !important; }

/* Modal behavior: predictable focus, escape/outside close, mobile safe height. */
body.ui-modal-open { overflow: hidden !important; touch-action: none; }
.event-modal {
  padding: max(12px, var(--ui-safe-top)) max(12px, var(--ui-safe-right)) max(12px, var(--ui-safe-bottom)) max(12px, var(--ui-safe-left));
  overscroll-behavior: contain;
}
.event-modal:not(.daily-chest-modal) > .panel,
.event-modal:not(.daily-chest-modal) > .glass-panel {
  max-height: min(88dvh, calc(var(--ui-viewport-h) - 24px - var(--ui-safe-top) - var(--ui-safe-bottom)));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Mobile HUD menus behave like compact popovers rather than page content. */
.mobile-hud-menu > summary { cursor: pointer; user-select: none; }
.mobile-hud-menu[open] { z-index: 16000; }
.mobile-hud-menu[open] .mobile-hud-panel {
  max-height: min(70dvh, calc(var(--ui-viewport-h) - var(--top-shell-h, 0px) - 18px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Forms */
form.ui-submitting { position: relative; }
form.ui-submitting :is(button[type="submit"], input[type="submit"], .btn[type="submit"]) {
  cursor: progress !important;
  pointer-events: none !important;
  filter: saturate(.7) brightness(.96);
}
form.ui-submitting :is(button[type="submit"], input[type="submit"])::after {
  content: '';
  display: inline-block;
  width: .8em;
  height: .8em;
  margin-left: .55em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -.08em;
  animation: uiSpin .7s linear infinite;
}

.form-error-summary,
.field-error,
.errorlist {
  overflow-wrap: anywhere;
}
.form-error-summary:focus { outline: 3px solid #ffcf64; outline-offset: 4px; }

input,
select,
textarea { max-width: 100%; }
textarea { resize: vertical; }
:where(input, select, textarea):user-invalid { border-color: #c44747 !important; }

/* Tables remain usable on phone screens without pushing the document wider. */
.ui-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  border-radius: inherit;
}
.ui-table-scroll > table { min-width: max-content; }

/* Live values: small confirmation pulse, not an animation-heavy HUD. */
.ui-value-changed { animation: uiValuePulse .58s ease-out; }

/* Better summary affordance and hit area. */
details > summary { min-height: 40px; }
details > summary::marker { font-size: .9em; }

/* Bottom navigation: selected item is reachable and touch targets remain consistent. */
.bottom-nav { scroll-snap-type: x proximity; }
.bottom-nav .nav-item { scroll-snap-align: nearest; }
.bottom-nav .nav-item[aria-current="page"] { position: relative; }

/* Blitz create form: keep the final action reachable on compact screens. */
@media (max-width: 760px) {
  .blitz-create-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 4 !important;
    box-shadow: 0 -8px 20px rgba(83,40,13,.10) !important;
  }
  .blitz-config-tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    backdrop-filter: blur(8px);
  }
  input,
  select,
  textarea { font-size: 16px !important; }
}

/* Keep controls clear in short landscape phone viewports. */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 950px) {
  body:not(.auth-body) .bottom-nav .nav-item {
    min-height: 46px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }
  body:not(.auth-body) .bottom-nav .nav-item span img {
    width: 21px !important;
    height: 21px !important;
  }
  .event-modal:not(.daily-chest-modal) > .panel,
  .event-modal:not(.daily-chest-modal) > .glass-panel { max-height: calc(var(--ui-viewport-h) - 12px); }
}

/* Coarse pointer users need comfortable targets even when desktop CSS is compact. */
@media (pointer: coarse) {
  :where(.btn, .btn-small, button, summary, .nav-item) { min-height: 42px; }
  :where(input:not([type="checkbox"]):not([type="radio"]), select) { min-height: 42px; }
}

@keyframes uiSpin { to { transform: rotate(360deg); } }
@keyframes uiValuePulse {
  0% { filter: brightness(1); transform: scale(1); }
  35% { filter: brightness(1.22); transform: scale(1.035); }
  100% { filter: brightness(1); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ui-value-changed { animation: none !important; }
}

@media (prefers-contrast: more) {
  :where(.btn,.btn-small,.panel,.glass-panel,.mode-tile,.blitz-lobby-tile) { border-width: 3px !important; }
  .muted, small { opacity: .92; }
}

@media (forced-colors: active) {
  :where(.btn,.btn-small,.nav-item,.panel,.glass-panel,input,select,textarea) { forced-color-adjust: auto; }
  :where(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid Highlight !important; }
}

/* Authentication/account entry screens must stay usable with browser UI and keyboards open. */
.auth-body {
  min-height: var(--ui-viewport-h, 100dvh);
  padding-left: max(10px, var(--ui-safe-left));
  padding-right: max(10px, var(--ui-safe-right));
}
.auth-card {
  max-width: min(100%, 760px);
  max-height: calc(var(--ui-viewport-h, 100dvh) - var(--ui-safe-top) - var(--ui-safe-bottom) - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.auth-form p,
.auth-form label,
.validated-auth-form label { min-width: 0; }
.auth-links { flex-wrap: wrap; }

/* Avoid layout breakage from player/world names and generated result copy. */
:where(.brand,.world-current-strip,.blitz-lobby-title-row,.blitz-result-row,.profile-head,.section-head) :where(strong,b,h1,h2,h3,span) {
  overflow-wrap: anywhere;
}

/* Interactive cards have a clear keyboard state without changing the game's visual identity. */
:where(.mode-tile,.blitz-lobby-tile,a.panel,a.glass-panel):focus-within {
  isolation: isolate;
}

@media (max-width: 760px) {
  .auth-card {
    width: min(100%, 620px);
    margin-top: max(10px, var(--ui-safe-top));
    margin-bottom: max(10px, var(--ui-safe-bottom));
  }
  .toast-stack {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
  .world-select-page,
  .mode-select-page,
  .blitz-browser-page,
  .blitz-lobby-page {
    padding-bottom: max(18px, var(--ui-safe-bottom)) !important;
  }
}