/* ==============================
   PLAYER — loaded by every player page, after tokens-base.css (the only shared
   sheet). The player's components are being rebuilt from the Unity USS
   (Assets/Shared/UI/<Tier>/<Tier>.uss, same class names); the previous design
   lives in the CMS (cms/css/cms-components.css).
   Until then this file holds only what the web-only screens need — loading
   screen, landing / login, account settings, report, demo end, boot spinner
   and error card, toasts — taken from the player's previous CSS, which Unity
   now carries too (Pages.uss for the screens themselves). Then layer 8, the
   landscape split. Pages Unity has (chat, chat list, home, story) stay
   unstyled until they are rebuilt from Unity.
   ============================== */

/* ─── 3.1 DEFAULT BUTTON ─── */

button,
input[type='button'],
input[type='submit'] {
  background: transparent;
  border: none;
  color: var(--white);
}

button:where(:not( .circle-btn, .btn-pill, .emoji-picker-button, .nav-link )),
input[type='button'],
input[type='submit'] {
  --ch: 14px;
  padding: var(--space-2) var(--space-4);
  width: fit-content;
  white-space: nowrap;
  position: relative;
}

button:where(:not( .circle-btn, .btn-pill, .emoji-picker-button, .nav-link ))::before,
input[type='button']::before,
input[type='submit']::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  --bw: var(--border-width-base);
  --c: var(--accent-50);
  transition: all var(--transition-fast);
  background:
  linear-gradient(var(--c), var(--c)) top / 100% var(--bw) no-repeat,
  linear-gradient(var(--c), var(--c)) right / var(--bw) 100% no-repeat,
  linear-gradient(var(--c), var(--c)) right bottom / calc(100% - var(--ch)) var(--bw) no-repeat,
  linear-gradient(var(--c), var(--c)) left top / var(--bw) calc(100% - var(--ch)) no-repeat,
  linear-gradient(45deg, transparent calc(50% - var(--bw) * 0.707), var(--c) calc(50% - var(--bw) * 0.707), var(--c) calc(50% + var(--bw) * 0.707), transparent calc(50% + var(--bw) * 0.707)) left bottom / var(--ch) var(--ch) no-repeat;
}

button:where(:not( .circle-btn, .btn-pill, .emoji-picker-button, .nav-link )):hover::before {
  --c: var(--accent);
}

/* ─── 3.2 DEFAULT BUTTON: FILLED VARIANT ─── */

.btn-light {
  --btn-bg: var(--accent-50);
  --btn-bg-hover: var(--accent);
  --btn-color: var(--black);
  --btn-color-hover: var(--white);
  background: var(--btn-bg);
  color: var(--btn-color);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--ch) 100%, 0 calc(100% - var(--ch)));
}

.btn-light:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-color-hover);
}

.btn-light::before {
  background: none;
}

/* ─── 3.3 DEFAULT BUTTON: DANGER VARIANT ─── */

.btn-danger {
  --btn-bg: var(--danger);
  --btn-bg-hover: var(--danger-50);
  background: var(--btn-bg);
  color: var(--white);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--ch) 100%, 0 calc(100% - var(--ch)));
}

.btn-danger:hover {
  background: var(--btn-bg-hover);
}

.btn-danger::before {
  background: none;
}

/* ─── 3.4 CIRCLE BUTTON ─── */

.circle-btn {
  background: var(--accent-50);
  border: var(--border-width-base) solid var(--accent);
  border-radius: var(--radius-circle);
  color: var(--accent-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  flex-shrink: 0;
  align-self: center;
  justify-self: center;
  font-size: calc(var(--header-height) * 0.3);
  transition: background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.circle-btn::before {
  display: none;
}

.circle-btn:hover {
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent-50);
  color: var(--white);
}

.circle-btn i {
  transition: transform var(--transition-fast);
}

.circle-btn:hover i {
  transform: scale(1.25);
}

/* ─── 3.8 TABS (+ auth variant) ─── */

.nav {
  display: flex; flex-wrap: wrap; padding-left: 0; margin: 0; list-style: none;
}

.nav-item {
  list-style: none;
}

.nav-tabs {
  border-bottom: var(--border-width-thin) solid var(--accent-secondary-50);
}

.nav-tabs .nav-link {
  color: var(--white-50);
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.nav-tabs .nav-link:hover {
  color: var(--white);
  background: var(--accent-secondary-50);
}

.nav-tabs .nav-link.active {
  color: var(--white);
  background: var(--accent-secondary-50);
  border-bottom: var(--border-width-thick) solid var(--accent);
}

.auth-tabs .nav-link {
  flex: 1;
  padding: var(--space-3);
  text-align: center;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

/* ─── 3.10 FORMS ─── */

label {
  color: var(--white-50);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
}

.form-label {
  display: inline-block; margin-bottom: var(--space-2);
}

.form-control {
  padding: var(--space-3) var(--space-4);
}

.form-control:focus {
  caret-color: var(--black);
}

.form-control::placeholder {
  color: var(--white-50);
}

/* ─── 3.11 FOCUS & PRESS ─── */

button:focus:not(:focus-visible) {
  box-shadow: none;
  outline: none;
}

button:active:not(:disabled) {
  transform: scale(var(--active-scale));
  filter: brightness(1.1);
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

button:focus-visible,
a:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: var(--focus-ring-width) solid var(--accent-50) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* ─── 4.1 SHARED MOLECULES ─── */

.glass-panel {
  -webkit-backdrop-filter: var(--blur-heavy);
  backdrop-filter: var(--blur-heavy);
  position: relative;
  overflow: hidden;
  padding: var(--space-3);
}

/* ─── 4.2 MESSAGES ─── */

.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.typing-indicator span {
  width: var(--space-2);
  height: var(--space-2);
  background: var(--accent);
  border-radius: var(--radius-circle);
  animation: bounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0;
}

/* ─── 4.3 NOTIFICATIONS ─── */

.toast-container {
  position: fixed; bottom: 0; right: 0; padding: var(--space-4); z-index: var(--z-toast);
}

.toast {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  max-width: 350px;
  color: var(--white);
}

.toast-body {
  flex: 1;
}

.toast-close {
  margin-left: var(--space-3);
}

.toast[data-type="success"] {
  background-color: var(--success);
}

.toast[data-type="error"] {
  background-color: var(--danger);
}

.toast[data-type="warning"] {
  background-color: var(--warning); color: var(--black);
}

.toast[data-type="info"] {
  background-color: var(--info);
}

.toast[data-type="updating"] {
  background-color: var(--info); opacity: 0.85;
}

/* ─── 5.1 HEADER / FOOTER BAR ─── */

.header-top-row > :nth-child(2):not(:last-child) {
  justify-self: center;
}

.header-top-row > :last-child:not(:first-child) {
  grid-column: 3;
  justify-self: end;
}

.chat-title-logo {
  grid-column: 2;
  justify-self: center;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

/* ─── 6.0 PAGE FRAME ─── */

.page-frame {
  height: var(--app-height, 100dvh);
  aspect-ratio: 9 / 16;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

.page-frame.hidden {
  display: none;
}

/* ─── 6.3 AUTH ─── */

.auth-screen {
  justify-content: center;
}

.fullscreen-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-loading);
  background: url('../assets/background.png') no-repeat center center fixed;
  background-size: cover;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  color: var(--white);
  font-size: var(--font-size-lg);
}

.app-loading-screen {
  transition: opacity var(--transition-slow);
  pointer-events: all;
}

.app-loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.fullscreen-overlay h1,
.fullscreen-overlay i {
  font-size: var(--font-size-4xl);
  color: var(--accent);
}

.fullscreen-overlay h1,
.app-loading-spinner {
  margin-bottom: var(--space-4);
}

.fullscreen-overlay p {
  color: var(--neutral);
}

.auth-card {
  width: 100%;
}

.auth-card-logo,
.auth-tabs {
  margin-bottom: var(--space-5);
}

.auth-card-logo {
  text-align: center;
}

.auth-card-logo h1 {
  color: var(--accent);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.auth-card-logo select {
  width: auto;
  display: inline-block;
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
}

.auth-form {
  display: none;
}

.auth-form.active {
  display: block;
}

.turnstile-container {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.auth-error,
.auth-success {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
  display: none;
  background: var(--feedback);
  border: var(--border-width-thin) solid var(--feedback);
  color: var(--white);
}

.auth-error.show,
.auth-success.show {
  display: block;
}

.auth-error {
  --feedback: var(--danger);
}

.auth-success {
  --feedback: var(--success);
}

.password-requirements {
  font-size: var(--font-size-xs);
  color: var(--white-50);
  margin-top: var(--space-2);
}

.auth-forgot {
  text-align: right;
  margin-top: var(--space-1);
  margin-bottom: var(--space-2);
}

.auth-forgot a,
.auth-back-link a {
  color: var(--accent-light);
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.auth-forgot a:hover,
.auth-back-link a:hover {
  text-decoration: underline;
}

.auth-back-link {
  text-align: center;
  margin-top: var(--space-3);
}

.auth-form-desc {
  color: var(--white-50);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

.auth-form-desc--centered {
  text-align: center;
}

.auth-form-desc--centered .auth-form-desc__icon {
  font-size: var(--font-size-lg);
  color: var(--accent-light);
  margin-bottom: var(--space-2);
  display: block;
}

.account-settings-body {
  padding: var(--space-4);
  max-width: 500px;
  margin: 0 auto;
  overflow-y: auto;
  flex: 1;
}

.account-section {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width-thin) solid var(--white-10);
}

.account-section:last-child {
  border-bottom: none;
}

.account-section h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
  color: var(--white);
}

.account-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.account-field label {
  min-width: 100px;
  font-size: var(--font-size-sm);
  color: var(--white-50);
}

.account-field .form-control {
  flex: 1;
}

.account-field .btn-light {
  flex-shrink: 0;
}

.account-value {
  color: var(--white-50);
  font-size: var(--font-size-sm);
}

.account-danger-zone {
  border-color: var(--danger-50);
}

.account-danger-zone p {
  color: var(--white-50);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
}

.account-delete-confirm {
  display: none;
  margin-top: var(--space-3);
}

.account-delete-confirm.show {
  display: block;
}

.report-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.report-body .glass-panel {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
}

.demo-end-screen {
  background: var(--accent-secondary);
}

.demo-end-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-4);
}

.demo-end-body > :is(h2, p) {
  margin: 0;
}

/* ─── 7.1 SPACING ─── */

.mb-3 {
  margin-bottom: var(--space-4) !important;
}

.mb-4 {
  margin-bottom: var(--space-5) !important;
}

/* ─── Boot overlay (from init-overlay.css) ─── */

.init-progress {
  margin-top: var(--space-4);
  color: var(--white-50);
  font-size: var(--font-size-sm);
  max-width: 28ch;
  text-align: center;
}

.init-reload-btn {
  margin-top: var(--space-4);
}

.init-error-overlay {
  display: flex;
  z-index: var(--z-overlay);
}

.init-error-card {
  max-width: 360px;
  text-align: center;
  padding: var(--space-5);
}

.init-error-card h2 {
  margin-bottom: var(--space-3);
}

.init-error-card p {
  margin-bottom: var(--space-4);
  opacity: 0.85;
}

.init-error-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ─── 8. LANDSCAPE (width > height) ───
   The one screen cutoff, same as Unity's ScreenLayout: the current layout
   fills the right half; the left half is an empty pane reserved for later. */
@media (orientation: landscape) {
  html {
    background: var(--accent-secondary-deep);
  }

  body {
    margin-left: 50%;
    transform: translateZ(0); /* keeps position: fixed overlays in the right half */
  }
}