/* ui.css - design tokens and classes for ui/menu.js (ENGINE.md ui).
   Tokens live on :root; dark values apply under prefers-color-scheme unless data-theme="light",
   or when data-theme="dark" is set. Mobile first, 44px+ touch targets, reduced motion respected. */

:root {
  --ui-panel: #fffaf0;
  --ui-panel-2: #ffe9b5;
  --ui-panel-edge: #c9a25a;
  --ui-ink: #1b1340;
  --ui-muted: #5b5375;
  --ui-scrim: rgba(12, 8, 36, 0.55);
  --ui-accent: #3fd27f;
  --ui-accent-d: #1d8a4f;
  --ui-blue: #4aa3ff;
  --ui-blue-d: #2a6fc0;
  --ui-pink: #ff5d8f;
  --ui-pink-d: #b8325f;
  --ui-gold: #ffc83d;
  --ui-gold-d: #c98a06;
  --ui-on-color: #ffffff;
  --ui-on-gold: #1b1340;
  --ui-focus: #ffc83d;
  --ui-toast-bg: #1b1340;
  --ui-toast-ink: #fff8e7;
  --ui-shadow: 0 18px 40px rgba(5, 8, 25, 0.45);
  --ui-radius-panel: 28px;
  --ui-radius-btn: 999px;
  --ui-font: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ui-panel: #2a2452;
    --ui-panel-2: #221d44;
    --ui-panel-edge: #120d2e;
    --ui-ink: #fff8e7;
    --ui-muted: #c9c3e6;
    --ui-scrim: rgba(4, 2, 16, 0.7);
    --ui-accent: #35c477;
    --ui-accent-d: #17703f;
    --ui-blue: #5fb0ff;
    --ui-blue-d: #2a6fc0;
    --ui-pink: #ff6f9c;
    --ui-pink-d: #9c2a50;
    --ui-gold: #ffd254;
    --ui-gold-d: #b87f05;
    --ui-focus: #ffd254;
    --ui-toast-bg: #fff8e7;
    --ui-toast-ink: #1b1340;
    --ui-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --ui-panel: #2a2452;
  --ui-panel-2: #221d44;
  --ui-panel-edge: #120d2e;
  --ui-ink: #fff8e7;
  --ui-muted: #c9c3e6;
  --ui-scrim: rgba(4, 2, 16, 0.7);
  --ui-accent: #35c477;
  --ui-accent-d: #17703f;
  --ui-blue: #5fb0ff;
  --ui-blue-d: #2a6fc0;
  --ui-pink: #ff6f9c;
  --ui-pink-d: #9c2a50;
  --ui-gold: #ffd254;
  --ui-gold-d: #b87f05;
  --ui-focus: #ffd254;
  --ui-toast-bg: #fff8e7;
  --ui-toast-ink: #1b1340;
  --ui-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

[hidden] {
  display: none !important;
}

/* Overlay root: covers the viewport but lets input through except on panels, cards and buttons. */
.ui-root,
[data-ui-root] {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  overflow-y: auto;
  pointer-events: none;
  font-family: var(--ui-font);
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

.ui-panel {
  width: min(92vw, 420px);
  padding: 22px 20px 24px;
  border-radius: var(--ui-radius-panel);
  text-align: center;
  color: var(--ui-ink);
  background: linear-gradient(180deg, var(--ui-panel), var(--ui-panel-2));
  box-shadow: 0 8px 0 var(--ui-panel-edge), var(--ui-shadow);
  pointer-events: auto;
  box-sizing: border-box;
  animation: ui-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.ui-card {
  width: min(92vw, 360px);
  padding: 16px 16px 18px;
}

.ui-title {
  margin: 0 0 6px;
  font-size: clamp(1.7rem, 7vw, 2.3rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ui-ink);
}

.ui-subtitle {
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ui-pink-d);
  font-size: 0.85rem;
}

.ui-text {
  margin: 8px 0;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ui-muted);
}

.ui-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.ui-btn {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 14px 18px;
  border: 0;
  border-radius: var(--ui-radius-btn);
  cursor: pointer;
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: var(--ui-on-color);
  background: linear-gradient(#6be39a, var(--ui-accent));
  box-shadow: 0 6px 0 var(--ui-accent-d), 0 12px 18px rgba(0, 0, 0, 0.25);
  touch-action: manipulation;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease;
  animation: ui-rise 0.4s ease both;
  animation-delay: calc(var(--ui-i, 0) * 60ms);
}

.ui-btn:hover {
  filter: brightness(1.05);
}

.ui-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--ui-accent-d), 0 6px 10px rgba(0, 0, 0, 0.25);
}

.ui-btn:focus-visible {
  outline: 4px solid var(--ui-focus);
  outline-offset: 3px;
}

.ui-btn--blue {
  background: linear-gradient(#8cc4ff, var(--ui-blue));
  box-shadow: 0 6px 0 var(--ui-blue-d), 0 12px 18px rgba(0, 0, 0, 0.25);
}

.ui-btn--pink {
  background: linear-gradient(#ff8fb3, var(--ui-pink));
  box-shadow: 0 6px 0 var(--ui-pink-d), 0 12px 18px rgba(0, 0, 0, 0.25);
}

.ui-btn--gold {
  color: var(--ui-on-gold);
  background: linear-gradient(#ffe27a, var(--ui-gold));
  box-shadow: 0 6px 0 var(--ui-gold-d), 0 12px 18px rgba(0, 0, 0, 0.25);
}

.ui-btn--ghost {
  color: var(--ui-ink);
  background: transparent;
  box-shadow: inset 0 0 0 3px var(--ui-ink);
}

.ui-btn--ghost:active {
  box-shadow: inset 0 0 0 3px var(--ui-ink), 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Friends screen: compact rows (name + online dot, then Invite and remove). */
.ui-btn--small {
  width: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  font-size: 0.95rem;
}

.ui-btn.is-disabled,
.ui-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-friends {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 40vh;
  overflow-y: auto;
  margin: 10px 0;
}

.ui-friend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 2px dashed var(--ui-panel-edge);
}

.ui-friend-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ui-ink);
  font-weight: 800;
}

.ui-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ui-muted);
}

.ui-dot.is-online {
  background: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(63, 210, 127, 0.25);
}

.ui-friend .ui-btn--small {
  flex: none;
}

/* Code box beside a button (Friends "Add", Network "Join"): the box takes the leftover row width.
   16px font stops iOS zoom on focus. */
.ui-code-row {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}

.ui-code-row > input {
  flex: 1 1 0;
  min-width: 7em;
  box-sizing: border-box;
  padding: 12px;
  border: 3px solid var(--ui-ink);
  border-radius: var(--ui-radius-btn);
  background: var(--ui-panel-2);
  color: var(--ui-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ui-code-row > input::placeholder {
  color: var(--ui-muted);
  opacity: 1;
  letter-spacing: 0.04em;
}

.ui-code-row > .ui-btn {
  width: auto;
  flex: none;
}

/* Read-only invite link on the waiting screen (tap selects all). */
.ui-link-field {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0 0;
  padding: 12px;
  border: 3px solid var(--ui-ink);
  border-radius: var(--ui-radius-btn);
  background: var(--ui-panel-2);
  color: var(--ui-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.ui-toast {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  max-width: min(92vw, 520px);
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--ui-toast-bg);
  color: var(--ui-toast-ink);
  font-family: var(--ui-font);
  font-weight: 800;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  animation: ui-rise 0.3s ease both;
}

@keyframes ui-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

@keyframes ui-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-panel,
  .ui-btn,
  .ui-toast {
    animation: none !important;
    transition: none !important;
  }
}