/* Brand-entry's Sanctuary composition, with design values from tokens.css. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-surface-appBackground); color: var(--color-text-primary); font: var(--typography-body-weight) var(--typography-body-sizeSp)/var(--typography-body-lineHeight) Inter, ui-sans-serif, system-ui, sans-serif; }
a { color: var(--color-accent-teal); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: var(--stroke-emphasis) solid var(--color-accent-gold); outline-offset: var(--spacing-xs); }
.site-header, .site-footer { max-width: calc(var(--layout-width) * 2); margin: auto; padding: var(--spacing-xl); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-xl); }
.site-header { border-bottom: var(--stroke-hairline) solid var(--color-surface-border); }
.brand { display: inline-flex; align-items: center; gap: var(--spacing-sm); color: var(--color-text-primary); font: var(--typography-wordmark-weight) var(--typography-wordmark-sizeSp)/var(--typography-wordmark-lineHeight) Georgia, 'Times New Roman', serif; letter-spacing: var(--typography-wordmark-letterSpacing); text-transform: uppercase; }
.brand:hover { text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: calc(var(--spacing-xl) + var(--spacing-sm)); aspect-ratio: 1; flex: none; border-radius: var(--radius-md); background: var(--color-accent-teal); color: var(--color-surface-appBackground); font: var(--typography-sectionHeading-weight) var(--typography-sectionHeading-sizeSp) ui-sans-serif, system-ui, sans-serif; box-shadow: var(--elevation-tealGlow); }
nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-lg); }
nav a { color: var(--color-text-secondary); font-size: var(--typography-microcopy-sizeSp); }
nav a:hover, nav a[aria-current="page"] { color: var(--color-text-primary); text-decoration: none; }
.nav-button { padding: var(--spacing-sm) var(--spacing-lg); border: var(--stroke-hairline) solid var(--color-surface-border); border-radius: var(--radius-pill); }
main { overflow: hidden; }
.hero { position: relative; max-width: calc(var(--layout-width) * 2); margin: auto; padding: calc(var(--spacing-xl) * 3) var(--spacing-xl) var(--spacing-xl); display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr); align-items: center; gap: var(--spacing-xl); }
.hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 75% 50%, var(--color-surface-panelSoft), transparent 55%); pointer-events: none; }
.eyebrow { margin: 0 0 var(--spacing-lg); color: var(--color-accent-teal); font-size: var(--typography-label-sizeSp); font-weight: var(--typography-label-weight); letter-spacing: var(--typography-label-letterSpacing); text-transform: uppercase; }
h1, h2, h3 { margin: 0 0 var(--spacing-lg); font-family: Georgia, 'Times New Roman', serif; line-height: var(--typography-screenTitle-lineHeight); }
h1 { max-width: 12ch; font-size: clamp(var(--typography-screenTitle-sizeSp), 5vw, calc(var(--typography-screenTitle-sizeSp) * 2.5)); letter-spacing: var(--typography-screenTitle-letterSpacing); }
h1 span { color: var(--color-accent-teal); }
.hero-text, .lead { max-width: var(--layout-width); color: var(--color-text-secondary); font-size: calc(var(--typography-body-sizeSp) * 1.2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-md); margin-top: var(--spacing-xl); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); min-height: calc(var(--spacing-xl) * 2); padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-md); font-weight: var(--typography-label-weight); text-align: center; transition: transform var(--motion-micro-duration) var(--motion-micro-curve), background var(--motion-micro-duration) var(--motion-micro-curve); }
.button:hover { text-decoration: none; transform: translateY(calc(-1 * var(--spacing-xs))); }
.button-primary { background: var(--color-accent-teal); color: var(--color-surface-appBackground); box-shadow: var(--elevation-primaryAction); }
.button-secondary { border: var(--stroke-hairline) solid var(--color-surface-border); background: var(--color-surface-panelSoft); color: var(--color-text-primary); }
.hero-art { position: relative; min-height: calc(var(--layout-width) * .65); display: grid; place-items: center; isolation: isolate; }
.sanctuary-ring { position: absolute; width: min(75%, calc(var(--layout-width) * .58)); aspect-ratio: 1; border: var(--stroke-hairline) solid var(--color-surface-border); border-radius: var(--radius-circle); box-shadow: var(--elevation-tealGlow); }
.sanctuary-ring::before { content: ''; position: absolute; inset: var(--spacing-xl); border: var(--stroke-hairline) dashed var(--color-surface-border); border-radius: inherit; }
.hero-creature { display: block; object-fit: contain; filter: drop-shadow(var(--elevation-creature)); }
.hero-creature-main { z-index: 2; width: 52%; height: auto; }
.hero-creature-side { position: absolute; z-index: 1; bottom: 10%; width: 30%; height: auto; }
.hero-creature-left { left: 0; }
.hero-creature-right { right: 0; }
.proof-strip { max-width: calc(var(--layout-width) * 2 - var(--spacing-xl) * 2); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--color-surface-panel); border: var(--stroke-hairline) solid var(--color-surface-border); border-radius: var(--radius-lg); }
.proof { padding: var(--spacing-lg); text-align: center; border-left: var(--stroke-hairline) solid var(--color-surface-border); }
.proof:first-child { border-left: 0; }
.proof strong { display: block; font: var(--typography-numericData-weight) var(--typography-numericData-sizeSp) ui-sans-serif, system-ui, sans-serif; }
.proof span { color: var(--color-text-secondary); font-size: var(--typography-microcopy-sizeSp); }
.section { max-width: calc(var(--layout-width) * 2); margin: auto; padding: calc(var(--spacing-xl) * 3) var(--spacing-xl); }
.section h2, .download-card h2, .contact-card h2 { font-size: calc(var(--typography-sectionHeading-sizeSp) * 1.6); }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-lg); margin-top: var(--spacing-xl); }
.feature-card { padding: var(--spacing-xl); background: var(--color-surface-panel); border: var(--stroke-hairline) solid var(--color-surface-border); border-radius: var(--radius-lg); }
.feature-card p, .principles p, .download-card p, .contact-card p { color: var(--color-text-secondary); }
.feature-icon { display: grid; place-items: center; width: calc(var(--spacing-xl) * 2); aspect-ratio: 1; margin-bottom: var(--spacing-lg); color: var(--color-accent-teal); border: var(--stroke-hairline) solid var(--color-surface-border); border-radius: var(--radius-md); font-size: var(--typography-screenTitle-sizeSp); }
.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--spacing-xl) * 2); border-top: var(--stroke-hairline) solid var(--color-surface-border); }
.principles p { padding-bottom: var(--spacing-lg); border-bottom: var(--stroke-hairline) solid var(--color-surface-border); }
.principles strong { color: var(--color-text-primary); }
.download-card { max-width: calc(var(--layout-width) * 2 - var(--spacing-xl) * 2); margin: 0 auto calc(var(--spacing-xl) * 3); padding: calc(var(--spacing-xl) * 2); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-xl); border: var(--stroke-hairline) solid var(--color-surface-border); border-radius: var(--radius-lg); background: radial-gradient(circle at 85% 50%, var(--color-surface-panelSoft), transparent 65%), var(--color-surface-panel); }
.download-card > div { max-width: var(--layout-width); }
.store-badge { display: inline-block; flex: none; padding: var(--spacing-md) var(--spacing-xl); color: var(--color-accent-teal); border: var(--stroke-hairline) solid var(--color-surface-border); border-radius: var(--radius-md); font-weight: var(--typography-label-weight); text-align: center; }
.store-badge small { color: var(--color-text-secondary); }
.site-footer { border-top: var(--stroke-hairline) solid var(--color-surface-border); color: var(--color-text-muted); font-size: var(--typography-microcopy-sizeSp); }
.site-footer .brand { font-size: var(--typography-sectionHeading-sizeSp); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--spacing-lg); }
.legal-page { max-width: calc(var(--layout-width) + var(--spacing-xl) * 2); margin: auto; padding: calc(var(--spacing-xl) * 3) var(--spacing-xl); }
.legal-page h1 { max-width: none; font-size: calc(var(--typography-screenTitle-sizeSp) * 1.8); }
.legal-page h2 { margin-top: calc(var(--spacing-xl) * 2); font-size: var(--typography-sectionHeading-sizeSp); }
.legal-page h3 { margin-top: var(--spacing-xl); font-size: var(--typography-body-sizeSp); }
.legal-page p, .legal-page li { line-height: 1.8; }
.legal-page li { margin-bottom: var(--spacing-md); }
.muted { color: var(--color-text-muted); }
.contact-card { margin: calc(var(--spacing-xl) * 2) 0; padding: var(--spacing-xl); border: var(--stroke-hairline) solid var(--color-surface-border); border-radius: var(--radius-lg); background: var(--color-surface-panel); }
@media (max-width: 760px) {
  .site-header, .site-footer { padding: var(--spacing-lg); }
  .site-header { align-items: flex-start; flex-wrap: wrap; }
  .site-header .brand { font-size: var(--typography-sectionHeading-sizeSp); }
  nav { gap: var(--spacing-md); }
  .hero { padding: calc(var(--spacing-xl) * 2) var(--spacing-lg) var(--spacing-xl); grid-template-columns: minmax(0, 1fr); }
  .hero-art { min-height: calc(var(--layout-width) * .55); }
  .proof-strip { margin: 0 var(--spacing-lg); }
  .section { padding: calc(var(--spacing-xl) * 2) var(--spacing-lg); }
  .feature-grid, .split-section { grid-template-columns: 1fr; }
  .download-card { margin: 0 var(--spacing-lg) calc(var(--spacing-xl) * 2); padding: var(--spacing-xl); flex-wrap: wrap; }
  .legal-page { padding: calc(var(--spacing-xl) * 2) var(--spacing-lg); }
  .site-footer { flex-wrap: wrap; }
}
@media (max-width: 570px) {
  .site-header nav { width: 100%; justify-content: space-between; }
  .hero-copy, .hero-art { min-width: 0; }
  .hero-text { overflow-wrap: anywhere; }
  .proof-strip { grid-template-columns: 1fr; }
  .proof { border-left: 0; border-top: var(--stroke-hairline) solid var(--color-surface-border); }
  .proof:first-child { border-top: 0; }
}
@media (max-width: 420px) {
  .hero-creature-main { width: 60%; }
  .hero-creature-side { width: 33%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } .button:hover { transform: none; } }
/* C-402 (2): strona linku zaproszenia. */
.invite-page [hidden] { display: none !important; }
.invite-code { margin: 0 0 var(--spacing-lg); font: var(--typography-numericData-weight) calc(var(--typography-numericData-sizeSp) * 1.3) ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: var(--typography-label-letterSpacing); word-spacing: var(--spacing-sm); }
/* C-961 (1): kroki zaproszenia. */
.invite-steps { margin: 0 0 var(--spacing-lg); padding-left: var(--spacing-xl); color: var(--color-text-primary); }
.invite-steps li { margin-bottom: var(--spacing-sm); line-height: 1.6; }
/* C-961 (4): strona dla prasy i twórców. */
.fact-sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--spacing-md) var(--spacing-lg); margin: 0; }
.fact-sheet dt { color: var(--color-text-secondary); font-weight: var(--typography-label-weight); }
.fact-sheet dd { margin: 0; }
.press-assets { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--spacing-lg); margin: var(--spacing-xl) 0; }
.press-asset { margin: 0; padding: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-md); border: var(--stroke-hairline) solid var(--color-surface-border); border-radius: var(--radius-lg); background: var(--color-surface-panel); }
.press-asset img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.press-asset .press-icon { width: min(100%, calc(var(--spacing-xl) * 8)); }
.press-asset figcaption { color: var(--color-text-secondary); font-size: var(--typography-microcopy-sizeSp); }
.press-lang { margin-top: calc(var(--spacing-xl) * 3); padding-top: calc(var(--spacing-xl) * 2); border-top: var(--stroke-hairline) solid var(--color-surface-border); }
.press-lang > h2 { margin-top: 0; font-size: calc(var(--typography-screenTitle-sizeSp) * 1.8); }
.press-lang h3 { margin-top: calc(var(--spacing-xl) * 2); font-size: var(--typography-sectionHeading-sizeSp); }
/* Ekrany gry na stronie głównej i w materiałach prasowych (zrzuty karty sklepu, C-836 (5)). */
.screen-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--spacing-lg); margin: var(--spacing-xl) 0 0; padding: 0; list-style: none; }
.screen-grid li { margin: 0; }
.screen-grid a { display: block; border-radius: var(--radius-lg); }
.screen-grid img { display: block; width: 100%; height: auto; border: var(--stroke-hairline) solid var(--color-surface-border); border-radius: var(--radius-lg); background: var(--color-surface-panel); }
.legal-page .screen-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .screen-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 570px) {
  .screen-grid, .legal-page .screen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); }
  .fact-sheet { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xs); }
  .fact-sheet dd { margin-bottom: var(--spacing-md); }
  .press-assets { grid-template-columns: minmax(0, 1fr); }
}