:root { --font-display: "Gill Sans", "Gill Sans MT", "Trebuchet MS", sans-serif; --font-body: "Trebuchet MS", "Lucida Sans Unicode", sans-serif; --page-width: 1160px; --radius-xl: 32px; --radius-lg: 24px; --radius-md: 18px; --radius-pill: 999px; --shadow-deep: 0 24px 60px rgba(0, 0, 0, 0.24); --transition-fast: 160ms ease; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; font-family: var(--font-body); line-height: 1.6; letter-spacing: 0.01em; color: var(--ink); background: var(--page-bg); }
body::before, body::after { content: ""; position: fixed; border-radius: 999px; pointer-events: none; z-index: 0; filter: blur(18px); }
body::before { width: 30rem; height: 30rem; top: -7rem; right: -8rem; background: var(--glow-a); }
body::after { width: 24rem; height: 24rem; bottom: -7rem; left: -6rem; background: var(--glow-b); }
.theme-studio { --ink: #193531; --muted: rgba(25, 53, 49, 0.84); --line: rgba(58, 108, 104, 0.18); --divider: rgba(58, 108, 104, 0.18); --glow-a: rgba(79, 156, 149, 0.16); --glow-b: rgba(93, 121, 164, 0.1); --page-bg: radial-gradient(circle at 8% 12%, rgba(79, 156, 149, 0.12), transparent 22rem), radial-gradient(circle at 94% 6%, rgba(122, 149, 196, 0.12), transparent 20rem), radial-gradient(circle at 50% 108%, rgba(212, 181, 119, 0.16), transparent 26rem), linear-gradient(180deg, #e4d3b3 0%, #d5bf99 52%, #c7ae84 100%); --header-surface: linear-gradient(145deg, rgba(246, 239, 223, 0.95), rgba(232, 219, 194, 0.93)); --hero-surface: radial-gradient(circle at top right, rgba(79, 156, 149, 0.12), transparent 18rem), linear-gradient(145deg, rgba(243, 234, 214, 0.96), rgba(227, 212, 187, 0.93)); --featured-surface: radial-gradient(circle at top left, rgba(79, 156, 149, 0.08), transparent 16rem), linear-gradient(145deg, rgba(239, 230, 211, 0.96), rgba(223, 205, 179, 0.93)); --visual-surface: radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.18), transparent 8rem), radial-gradient(circle at 75% 18%, rgba(200, 190, 120, 0.16), transparent 10rem), radial-gradient(circle at 50% 88%, rgba(52, 167, 154, 0.14), transparent 10rem), linear-gradient(180deg, rgba(188, 211, 204, 0.95), rgba(224, 217, 190, 0.93) 52%, rgba(160, 191, 176, 0.94)); --team-surface: radial-gradient(circle at top right, rgba(79, 156, 149, 0.08), transparent 16rem), linear-gradient(145deg, rgba(239, 232, 218, 0.96), rgba(223, 208, 184, 0.93)); --panel-surface: linear-gradient(145deg, rgba(244, 236, 220, 0.95), rgba(226, 211, 187, 0.92)); --chip-surface: linear-gradient(145deg, rgba(248, 242, 232, 0.92), rgba(231, 220, 201, 0.96)); --chip-border: rgba(46, 107, 103, 0.18); --button-primary-bg: linear-gradient(135deg, #287f78, #5ea7a0); --button-primary-ink: #f7fbf9; --button-secondary-bg: rgba(255, 251, 245, 0.56); --button-secondary-border: rgba(40, 127, 120, 0.24); --button-secondary-ink: #1c4541; --eyebrow: #2c7972; --accent-1: #2f8f85; --accent-2: #8da972; --team-card-1: radial-gradient(circle at top right, rgba(92, 155, 164, 0.16), transparent 13rem), linear-gradient(145deg, rgba(231, 239, 237, 0.98), rgba(205, 217, 213, 0.95)); --team-card-2: radial-gradient(circle at top right, rgba(108, 160, 123, 0.14), transparent 13rem), linear-gradient(145deg, rgba(235, 241, 233, 0.98), rgba(213, 223, 209, 0.95)); --team-card-3: radial-gradient(circle at top right, rgba(185, 165, 132, 0.12), transparent 13rem), linear-gradient(145deg, rgba(239, 234, 226, 0.98), rgba(219, 210, 198, 0.95)); --surface-shadow: 0 18px 45px rgba(105, 78, 40, 0.14); }
.theme-game { --ink: #f3f8fd; --muted: rgba(243, 248, 253, 0.78); --line: rgba(132, 206, 252, 0.18); --divider: rgba(132, 206, 252, 0.18); --glow-a: rgba(88, 183, 255, 0.18); --glow-b: rgba(255, 214, 107, 0.12); --page-bg: radial-gradient(circle at top right, rgba(53, 161, 255, 0.2), transparent 30rem), radial-gradient(circle at 14% 18%, rgba(255, 214, 95, 0.12), transparent 24rem), linear-gradient(180deg, #09233d 0%, #081a2d 58%, #06131f 100%); --header-surface: linear-gradient(145deg, rgba(12, 43, 74, 0.92), rgba(9, 31, 54, 0.91)); --hero-surface: radial-gradient(circle at top right, rgba(88, 183, 255, 0.12), transparent 20rem), linear-gradient(145deg, rgba(13, 46, 77, 0.93), rgba(8, 29, 49, 0.95)); --featured-surface: linear-gradient(145deg, rgba(12, 43, 74, 0.92), rgba(9, 31, 54, 0.91)); --visual-surface: linear-gradient(180deg, rgba(17, 58, 95, 0.9), rgba(10, 33, 55, 0.95)); --team-surface: radial-gradient(circle at top right, rgba(112, 215, 255, 0.08), transparent 18rem), linear-gradient(145deg, rgba(12, 43, 74, 0.91), rgba(8, 29, 49, 0.94)); --panel-surface: linear-gradient(145deg, rgba(14, 48, 80, 0.89), rgba(10, 33, 56, 0.93)); --chip-surface: rgba(255, 255, 255, 0.06); --chip-border: rgba(144, 214, 255, 0.18); --button-primary-bg: linear-gradient(135deg, #76ddff, #ffd76d); --button-primary-ink: #082139; --button-secondary-bg: rgba(255, 255, 255, 0.04); --button-secondary-border: rgba(148, 216, 255, 0.28); --button-secondary-ink: #f3f8fd; --eyebrow: #94d8ff; --accent-1: #76ddff; --accent-2: #ffd76d; --team-card-1: radial-gradient(circle at top right, rgba(118, 216, 255, 0.15), transparent 13rem), linear-gradient(145deg, rgba(16, 55, 91, 0.92), rgba(10, 34, 57, 0.95)); --team-card-2: radial-gradient(circle at top right, rgba(255, 215, 109, 0.12), transparent 13rem), linear-gradient(145deg, rgba(18, 54, 86, 0.92), rgba(11, 33, 54, 0.95)); --team-card-3: radial-gradient(circle at top right, rgba(126, 225, 200, 0.14), transparent 13rem), linear-gradient(145deg, rgba(16, 55, 91, 0.92), rgba(10, 34, 57, 0.95)); --surface-shadow: var(--shadow-deep); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.page-shell { position: relative; z-index: 1; width: min(calc(100% - 2rem), var(--page-width)); margin: 0 auto; padding: 1.2rem 0 3rem; }
main { display: grid; gap: 1.5rem; }
main p, main h1, main h2, main h3 { margin: 0; }
.site-header, .hero, .featured-game, .featured-visual, .info-panel, .media-card, .faq-item, .team-panel, .team-block, .not-found { border: 1px solid var(--line); box-shadow: var(--surface-shadow); backdrop-filter: blur(16px); }
.site-header, .hero, .featured-game, .team-panel, .not-found { border-radius: var(--radius-xl); }
.featured-visual, .info-panel, .media-card, .faq-item, .team-block { border-radius: var(--radius-lg); }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.05rem 1.3rem; margin-bottom: 1.5rem; background: var(--header-surface); }
.hero { padding: clamp(1.5rem, 3vw, 2.35rem); background: var(--hero-surface); overflow: hidden; }
.featured-game { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(19rem, 0.95fr); gap: 1.4rem; padding: 1.55rem; background: var(--featured-surface); }
.featured-visual { display: grid; place-items: center; min-height: 25rem; padding: 1.6rem; background: var(--visual-surface); overflow: hidden; }
.info-panel, .media-card, .faq-item, .team-block, .not-found { background: var(--panel-surface); }
.team-panel { display: grid; gap: 1.5rem; padding: 1.55rem; background: var(--team-surface); }
.brand-lockup { display: inline-flex; align-items: center; min-width: 0; }
.brand-logo { width: clamp(12.25rem, 20vw, 17rem); height: auto; }
.brand-lockup-compact .brand-logo { width: clamp(10.75rem, 16vw, 13.75rem); }
.hero-copy h1, .featured-copy h2, .section-heading h2, .info-panel h2, .media-card h3, .faq-item h3, .team-block h3, .showcase-copy h3, .game-title, .not-found h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 0.95; }
.eyebrow, .card-label, .game-subtitle { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.18em; }
.top-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: clamp(0.75rem, 2vw, 1.35rem); margin-left: auto; }
.top-nav a { font-family: var(--font-display); font-size: 0.98rem; font-weight: 600; opacity: 0.86; transition: opacity var(--transition-fast); }
.top-nav a:hover, .top-nav a:focus-visible { opacity: 1; }
.hero-copy, .featured-copy, .showcase-copy, .team-panel-main, .info-panel, .media-card, .faq-item, .team-block, .not-found { display: grid; gap: 0.9rem; align-content: start; }
.hero-copy { width: 100%; }
.hero-copy h1 { font-size: clamp(2.9rem, 7vw, 5.3rem); max-width: 22ch; }
.hero-studio .hero-copy h1 { font-size: clamp(2.1rem, 4.8vw, 3.8rem); }
.featured-copy h2, .section-heading h2, .info-panel h2, .not-found h1 { font-size: clamp(2rem, 4vw, 3rem); text-wrap: balance; }
.media-card h3, .faq-item h3, .team-block h3, .showcase-copy h3 { font-size: clamp(1.45rem, 2.7vw, 2rem); text-wrap: balance; }
.team-block h3 { font-size: clamp(1.45rem, 2.3vw, 1.95rem); }
.lead, .body-copy, .section-intro, .showcase-copy p, .info-panel p, .faq-item p, .team-panel p, .team-block p, .info-note { color: var(--muted); }
.lead, .body-copy, .section-intro { max-width: 70ch; }
.lead { font-size: 1.08rem; color: var(--ink); }
.hero-studio .lead, .hero-studio .body-copy { max-width: 96ch; }
.eyebrow, .card-label { display: inline-block; margin: 0; font-size: 0.82rem; color: var(--eyebrow); }
.button-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 0.4rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.8rem 1.15rem; border: 1px solid transparent; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 0.98rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; text-align: center; white-space: nowrap; transition: transform var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast); }
.button:hover, .button:focus-visible { transform: translateY(-1px); }
.button-primary { background: var(--button-primary-bg); color: var(--button-primary-ink); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); }
.button-secondary { background: var(--button-secondary-bg); border-color: var(--button-secondary-border); color: var(--button-secondary-ink); }
.requirements-list { list-style: none; padding: 0; margin: 0; }
.game-showcase { position: relative; z-index: 1; display: grid; gap: 1rem; align-content: start; width: min(100%, 30rem); }
.showcase-copy { gap: 0.45rem; }
.game-logo-frame { display: block; overflow: visible; aspect-ratio: auto; }
.game-logo { width: 100%; max-width: 100%; height: auto; transform: none; }
.game-logo-feature-frame { width: min(15rem, 78%); justify-self: center; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.18)); }
.hero-game-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; }
.hero-game-logo { justify-self: end; align-self: start; padding-top: 0.65rem; }
.game-title-block { display: grid; gap: 0.75rem; }
.game-title { font-size: clamp(3rem, 7vw, 5.1rem); max-width: 10ch; }
.game-logo-inline-frame { width: clamp(12rem, 19vw, 15rem); min-width: 11rem; filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.24)); }
.game-subtitle { font-size: 0.8rem; font-weight: 700; line-height: 1.3; opacity: 0.72; }
.section-heading, .media-section, .faq-section, .team-section { display: grid; gap: 1.15rem; }
.section-heading { gap: 0.35rem; }
.section-heading-panel { margin-bottom: 0.35rem; }
.info-grid, .media-grid, .faq-grid, .team-grid { display: grid; gap: 1rem; }
.info-grid { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.media-grid, .faq-grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.team-grid { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.info-panel, .media-card, .faq-item, .team-block { padding: 1.5rem; }
.media-card { position: relative; overflow: hidden; min-height: 14.75rem; }
.media-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 0.28rem; background: linear-gradient(90deg, var(--card-accent), transparent 68%); }
.theme-game .media-card-tone-1 { --card-accent: #79d8ff; background: radial-gradient(circle at top right, rgba(121, 216, 255, 0.18), transparent 12rem), var(--panel-surface); }
.theme-game .media-card-tone-2 { --card-accent: #ffd56a; background: radial-gradient(circle at top right, rgba(255, 213, 106, 0.18), transparent 12rem), var(--panel-surface); }
.theme-game .media-card-tone-3 { --card-accent: #80e0c7; background: radial-gradient(circle at top right, rgba(128, 224, 199, 0.16), transparent 12rem), var(--panel-surface); }
.team-panel-main { max-width: 76ch; }
.team-block:nth-child(1) { background: var(--team-card-2); }
.team-block:nth-child(2) { background: var(--team-card-2); }
.team-block:nth-child(3) { background: var(--team-card-3); }
.team-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; }
.team-contact .button { white-space: normal; overflow-wrap: anywhere; }
.requirements-list { margin-top: 0.2rem; }
.requirements-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--divider); }
.requirements-list li span { color: var(--muted); }
.requirements-list li strong { font-family: var(--font-display); line-height: 1.35; }
.info-note { max-width: 34rem; }
.not-found { min-height: 50vh; padding: 2rem; }
.brand-lockup:focus-visible, .top-nav a:focus-visible, .button:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 3px; }
@media (max-width: 1000px) {
  .featured-game { grid-template-columns: 1fr; }
  .featured-visual { min-height: 20rem; }
}
@media (max-width: 760px) {
  .page-shell { width: min(calc(100% - 1rem), var(--page-width)); padding-top: 0.75rem; }
  .site-header { padding: 1rem; border-radius: var(--radius-lg); }
  .top-nav { width: 100%; justify-content: flex-start; margin-left: 0; }
  .hero, .featured-game, .team-panel, .not-found { padding: 1.2rem; }
  .featured-visual, .info-panel, .media-card, .faq-item, .team-block { padding: 1.15rem; }
  .hero-game-layout { grid-template-columns: 1fr; }
  .hero-game-logo { justify-self: start; padding-top: 0; }
  .game-logo-inline-frame { width: clamp(10.5rem, 36vw, 13rem); min-width: 0; }
}
@media (max-width: 560px) {
  .brand-logo { width: min(12rem, 100%); }
  .brand-lockup-compact .brand-logo { width: min(10.5rem, 100%); }
  .top-nav a { font-size: 0.88rem; }
  .hero-copy h1, .game-title { font-size: clamp(2.45rem, 14vw, 3.9rem); }
  .button { width: 100%; white-space: normal; }
  .hero-game-logo { justify-self: center; }
  .game-logo-feature-frame { width: min(16rem, 92%); }
}
@media (max-width: 420px) {
  .page-shell { width: min(calc(100% - 0.75rem), var(--page-width)); }
  .top-nav { gap: 0.6rem; }
  .hero, .featured-game, .team-panel, .not-found { padding: 1rem; }
  .featured-visual, .info-panel, .media-card, .faq-item, .team-block { padding: 1rem; }
}