/* Small layer of custom CSS on top of Tailwind (Play CDN handles the rest). */

@font-face {
  font-family: 'Minecraft';
  src: url('../fonts/Minecraft.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Minecraft';
  src: url('../fonts/MinecraftBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Qrafty';
  src: url('../fonts/qrafty.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: 'Minecraft', system-ui, sans-serif;
  --font-pixel: 'Minecraft', 'Courier New', monospace;
}

#toast-root {
  position: fixed;
  z-index: 60;
  top: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: flex-end;
  pointer-events: none;
}
#toast-root .toast { pointer-events: auto; }

/* Toast enter/leave animation */
.toast {
  transform: translateY(-6px);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  background: #16a34a;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  padding: .75rem 1rem;
  max-width: 20rem;
}
.toast.toast--error { background: #dc2626; }
.toast.toast--info { background: #16202B; }
.toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* Tidy number inputs (drop the spinner arrows) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; }
}

/* Public "championship app" — live status animations */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes pulsering {
  0%   { box-shadow: 0 0 0 0 rgba(84, 227, 107, .5); }
  70%  { box-shadow: 0 0 0 8px rgba(84, 227, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(84, 227, 107, 0); }
}

/* =========================================================================
   Admin — Space Grotesk instead of Minecraft everywhere in the panel
   ========================================================================= */
.admin-shell {
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-pixel: 'Space Grotesk', system-ui, sans-serif;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
.admin-shell .font-sans,
.admin-shell .font-pixel {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

/* =========================================================================
   Admin dark theme — mirrors the public "roster" look (night + star dots,
   #181D29 cards, light text). Component classes keep the templates tidy;
   layout/size still comes from Tailwind utilities so there are no conflicts.
   ========================================================================= */

/* Dark page surface with the dotted "star" field */
.admin {
  background-color: #10131C;
  background-image: radial-gradient(rgba(255, 255, 255, .35) 1.2px, transparent 1.4px);
  background-size: 42px 42px;
}

/* Card / panel surface */
.surface {
  background: #181D29;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1rem;
}
.surface-2 { background: #1F2533; }              /* slightly raised (modals) */

/* Hairline divider on dark */
.divide-dark > * + * { border-top: 1px solid rgba(255, 255, 255, .08); }

/* Form fields (standard size; small variants use utilities instead) */
.field {
  width: 100%;
  background: #10131C;
  border: 2px solid rgba(255, 255, 255, .10);
  color: #F1F5F9;
  border-radius: .5rem;
  padding: .625rem .75rem;
  outline: none;
  transition: border-color .15s ease;
}
.field::placeholder { color: #94A3B8; }
.field:focus { border-color: #FCC433; }
.admin select.field option {
  background: #1F2533;
  color: #F1F5F9;
}
.admin select.field optgroup {
  background: #181D29;
  color: #CBD5E1;
  font-weight: 600;
}

/* Buttons — colour/border only; sizing stays in the template utilities */
.btn-gold, .btn-ghost, .btn-danger {
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, background-color .12s ease;
}
.btn-gold { background: #FCC433; color: #3A2A05; }
.btn-gold:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-gold:active { transform: translateY(0); }
.btn-ghost { background: rgba(255, 255, 255, .06); color: #E2E8F0; border: 1px solid rgba(255, 255, 255, .15); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.btn-danger { background: transparent; color: #FB7185; border: 1px solid rgba(244, 63, 94, .30); }
.btn-danger:hover { background: rgba(244, 63, 94, .12); }

.stat-drag-handle {
  cursor: grab;
  color: #94A3B8;
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
  user-select: none;
  touch-action: none;
}
.stat-drag-handle:active { cursor: grabbing; }
.stat-sortable-row.is-dragging {
  opacity: .55;
  outline: 1px dashed rgba(252, 196, 51, .45);
}

/* Admin bracket — narrower content area than The Portal */
.admin .bracket-fit {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.admin .bracket-fit__shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.admin .bracket-fit .bracket {
  --colw: 108px;
  --cgap: 6px;
  --vgap: 6px;
}

.admin .bracket-fit .bracket .bteam {
  padding: 4px 5px;
  font-size: 12.5px;
  gap: 5px;
}

.admin .bracket-fit .bracket .bteam__name {
  font-size: 12.5px;
}

.admin .bracket-fit .bracket .bcol__label {
  font-size: 7.5px;
  letter-spacing: 0.25px;
}

.admin .is-editable .bnode {
  cursor: pointer;
}