/* TourneyCore panel - motion, waiting states, explanations, start-up animation (author: MADMA)
   Loaded after styles.css. Everything here switches off with the OS setting "reduce motion" (rule in styles.css). */
:root { --ease-out: cubic-bezier(.2, .75, .2, 1); --ease-spring: cubic-bezier(.34, 1.4, .5, 1); }

/* ---------- explanations behind a small (i) */
.info-btn {
  width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--steel-600); background: transparent; color: var(--bone-faint);
  font: italic 700 12px/1 Georgia, serif; display: inline-grid; place-items: center; cursor: pointer; padding: 0; vertical-align: middle;
  transition: color .15s, border-color .15s, background .15s, transform .15s var(--ease-spring);
}
.info-btn:hover { color: var(--accent-text); border-color: var(--accent-text); transform: scale(1.08); }
.info-btn.on { background: var(--hazard); border-color: var(--accent-text); color: var(--hazard-ink); }
.page > h1 .info-btn { margin-left: 12px; position: relative; top: -6px; }
.info-text {
  flex-basis: 100%; color: var(--bone-dim); font-size: 13.5px; max-width: 72ch; padding: 8px 12px; border-left: 2px solid var(--hazard);
  background: rgba(242,194,48,.04); border-radius: 0 6px 6px 0; animation: info-in .22s var(--ease-out);
}
.info-text.lede-text { margin: 4px 0 18px; }
@keyframes info-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- page opening: the page and its blocks glide in one after the other (only when the page changes) */
.page.enter { animation: page-in .38s var(--ease-out) both; }
.page.enter > *, .page.enter > .tab-body > *, .page.enter .cols > .stack > * { animation: rise .45s var(--ease-out) both; }
.page.enter > :nth-child(2), .page.enter > .tab-body > :nth-child(1) { animation-delay: .04s; }
.page.enter > :nth-child(3), .page.enter > .tab-body > :nth-child(2) { animation-delay: .08s; }
.page.enter > :nth-child(4), .page.enter > .tab-body > :nth-child(3) { animation-delay: .12s; }
.page.enter > :nth-child(5), .page.enter > .tab-body > :nth-child(4) { animation-delay: .16s; }
.page.enter > :nth-child(n+6), .page.enter > .tab-body > :nth-child(n+5) { animation-delay: .2s; }
@keyframes page-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* ---------- loading placeholders instead of a spinner */
.page-loading { display: grid; gap: 14px; padding: 8px 0 28px; }
.sk {
  height: 16px; border-radius: 6px; background: linear-gradient(90deg, var(--steel-800) 0%, var(--steel-700) 40%, var(--steel-800) 80%) 0 0 / 300% 100%;
  animation: shimmer 1.3s linear infinite;
}
.sk-wide { height: 26px; width: 42%; }
.sk-short { width: 55%; }
.sk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sk-tile { height: 74px; border-radius: var(--radius-m); }
@keyframes shimmer { to { background-position: -150% 0; } }

/* ---------- buttons and navigation: quicker feedback */
.btn { transition: background .15s, border-color .15s, color .15s, box-shadow .2s, transform .12s var(--ease-spring); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.btn.primary:hover:not(:disabled) { box-shadow: 0 0 0 3px rgba(242,194,48,.14), 0 6px 18px -8px rgba(242,194,48,.55); }
.btn.busy { color: transparent !important; }
.btn.busy::after { position: absolute; inset: 0; margin: auto; color: var(--bone); }
.btn.primary.busy::after { color: var(--hazard-ink); }
.nav a { transition: background .18s, color .18s, box-shadow .25s var(--ease-out), padding-left .2s var(--ease-out); }
.nav a:hover { padding-left: 14px; }
.tabs a { transition: color .15s, border-color .25s var(--ease-out); }
.panel, .table-wrap, .kpis { transition: border-color .2s, box-shadow .25s; }
.panel:hover { border-color: var(--steel-600); }
tr td { transition: background .12s; }
#busybar { background: linear-gradient(90deg, transparent, var(--hazard) 30%, #ffe08a 50%, var(--hazard) 70%, transparent); }

/* ---------- toasts and dialogs */
.toast { animation: toast-slide .32s var(--ease-spring); cursor: pointer; }
.toast.out { animation: toast-away .24s var(--ease-out) forwards; }
@keyframes toast-slide { from { opacity: 0; transform: translateX(24px) scale(.97); } }
@keyframes toast-away { to { opacity: 0; transform: translateX(24px); } }
.modal-back { animation: fade-in .18s ease-out; }
.modal-back .modal { animation: pop .26s var(--ease-spring); }
.modal-back.out { animation: fade-out .18s ease-in forwards; }
.modal-back.out .modal { animation: pop-out .18s ease-in forwards; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes pop-out { to { opacity: 0; transform: translateY(6px) scale(.97); } }

/* ---------- waiting for the game server (with cancel) */
.pending-card {
  padding: 12px 14px 10px; border-left-width: 0; overflow: hidden; animation: card-in .3s var(--ease-spring);
  box-shadow: inset 4px 0 0 var(--hazard), 0 14px 34px -10px rgba(0,0,0,.6);
}
.pending-card.offline { box-shadow: inset 4px 0 0 var(--danger), 0 14px 34px -10px rgba(0,0,0,.6); }
.pending-card.offline .pc-head { color: var(--danger); }
.pending-card.out { animation: card-out .22s ease-in forwards; }
@keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes card-out { to { opacity: 0; transform: translateY(10px); } }
.pending-card .pc-head { margin-bottom: 8px; }
.pc-count {
  margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: rgba(242,194,48,.16); color: var(--accent-text);
  font: 700 12px/20px var(--font-body); text-align: center;
}
.pc-bar {
  height: 3px; border-radius: 2px; margin: 0 0 8px; opacity: .85;
  background: repeating-linear-gradient(-45deg, var(--hazard) 0 8px, rgba(242,194,48,.25) 8px 16px) 0 0 / 22.6px 100%;
  animation: stripes .6s linear infinite;
}
.pending-card.offline .pc-bar { background: var(--steel-600); animation: none; }
@keyframes stripes { to { background-position: 22.6px 0; } }
.pending-card li { align-items: center; padding: 4px 0; border-top: 1px solid rgba(var(--lift),.04); animation: rise .25s var(--ease-out); }
.pending-card li:first-child { border-top: 0; }
.pending-card li.leaving { opacity: .45; }
.pc-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-x {
  width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--bone-faint);
  font: 600 16px/1 var(--font-body); cursor: pointer; display: grid; place-items: center; padding: 0;
  transition: background .15s, color .15s, transform .15s var(--ease-spring);
}
button.pc-x:hover:not(:disabled) { background: rgba(224,83,61,.18); color: var(--danger); transform: rotate(90deg); }
.pc-x.ghost { cursor: default; font-size: 11px; color: var(--accent-text); }

/* ---------- start-up after signing in: blast doors with the logo, then they open onto the panel */
.boot-intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; cursor: pointer; overflow: hidden; }
.boot-intro .door {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background: linear-gradient(180deg, rgba(var(--lift),.035), transparent 30%), repeating-linear-gradient(0deg, transparent 0 46px, rgba(0,0,0,.18) 46px 48px), var(--steel-900);
  transition: transform .75s cubic-bezier(.7, 0, .2, 1);
}
.boot-intro .door.l { left: 0; }
.boot-intro .door.r { right: 0; }
.boot-intro .door::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 14px;
  background: repeating-linear-gradient(-45deg, var(--hazard) 0 12px, var(--hazard-ink) 12px 24px);
}
.boot-intro .door.l::after { right: 0; }
.boot-intro .door.r::after { left: 0; }
.boot-intro .bi-core {
  position: relative; text-align: center; padding: 30px 40px 26px; min-width: 330px; border-radius: 12px;
  background: var(--plate); border: 1px solid var(--steel-600); border-top: 3px solid var(--hazard);
  box-shadow: var(--plate-edge), 0 0 0 10px rgba(var(--well),.85), 0 30px 80px -10px rgba(0,0,0,.8);
  animation: pop .45s var(--ease-spring) both; transition: opacity .25s, transform .35s var(--ease-out);
}
.bi-logo { font: 700 72px/1 var(--font-display); letter-spacing: .01em; }
.bi-logo span { display: inline-block; animation: letter .55s var(--ease-spring) both; animation-delay: calc(var(--i) * 45ms + 80ms); }
.bi-logo .dot { color: var(--accent-text); }
@keyframes letter { from { opacity: 0; transform: translateY(26px) rotate(-6deg); filter: blur(4px); } }
.bi-sub { color: var(--bone-dim); margin-top: 8px; font-size: 15px; animation: rise .5s var(--ease-out) .45s both; }
.bi-bar { height: 4px; margin: 22px auto 16px; width: 240px; border-radius: 2px; background: var(--steel-700); overflow: hidden; animation: rise .4s var(--ease-out) .5s both; }
.bi-bar i {
  display: block; height: 100%; width: 8%; background: linear-gradient(90deg, var(--hazard-deep), var(--hazard)); box-shadow: 0 0 12px var(--hazard);
  transition: width .45s var(--ease-out);
}
.bi-steps { list-style: none; padding: 0; margin: 0 auto; width: max-content; text-align: left; font-size: 13.5px; color: var(--bone-faint); }
.bi-steps li { display: flex; align-items: center; gap: 9px; padding: 2px 0; animation: rise .4s var(--ease-out) both; transition: color .2s; }
.bi-steps li:nth-child(1) { animation-delay: .55s; }
.bi-steps li:nth-child(2) { animation-delay: .65s; }
.bi-steps li:nth-child(3) { animation-delay: .75s; }
.bi-dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--steel-500); transition: background .2s, border-color .2s, box-shadow .2s; }
.bi-steps li.done { color: var(--bone); }
.bi-steps li.done .bi-dot { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 8px rgba(111,191,115,.6); }
.boot-intro.open { pointer-events: none; }
.boot-intro.open .bi-core { opacity: 0; transform: scale(1.08); }
.boot-intro.open .door.l { transform: translateX(-102%); transition-delay: .15s; }
.boot-intro.open .door.r { transform: translateX(102%); transition-delay: .15s; }
@media (max-width: 560px) { .bi-logo { font-size: 52px; } .bi-bar { width: 200px; } .sk-row { grid-template-columns: 1fr 1fr; } }

/* panel owner: host view */
.console-out.plog { border-radius: var(--radius-m); height: calc(100vh - 290px); }
.console-out.plog .cl { grid-template-columns: 150px 44px 1fr; }
.who .devmode { margin-top: 8px; }
.hcharts.two { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }

/* F-112: an explosion on the live map pulses for a few seconds */
@keyframes boom-pulse { from { r: 6px; opacity: .9; } to { r: 22px; opacity: 0; } }
.boom-pulse { animation: boom-pulse 1.2s ease-out 3; fill: none; stroke: #f59e0b; stroke-width: 2.5; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .boom-pulse { animation: none; } }