/* ============================================================
   v0.4.15: Pit slot module integration
   Two cosmetic surfaces only - the topbar entry button and the
   /pit page chrome. The slot frame itself ships its own CSS from
   _content/Chronos.Pit.Slot/pit-slot.css, which is loaded
   globally in App.razor.
   ============================================================ */

/* v0.8.3.0: the three gold .pit-topbar-link capsules (Pit / Store / Friends) are gone,
   replaced by the single segmented strip in 31-topnav.css. Their rules are deleted rather
   than left dormant: the chip was #FFD700 text on a gradient whose second stop was also
   gold, legible only thanks to a double black text-shadow under the letters, and the next
   person to reach for a "topbar chip" should not find that waiting for them. Everything in
   the board's top bar that used to be a chip is now a .topnav-seg section. */

/* Pit dedicated page chrome - minimal, the slot itself does the heavy lifting */
.pit-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Belt: nothing on this page may ever widen the document (the machine used
       to leak past narrow viewports and drag a horizontal scrollbar with it). */
    overflow-x: hidden;
    padding: 40px 24px 24px;
    background:
      radial-gradient(circle at 20% 30%, rgba(124, 58, 237, 0.12), transparent 55%),
      radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.07), transparent 55%),
      #0B0816;
}
.pit-page-header {
    width: 100%;
    max-width: 720px;
    text-align: center;
    margin-bottom: 24px;
    position: relative;
}
.pit-back {
    position: absolute;
    left: 0;
    top: 4px;
    color: #A5B4FC;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 0.1em;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: border-color 0.15s ease-out, color 0.15s ease-out;
}
.pit-back:hover { border-color: rgba(124, 58, 237, 0.4); color: #F5F3FF; }
.pit-page-title {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0.35em;
    margin: 0 0 6px 0;
    background: linear-gradient(135deg, #FFD700, #C084FC);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pit-page-sub {
    font-size: 12px;
    letter-spacing: 0.18em;
    color: #A5B4FC;
}
.pit-page-main {
    flex: 1;
    /* Full width of the page: the machine's own max-width:100% resolves against
       THIS box. Without it the container shrink-wrapped to the 720px machine and
       "100%" became a no-op - the frame overflowed phones on both sides. */
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Phone-width chrome: slimmer page padding so the machine gets the pixels. */
@media (max-width: 480px) {
    .pit-page { padding: 20px 10px 16px; }
    .pit-page-header { margin-bottom: 14px; }
    .pit-page-title { font-size: 22px; letter-spacing: 0.22em; }
    .pit-back { position: static; display: inline-block; margin-bottom: 6px; }
}
.pit-page-footer {
    margin-top: 32px;
    max-width: 520px;
    text-align: center;
    color: #6366f1;
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: 0.04em;
}
.pit-page-footer strong { color: #FFD700; letter-spacing: 0.2em; }
.pit-back-link { color: #C084FC; text-decoration: none; }
.pit-back-link:hover { text-decoration: underline; }

/* v0.8.3.0: the phone rules that hid the chip labels and dropped the Store chip moved to
   31-topnav.css along with the elements they governed. Only /pit page chrome is left here. */
@media (max-width: 480px) {
    .pit-page { padding: 20px 12px 16px; }
    .pit-page-header { margin-bottom: 16px; }
    .pit-page-title { font-size: clamp(16px, 6vw, 22px); letter-spacing: 0.2em; }
    .pit-back { font-size: 12px; padding: 5px 8px; }
}