panels.css

.card,
.tool-card,
.game-card,
.panel,
.tool-column,
.tool-center-panel,
.control-card,
.entry-card,
.check-panel,
.image-panel,
.hero-art,
.game-tile,
.side-menu,
.release-intro,
.release-stat,
.release-stage,
.version-item,
.timeline-placeholder,
.mini-stat {
  border: var(--border-standard);
  background: var(--card-background);
  overflow: hidden;
  box-shadow: var(--shadow-md)
}

.card,
.tool-card,
.game-card,
.panel,
.tool-column,
.tool-center-panel,
.control-card,
.side-menu {
  border-radius: var(--space-18)
}

.card-body {
  padding: var(--space-18)
}

.card--fill {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  width: 100%
}

.card-body--fill {
  flex: 1 1 auto;
  min-height: 100%;
  width: 100%
}

.tool-workspace article.card>.card-body.content-stack {
  margin: var(--space-8)
}

.surface {
  border: var(--border-standard);
  border-radius: var(--radius-lg);
  background: var(--card-background);
  box-shadow: var(--shadow-md);
  overflow: hidden
}

.surface-header,
.surface-body,
.surface-footer,
.card-header,
.card-footer {
  padding: var(--space-18)
}

.surface-header,
.card-header {
  border-bottom: var(--border-standard)
}

.surface-footer,
.card-footer {
  border-top: var(--border-standard)
}

.surface-body {
  display: grid;
  gap: var(--space-12)
}

.card-media {
  display: grid;
  place-items: center;
  background: var(--panel-overlay);
  overflow: visible
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.card-media-link {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  border-radius: inherit
}

.control-card:has(.card-media-link) {
  overflow: visible
}

.card-media-link img {
  transition: transform var(--transition-duration-fast) ease
}

.card-media-link:hover img,
.card-media-link:focus-visible img {
  transform: scale(1.04) rotate(2deg)
}

.card img {
  width: 100%;
  display: block
}

.feature-image {
  width: 100%;
  display: block
}

.tool-column {
  border-radius: var(--radius-xl)
}

.tool-column[class*="tool-group-"] {
  border-color: var(--tool-group-accent)
}

.tool-column.is-collapsed {
  overflow: hidden
}

.tool-column.is-collapsed .accordion-stack {
  display: none
}

.tool-column-header {
  padding: var(--space-8) var(--space-18);
  border-bottom: var(--border-standard);
  background: var(--orange-soft);
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: var(--space-12)
}

.tool-column[class*="tool-group-"] .tool-column-header {
  border-bottom-color: var(--tool-group-accent);
  background: color-mix(in srgb, var(--tool-group-color) 16%, var(--panel))
}

.tool-column-header h2,
.tool-column-header h3 {
  margin: var(--space-0);
  color: var(--gold);
  font-size: var(--font-size-base);
  letter-spacing: var(--letter-spacing-kicker);
  text-transform: uppercase;
  order: 1
}

.tool-column[class*="tool-group-"] .tool-column-header h2,
.tool-column[class*="tool-group-"] .tool-column-header h3 {
  color: var(--tool-group-color)
}

.tool-column[class*="tool-group-"] hr {
  border-color: var(--tool-group-accent)
}

.tool-column .accordion-stack {
  padding: var(--space-8) var(--space-12);
  gap: var(--space-8)
}

.tool-column details.vertical-accordion summary {
  padding: var(--space-10) var(--space-12)
}

.tool-column[class*="tool-group-"] details.vertical-accordion {
  border-color: color-mix(in srgb, var(--tool-group-accent) 64%, var(--line))
}

.tool-column[class*="tool-group-"] details.vertical-accordion summary {
  color: var(--tool-group-color)
}

.tool-column .accordion-body {
  padding: var(--space-0) var(--space-12) var(--space-10)
}

.tool-column-header .horizontal-accordion-toggle {
  order: 2
}

.tool-column[class*="tool-group-"] .horizontal-accordion-toggle,
.tool-column[class*="tool-group-"] details.vertical-accordion .vertical-accordion__chevron {
  --accordion-button-border: var(--tool-group-accent);
  --accordion-button-color: var(--tool-group-color)
}

.tool-column.is-collapsed .tool-column-header {
  height: 100%;
  min-height: var(--tool-column-collapsed-min-height);
  padding: var(--space-12) var(--space-8);
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start
}

.tool-column.is-collapsed .horizontal-accordion-toggle {
  margin: var(--space-0);
  order: 1;
  writing-mode: horizontal-tb
}

.tool-column.is-collapsed .tool-column-header h2,
.tool-column.is-collapsed .tool-column-header h3 {
  order: 2;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-align: center
}

.tool-center-panel {
  padding: var(--space-22);
  text-align: center;
  border-radius: var(--radius-xl)
}

.tool-center-panel img {
  width: min(var(--tool-center-image-max), 75%);
  height: auto;
  object-fit: contain;
  display: block;
  margin: var(--space-4) auto var(--space-18)
}

.tool-center-panel p {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--tool-center-copy-max)
}

body.tool-focus-mode .tool-center-panel:has(>details.vertical-accordion)>img {
  width: auto;
  max-width: min(var(--tool-center-image-max), 75%);
  max-height: var(--space-78);
  margin: var(--space-0) auto var(--space-10)
}

body.tool-focus-mode .tool-center-panel:has(>details.vertical-accordion)>p {
  margin-block: var(--space-0) var(--space-10)
}

.tool-display-mode {
  margin: var(--space-0) var(--space-0) var(--space-12);
  position: relative;
  border: var(--border-standard);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  overflow: hidden
}

.tool-display-mode summary {
  color: var(--gold);
  font-weight: var(--font-weight-heavy);
  cursor: pointer;
  list-style: none;
  padding: var(--space-10);
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-8) var(--space-10);
  min-width: var(--space-0);
  width: 100%
}

.tool-display-mode summary::-webkit-details-marker {
  display: none
}

.tool-display-mode__mode-icon {
  color: var(--gold);
  flex: 0 0 auto;
  height: calc(var(--icon-size-sm) * 2.6);
  margin-left: auto;
  width: calc(var(--icon-size-sm) * 2.6)
}

.tool-display-mode__badge {
  flex: 0 0 auto;
  width: 128px;
  height: 128px;
  object-fit: contain;
  object-position: center;
  border: 0;
  border-radius: var(--space-0);
  background: transparent
}

.tool-display-mode__character {
  width: min(224px, 100%);
  height: auto;
  object-fit: contain;
  display: block;
  flex: 0 0 min(224px, 100%);
  min-width: min(144px, 100%)
}

.tool-display-mode__fullscreen-name {
  display: inline-flex;
  flex: 1 1 4rem;
  min-width: var(--space-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

body.tool-focus-mode .tool-display-mode {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-lg)
}

body.tool-focus-mode .tool-display-mode__badge {
  width: 64px;
  height: 64px
}

body.tool-focus-mode .tool-display-mode__character {
  display: none
}

body.tool-focus-mode .tool-display-mode__fullscreen-name {
  justify-content: center;
  text-align: center
}

.side-menu a {
  display: block;
  padding: var(--space-11) var(--space-12);
  border-radius: var(--radius-md);
  color: var(--muted)
}

.side-menu a.active {
  background: var(--orange-soft-strong);
  color: var(--gold)
}

.callout {
  border: var(--border-standard);
  background: var(--orange-soft);
  border-radius: var(--space-18);
  padding: var(--space-18)
}

.mini-stat {
  padding: var(--space-18);
  background: var(--panel-soft);
  font-size: var(--font-size-sm);
  line-height: 1.35
}

.mini-stat strong {
  display: block;
  font-size: var(--font-size-xl);
  line-height: 1.15;
  overflow-wrap: anywhere;
  color: var(--gold)
}

.mini-stat--inline {
  align-items: center;
  display: inline-flex;
  gap: var(--space-8);
  justify-content: flex-start;
  white-space: nowrap
}

.mini-stat--inline strong {
  display: inline
}

.tool-stat-divider {
  border-top: var(--border-standard);
  grid-column: 1 / -1;
  min-height: var(--space-0)
}

.tool-column[class*="tool-group-"] .tool-stat-divider {
  border-top-color: var(--tool-group-accent)
}

.brand-color-code {
  align-items: center;
  display: flex;
  gap: var(--space-8)
}

.brand-color-code strong {
  display: inline
}

.brand-color-swatch {
  border: var(--border-standard);
  border-color: var(--swatch-border);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
  display: inline-block;
  flex: 0 0 auto;
  height: var(--icon-size-sm);
  width: var(--icon-size-sm)
}

.tool-tree--compact,
.tool-tree--compact ul {
  margin-top: var(--space-8)
}

.tool-tree--compact ul {
  padding-left: var(--space-14)
}

.tool-tree--compact li {
  line-height: var(--line-height-md);
  margin-top: var(--space-6)
}

.tool-tree-row {
  align-items: center;
  display: flex;
  gap: var(--space-8);
  width: 100%
}

.tool-tree-row__content {
  flex: 1 1 auto;
  justify-content: flex-start;
  min-width: var(--space-0);
  overflow-wrap: anywhere;
  text-align: left;
  white-space: normal
}

.tool-tree-row--single-line .tool-tree-row__content {
  flex: 0 1 90%;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.tool-tree-row__action {
  flex: 0 0 32px;
  margin-left: auto
}

.tool-icon-32 {
  height: 32px;
  object-fit: contain;
  width: 32px
}

.tool-icon-32.tool-tree-row__action {
  height: 32px;
  margin: var(--space-0) var(--space-0) var(--space-0) auto;
  width: 32px
}

.tool-icon-button {
  height: 32px;
  min-width: 32px;
  padding: var(--space-0);
  width: 32px
}

.tool-guidance-block {
  width: 100%;
  overflow-wrap: anywhere
}

.mascot-role {
  color: var(--text);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-strong);
  margin: var(--space-4) var(--space-0) var(--space-10)
}

.forgebot-stage {
  min-height: var(--size-forgebot-stage-min);
  border: var(--border-standard);
  border-color: var(--forgebot-stage-border);
  border-radius: var(--space-28);
  background: var(--forgebot-stage-background);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: var(--shadow)
}

.forgebot-stage img {
  width: min(92%, var(--size-forgebot-image-max));
  height: auto;
  filter: drop-shadow(var(--shadow-xl))
}

.control-card {
  --accent: var(--orange);
  border-left: var(--size-control-accent-width) solid var(--accent);
  padding: var(--space-18)
}

.about-hero {
  min-height: var(--size-about-hero-min);
  display: flex;
  align-items: end;
  padding: var(--space-78) var(--space-0) var(--space-54);
  border-bottom: var(--border-standard);
  background: var(--about-hero-background)
}

.about-hero__content {
  max-width: var(--measure-lg)
}

.about-hero h1 {
  max-width: var(--measure-about-title);
  margin-bottom: var(--space-18)
}

.hero-art {
  padding: var(--space-12);
  display: flex;
  align-items: center;
  justify-content: center
}

.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: var(--radius-xl)
}

.entry-card {
  padding: var(--space-18);
  display: grid;
  gap: var(--space-6)
}

.entry-card span {
  font-size: var(--font-size-4xl)
}

.entry-card strong {
  font-size: var(--font-size-xl)
}

.entry-card small {
  color: var(--muted)
}

.game-art {
  aspect-ratio: var(--game-art-aspect);
  display: grid;
  place-items: center;
  background: var(--game-art-background)
}

.game-art img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.game-meta {
  padding: var(--space-15)
}

.game-meta strong {
  display: block;
  font-size: var(--font-size-lg)
}

.game-meta span {
  display: block;
  color: var(--muted);
  font-size: var(--font-size-sm);
  margin-top: var(--space-3)
}

.game-meta em {
  display: block;
  color: var(--gold);
  font-style: normal;
  font-size: var(--font-size-xs);
  margin-top: var(--space-8)
}

.check-panel {
  padding: var(--space-24);
  display: grid;
  grid-template-columns: var(--two-columns);
  gap: var(--space-14)
}

.check-panel div {
  border: var(--border-standard);
  border-radius: var(--radius-lg);
  padding: var(--space-14);
  background: var(--panel-overlay);
  font-weight: var(--font-weight-semibold)
}

.image-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.cta {
  text-align: center;
  padding: var(--space-52);
  border-radius: var(--radius-2xl);
  border: var(--border-standard);
  background: var(--cta-background);
  box-shadow: var(--shadow)
}

.release-intro,
.timeline-placeholder {
  padding: var(--space-24)
}

.release-intro h2,
.timeline-placeholder h2 {
  margin-top: var(--space-0)
}

.release-stat,
.release-stage {
  padding: var(--space-16)
}

.release-stage {
  display: grid;
  gap: var(--space-8);
  min-height: var(--size-release-stage-min)
}

.release-stat span,
.version-item span,
.release-stage span {
  color: var(--muted);
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase
}

.release-stat strong {
  color: var(--text);
  display: block;
  font-size: var(--font-size-release-stat);
  margin-top: var(--space-6)
}

.release-stage strong {
  color: var(--text);
  font-size: var(--font-size-xl)
}

.release-stage.is-current {
  border-color: var(--gold);
  background: var(--release-current-background);
  box-shadow: var(--shadow)
}

.release-stage.is-current strong,
.release-stage.is-current span {
  color: var(--gold)
}

.version-item {
  padding: var(--space-14) var(--space-16)
}

.version-item strong {
  color: var(--text);
  display: block;
  font-size: var(--font-size-lg);
  margin-top: var(--space-4)
}

.version-item span {
  text-transform: none
}

.version-item.is-current {
  border-color: var(--gold);
  background: var(--orange-soft)
}

.version-item.is-planned {
  background: var(--panel-overlay-strong)
}

.timeline-placeholder {
  display: grid;
  gap: var(--space-10);
  background: var(--panel-overlay);
  box-shadow: var(--shadow-sm)
}

@media(max-width:620px) {
  .about-hero {
    min-height: var(--size-about-hero-mobile-min);
    background: var(--about-hero-mobile-background)
  }

  .cta {
    padding: var(--space-30) var(--space-20)
  }
}