/* ===========================================================================
   Daily Junction Arcade — editorial portal polish (2026-07-16)

   Presentation-only layer loaded after the shared vendored chassis and the
   canonical Arcade component sheet. It keeps every game, category, loyalty,
   player, favourite, advert, consent and interaction contract intact while
   giving the host a denser MSN-style information hierarchy.
   ========================================================================== */

:root {
  --font-body: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
}

body {
  background-color: #f1f3f6;
  background-image: none;
  font-family: var(--font-body);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

/* Compact publication chrome. */
.arc-header {
  border-top-width: 3px;
  background: var(--color-base-100);
  backdrop-filter: none;
  box-shadow: 0 1px 4px rgba(20, 32, 54, 0.07);
}

.arc-header-row {
  gap: 0.65rem;
  padding-block: 0.45rem;
}

.arc-brand {
  gap: 0.5rem;
}

.arc-brand-name {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.arc-nav {
  gap: 0.15rem;
  margin-left: 0.3rem;
}

.arc-nav-link {
  padding: 0.42rem 0.62rem;
  border: 1px solid transparent;
  border-radius: 0.22rem;
  color: color-mix(in srgb, var(--color-base-content) 82%, transparent);
  font-size: 0.84rem;
  font-weight: 650;
}

.arc-nav-link:hover {
  border-color: var(--color-base-300);
  background: var(--color-base-200);
}

.arc-nav-link.is-active {
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-base-300));
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-base-100));
  color: var(--color-primary);
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

.arc-nav-menu {
  border-radius: 0.35rem;
  box-shadow: 0 8px 22px rgba(20, 32, 54, 0.13);
}

.arc-nav-menu a,
.arc-mobile-nav > a {
  border-radius: 0.22rem;
}

.arc-header-search-input,
.arc-icon-btn,
.arc-player-chip,
.arc-header [class~="btn"] {
  border-radius: 0.25rem;
}

.arc-header-search-input {
  background: var(--color-base-100);
}

.arc-mobile-nav {
  padding-block: 0.55rem 0.8rem;
}

/* Calm title bands and category controls. */
.arc-home-hero {
  padding: 1rem 1.15rem;
  border-color: var(--color-base-300);
  border-top: 3px solid var(--color-primary);
  border-radius: 0.4rem;
  background: var(--color-base-100);
  box-shadow: none;
}

.arc-h1 {
  font-size: clamp(1.65rem, 3vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.arc-home-count,
.arc-shelf-sub {
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
}

.arc-home-search {
  margin-top: 0.7rem;
}

.arc-search,
.arc-input {
  border-width: 1px;
  border-radius: 0.25rem;
  background: var(--color-base-100);
}

.arc-home-search .arc-search-submit {
  border-radius: 0.25rem 0 0 0.25rem;
}

.arc-home-chips {
  gap: 0.28rem;
  margin-top: 0.55rem;
}

.arc-chip,
.arc-home-chips .arc-chip {
  gap: 0.3rem;
  padding: 0.32rem 0.56rem;
  border-width: 1px;
  border-radius: 0.22rem;
  background: var(--color-base-100);
  color: color-mix(in srgb, var(--color-base-content) 78%, transparent);
  font-size: 0.75rem;
  font-weight: 650;
  box-shadow: none;
}

.arc-home-chips .arc-chip:hover {
  transform: none;
}

.arc-chip.is-active,
.arc-home-chips .arc-chip.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-content);
}

.arc-chip-count {
  min-width: 1.15rem;
  height: 1.15rem;
  padding-inline: 0.25rem;
  font-size: 0.64rem;
  line-height: 1.15rem;
}

.arc-random-btn,
main [class~="btn"] {
  border-radius: 0.25rem;
}

/* Editorial shelves: one keyline and one elevation level. */
.arc-panel {
  padding: 0.9rem;
  border-radius: 0.35rem;
  box-shadow: none;
}

.arc-shelf-title {
  padding-left: 0.55rem;
  border-left-width: 3px;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.arc-shelf-head {
  gap: 0.55rem;
}

.arc-rail,
.arc-grid {
  gap: 0.75rem;
}

.arc-card {
  border-color: var(--color-base-300);
  border-radius: 0.35rem;
  box-shadow: none;
  transition: border-color 0.15s ease;
}

.arc-card:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-base-300));
  box-shadow: none;
}

.arc-card:hover .arc-thumb img {
  transform: none;
}

.arc-card-body {
  padding: 0.58rem 0.68rem 0.7rem;
}

.arc-card-body h3 {
  font-weight: 700;
}

.arc-housead,
.arc-game-player-panel,
.arc-comment {
  border-radius: 0.35rem;
}

.arc-card--quiz .arc-thumb--quiz {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-base-200));
}

/* Rankings, stats and profile modules read as data rather than toy tiles. */
.arc-lb-strip {
  gap: 0;
}

.arc-lb-strip li,
.arc-lb-full li,
.arc-inbox-item {
  border-bottom: 1px solid var(--color-base-300);
  border-radius: 0;
  background: transparent;
}

.arc-lb-strip li:last-child,
.arc-lb-full li:last-child,
.arc-inbox-item:last-child {
  border-bottom: 0;
}

.arc-lb-me,
.arc-podium-slot,
.arc-stat,
.arc-badge,
.arc-game-player-panel {
  border-radius: 0.35rem;
  box-shadow: none;
}

.arc-podium-1 {
  box-shadow: inset 0 3px 0 #f5c518;
}

.arc-stat,
.arc-badge {
  background: var(--color-base-100);
}

.arc-badge.is-earned {
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-base-100));
}

/* Game and quiz reading surfaces. */
.arc-player,
.arc-game-icon {
  border-radius: 0.35rem;
}

.arc-play-stat {
  padding: 0.65rem 0.72rem;
  border-radius: 0.25rem;
  background: var(--color-base-100);
}

.arc-play-stat span {
  color: color-mix(in srgb, var(--color-base-content) 76%, transparent);
}

.arc-game-desc,
.arc-provider,
.arc-comment-body,
.arc-comment-date,
.arc-comment-report {
  color: color-mix(in srgb, var(--color-base-content) 74%, transparent);
}

.arc-modal-panel {
  border-radius: 0.45rem;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.24);
}

.arc-modal-title {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.arc-level-ring,
.arc-level-ring-bar {
  border-radius: 0.25rem;
}

/* Restrained footer. */
.arc-footer {
  margin-top: 2rem;
  background: #edf0f4;
}

.arc-footer-inner {
  padding-block: 2rem;
}

.arc-footer-title,
.arc-footer-col-title {
  font-weight: 650;
  letter-spacing: -0.01em;
}

@media (max-width: 767px) {
  .arc-home-hero {
    padding: 0.9rem;
  }

  .arc-panel {
    padding: 0.78rem;
  }

  .arc-home-chips {
    padding-bottom: 0.35rem;
  }

  .arc-grid {
    gap: 0.65rem;
  }
}