@font-face { font-family: Bungee; src: url('/assets/guides/game-art/bungee-latin-400-normal.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
.game-guide { --paper:#f5efdf; --ink:#29382b; --muted:#58604e; --line:#c8ccb5; --accent:#365e43; --card:#fffcf1; --wash:#e8e9d6; background:var(--paper); line-height:1.65; }
.game-guide .wrap { width:min(1120px,calc(100% - 80px)); }
.game-header { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:90px; }
.game-header .brand-logo { width:178px; }
.game-header nav { display:flex; gap:28px; align-items:center; font-size:13px; }
.game-header nav a { display:flex; align-items:center; min-height:44px; }
.game-header nav a:last-child { font-weight:700; }
.game-hero { position:relative; isolation:isolate; width:min(1440px,100%); margin:auto; overflow:hidden; }
.hero-landscape { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% center; z-index:-2; }
.field-guide .game-hero:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#172b23f5 0%,#172b23ce 35%,#172b2340 65%,#172b2310 100%); z-index:-1; }
.hero-copy { padding:64px max(40px,calc((100% - 1120px)/2)) 68px; color:#fff8e7; max-width:100%; }
.hero-copy .eyebrow { font-size:10px; letter-spacing:1.7px; margin:0 0 28px; color:#dde7c7; }
.hero-copy h1 { font-family:var(--serif); font-size:clamp(54px,6.2vw,88px); line-height:.98; letter-spacing:-2px; font-weight:400; margin:0 0 26px; }
.hero-copy h1 span { display:block; }
.hero-tagline { font:italic 29px/1.25 var(--serif); margin:0 0 20px; max-width:420px; }
.hero-tagline br { display:none; }
.hero-tagline br:after { content:' '; }
.hero-intro { max-width:390px; color:#e4eadb; font-size:16px; line-height:1.75; margin:0 0 26px; }
.game-actions { display:flex; flex-wrap:wrap; gap:20px; align-items:center; }
.play-button { display:inline-flex; align-items:center; justify-content:space-between; gap:25px; min-height:48px; padding:12px 22px; background:#e9d591; color:#263b2b; border-radius:7px; font-size:14px; font-weight:700; box-shadow:0 3px 0 #15291b55; }
.play-button:hover { background:#f8e5ad; }
.read-button { font-size:13px; text-decoration:underline; text-underline-offset:5px; min-height:44px; display:flex; align-items:center; gap:12px; }
.game-badges { display:flex; justify-content:center; gap:38px; padding-block:22px; border-bottom:1px solid var(--line); font-size:12px; color:var(--muted); }
.game-badges span:before { content:'✦'; padding-right:12px; color:var(--accent); }
.guide-body { padding-top:28px; }
.chapter-index { border:1px solid var(--line); border-radius:9px; margin-bottom:20px; background:var(--card); }
.chapter-index summary { padding:17px 22px; cursor:pointer; font-weight:650; font-size:15px; }
.chapter-index summary span { float:right; font-size:11px; color:var(--muted); font-weight:400; }
.chapter-index nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 20px; padding:0 22px 20px; }
.chapter-index nav a { min-height:44px; display:flex; align-items:center; font-size:14px; border-bottom:1px solid var(--line); }
.chapter-index nav a:hover { color:var(--accent); text-decoration:underline; }
.chapter { padding:64px 0 56px; border-bottom:1px solid var(--line); scroll-margin-top:20px; }
.chapter-label { text-transform:uppercase; letter-spacing:2px; font-size:10px; color:var(--accent); font-weight:700; margin:0 0 14px; }
.chapter h2, .game-end h2 { font:400 clamp(34px,4.5vw,54px)/1.13 var(--serif); letter-spacing:-1px; text-wrap:balance; margin:0 0 28px; max-width:900px; }
.chapter > p:not(.chapter-label) { max-width:780px; }
.chapter p { font-size:16px; line-height:1.8; color:var(--muted); margin:0 0 19px; }
.chapter p.lead { font-size:21px; line-height:1.6; max-width:780px; color:var(--ink); margin-bottom:30px; }
.chapter strong { color:var(--ink); font-weight:650; }
.chapter h3 { font:400 26px/1.2 var(--serif); letter-spacing:-.3px; margin:0 0 14px; }
.chapter a { text-decoration:underline; text-underline-offset:3px; color:var(--accent); }
.first-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; margin:35px 0; }
.first-steps > div { border-top:1px solid var(--line); padding-top:22px; }
.first-steps img { image-rendering:pixelated; margin-bottom:20px; }
.first-steps p { font-size:15px; }
.field-note { position:relative; padding:24px 28px; border-radius:2px 18px 18px 2px; border-left:4px solid var(--accent); background:var(--wash); color:var(--ink); font-size:16px; line-height:1.8; margin:28px 0 0; }
.field-note strong { font-weight:700; }
.scene { margin:32px 0; }
.scene img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:12px; border:6px solid var(--card); box-shadow:0 5px 20px #21312315; }
.scene figcaption { margin:12px 0 0; font-size:12px; font-style:italic; color:var(--muted); }
.reading-pair { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:32px; }
.play-notes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; margin:34px 0; }
.play-notes > div { padding:25px; background:var(--card); border:1px solid var(--line); border-radius:4px 18px 4px 18px; }
.play-notes p { font-size:15px; margin:0; }
.chapter .small-note { font-size:13px; }
.reference { padding:0 22px; border:1px solid var(--line); border-radius:8px; background:var(--card); margin:27px 0; }
.reference > summary { padding:18px 0; cursor:pointer; font-size:15px; font-weight:650; }
.reference h3 { margin-top:26px; }
.table-scroll { overflow-x:auto; margin:14px 0 25px; }
.table-scroll table { width:100%; border-collapse:collapse; text-align:left; font-size:14px; line-height:1.6; }
.table-scroll th, .table-scroll td { padding:13px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.table-scroll th { font-weight:650; color:var(--ink); }
.table-scroll td { color:var(--muted); }
.table-scroll thead { background:var(--wash); }
.questions { max-width:850px; }
.questions details { border-bottom:1px solid var(--line); }
.questions summary { cursor:pointer; min-height:48px; padding:19px 0; font-size:17px; font-weight:550; }
.questions details p { padding-right:20px; }
.game-guide summary:focus-visible, .game-guide [tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.game-end { padding:55px; margin:60px 0 26px; background:var(--wash); border-radius:15px; text-align:center; }
.game-end h2 { margin:0 auto 30px; }
.game-footnote { font-size:12px; line-height:1.75; color:var(--muted); max-width:780px; margin:0 auto 55px; text-align:center; }
.other-game { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.other-game > span { font-size:13px; color:var(--muted); }
.other-game a { font:24px/1.3 var(--serif); padding-block:8px; }
.game-footer { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:28px; font-size:12px; color:var(--muted); }
.game-footer > a { min-height:44px; display:flex; align-items:center; }
/* Thorns uses the same character-led opening, in its own storybook palette. */
.field-guide .game-hero { background:radial-gradient(ellipse at 75% 40%,#738761 0,#3f6049 34%,#203c30 70%); }
.field-guide .game-hero:after { background:linear-gradient(90deg,#203c3080,transparent 65%); }
.field-guide .hero-copy { position:relative; z-index:2; pointer-events:none; }
.field-guide .hero-copy a { pointer-events:auto; }
.field-guide .hero-tagline { max-width:370px; }
.spring-cast { position:absolute; width:57%; right:0; height:100%; bottom:0; }
.spring-cast:before { content:''; position:absolute; width:78%; aspect-ratio:1; left:12%; top:12%; border:1px solid #ecdfaa55; border-radius:50%; background:radial-gradient(circle,#b5bd7938,transparent 68%); box-shadow:0 0 0 16px #e6d59a08; }
.spring-cast img { position:absolute; object-fit:contain; object-position:bottom; filter:drop-shadow(0 15px 13px #132e2b66); }
.spring-tamlin { width:55%; height:78%; left:-2%; bottom:16%; transform:rotate(-7deg); }
.spring-tansy { width:55%; height:78%; right:-2%; bottom:16%; transform:rotate(7deg); }
.spring-hazel { width:65%; height:86%; left:18%; bottom:5%; z-index:1; }
.spring-seal { position:absolute; top:24px; right:10%; text-align:center; color:#f4e7b9; font:italic 16px/1.4 var(--serif); transform:rotate(5deg); }
.spring-seal strong { font-size:20px; font-weight:400; }
.spring-caption { position:absolute; bottom:20px; left:0; right:0; text-align:center; color:#e9dfbc; font:italic 17px/1.4 var(--serif); z-index:2; }
.neighbour-cast { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:32px 0 42px; }
.neighbour-cast figure { margin:0; border:1px solid var(--line); border-radius:100px 100px 12px 12px; overflow:hidden; background:var(--card); }
.neighbour-art { background:radial-gradient(ellipse at 50% 65%,#e9e7b9,#c3cfac); padding:12px 8px 0; }
.neighbour-cast figure:nth-child(2) .neighbour-art { background:radial-gradient(ellipse at 50% 65%,#f1d9d5,#d2bfd3); }
.neighbour-cast figure:nth-child(3) .neighbour-art { background:radial-gradient(ellipse at 50% 65%,#e4d4a1,#b6c59e); }
.neighbour-cast figure:nth-child(4) .neighbour-art { background:radial-gradient(ellipse at 50% 65%,#ead2b5,#d4ad94); }
.neighbour-cast img { width:100%; height:auto; aspect-ratio:6/7; object-fit:contain; filter:drop-shadow(0 7px 7px #493b3025); }
.neighbour-cast figcaption { padding:22px 20px; }
.neighbour-cast h3 { font-size:29px; margin-bottom:5px; }
.neighbour-cast figcaption > span { display:block; color:var(--accent); font-size:11px; line-height:1.5; font-weight:700; margin-bottom:13px; }
.neighbour-cast p { font-size:14px; line-height:1.7; margin:0; }
@media (min-width:701px) and (max-width:1000px) {
  .field-guide .hero-copy { padding-top:50px; padding-bottom:50px; }
  .field-guide .hero-intro { max-width:320px; }
  .field-guide .hero-tagline { max-width:290px; }
  .spring-cast { width:51%; right:-1%; }
  .spring-cast img { height:66%; bottom:19%; }
  .spring-cast .spring-hazel { height:75%; bottom:10%; }
  .spring-seal { top:45px; right:8%; }
  .neighbour-cast { grid-template-columns:1fr 1fr; gap:22px; }
}
@media (max-width:700px) {
  .field-guide .game-hero { background:radial-gradient(ellipse at 50% 10%,#7c8d66,#203c30 58%); }
  .spring-cast { position:relative; width:100%; height:330px; right:auto; }
  .spring-cast:before { width:65%; top:5%; left:18%; }
  .spring-cast img { height:90%; bottom:6%; }
  .spring-cast .spring-hazel { height:99%; bottom:-3%; }
  .spring-tamlin { left:0; }
  .spring-tansy { right:0; }
  .spring-seal { display:none; }
  .spring-seal strong { font-size:15px; }
  .spring-caption { display:none; }
  .field-guide .hero-tagline { max-width:none; }
  .neighbour-cast { grid-template-columns:1fr 1fr; gap:14px; margin-bottom:30px; }
  .neighbour-cast figcaption { padding:18px 14px; }
  .neighbour-cast h3 { font-size:26px; }
  .neighbour-cast p { font-size:14px; }
}
@media (max-width:420px) { .spring-cast { height:270px; } .neighbour-cast figcaption { padding:15px 12px; } }
/* Carnage borrows the actual casting models and display type from the game. */
.broadcast-guide { --paper:#18151e; --ink:#fff1d8; --muted:#c6bdc9; --line:#4f4557; --accent:#ffcb60; --card:#231e2a; --wash:#332738; }
.broadcast-guide .game-header .brand-logo { filter:brightness(0) invert(1); }
.broadcast-guide .game-hero { background:radial-gradient(ellipse at 76% 55%,#9b314a 0,#542338 30%,#221b2a 60%,#18151e 80%); min-height:650px; }
.broadcast-guide .hero-copy { position:relative; z-index:2; pointer-events:none; padding-top:65px; padding-bottom:65px; }
.broadcast-guide .hero-copy a { pointer-events:auto; }
.broadcast-guide .hero-copy .eyebrow { color:#ffcb60; }
.broadcast-guide h1 { font-family:Bungee,Impact,sans-serif; font-size:clamp(55px,6.4vw,91px); color:#ffcb60; letter-spacing:-2px; text-transform:uppercase; text-shadow:3px 4px #a02a46; margin-bottom:28px; }
.broadcast-guide h1 small { display:block; font:500 18px/1.6 var(--sans); letter-spacing:8px; color:#ffeed2; text-shadow:none; margin-bottom:6px; }
.broadcast-guide .hero-tagline { font-family:var(--sans); font-style:normal; font-size:25px; font-weight:650; line-height:1.3; max-width:360px; }
.broadcast-guide .hero-tagline br { display:block; }
.broadcast-guide .hero-intro { color:#ddd1df; max-width:345px; }
.hero-cast { position:absolute; width:58%; height:100%; right:-3%; bottom:0; }
.hero-cast img { position:absolute; width:70%; height:95%; object-fit:contain; object-position:bottom; filter:drop-shadow(0 12px 15px #09051355); }
.hero-cast .hero-dawn { bottom:-5%; left:13%; width:80%; height:102%; z-index:1; }
.hero-cast .hero-wade { left:-8%; bottom:8%; transform:rotate(-8deg); }
.hero-cast .hero-brynn { right:-5%; bottom:6%; transform:rotate(7deg); }
.on-air { position:absolute; top:34px; right:14%; color:#ffd97b; border:1px solid #fdbe6980; background:#271525; border-radius:3px; padding:8px 16px; font:13px/1.4 monospace; letter-spacing:3px; }
.broadcast-guide .play-button { background:#ffcb60; color:#201625; border-radius:3px; box-shadow:3px 3px 0 #9b314a; }
.broadcast-guide .play-button:hover { background:#ffdf8f; }
.broadcast-guide .game-badges span:before { content:'●'; font-size:9px; }
.broadcast-guide .chapter h2, .broadcast-guide .game-end h2 { font-family:Bungee,Impact,sans-serif; font-size:clamp(28px,3.5vw,44px); line-height:1.2; letter-spacing:-1px; }
.broadcast-guide .chapter h3 { font-family:var(--sans); font-weight:650; font-size:21px; line-height:1.4; }
.broadcast-guide .play-notes > div { border-radius:3px; border-top:3px solid #c44a66; }
.broadcast-guide .field-note { border-radius:3px; }
.broadcast-guide .scene img { border-radius:4px; border-color:#3a3043; }
.broadcast-guide .scene { position:relative; }
.broadcast-guide .scene img { aspect-ratio:16/9; }
.cast { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:30px; }
.cast figure { margin:0; background:radial-gradient(ellipse at 50% 75%,#543044,#241d2d); border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.cast img { width:100%; height:auto; aspect-ratio:6/7; object-fit:contain; }
.cast figcaption { padding:15px; font:17px/1.4 Bungee,Impact,sans-serif; text-align:center; color:#ffcb60; background:#1c1725; border-top:1px solid var(--line); }
.button-reminder { display:flex; flex-wrap:wrap; gap:12px 24px; margin:28px 0; }
.button-reminder span { display:flex; align-items:center; gap:10px; font-size:13px; }
kbd { border:1px solid #73667d; border-bottom-width:3px; background:#2a2333; border-radius:4px; padding:4px 8px; color:#fff2de; font:13px/1.5 monospace; }
@media (min-width:1100px) { .field-guide .hero-copy { min-height:635px; } }
@media (max-width:1000px) {
  .game-guide .wrap { width:calc(100% - 48px); }
  .hero-copy { padding-inline:32px; }
  .hero-copy h1 { font-size:64px; }
  .hero-tagline { max-width:330px; }
  .hero-tagline br { display:block; }
  .broadcast-guide h1 { font-size:65px; }
  .broadcast-guide .hero-intro { max-width:310px; }
  .hero-cast { width:55%; right:-5%; }
  .hero-cast .hero-wade { left:-2%; }
  .play-notes { gap:16px; }
  .play-notes > div { padding:20px; }
}
@media (max-width:700px) {
  .game-guide .wrap { width:calc(100% - 36px); }
  .game-header { min-height:76px; gap:15px; }
  .game-header .brand-logo { width:145px; }
  .game-header nav { gap:0; font-size:12px; }
  .game-header nav a:first-child { display:none; }
  .field-guide .game-hero { display:flex; flex-direction:column; }
  .hero-landscape { position:relative; height:auto; aspect-ratio:1.75; object-position:center; z-index:auto; }
  .field-guide .game-hero:after { display:none; }
  .hero-copy { padding:30px 24px 36px; }
  .hero-copy .eyebrow { font-size:9px; letter-spacing:1.1px; margin-bottom:22px; }
  .hero-copy h1 { font-size:56px; letter-spacing:-1.5px; margin-bottom:20px; }
  .hero-tagline { font-size:26px; max-width:none; }
  .hero-tagline br { display:none; }
  .hero-intro { font-size:16px; max-width:450px; }
  .game-actions { gap:12px 22px; }
  .game-badges { gap:8px 18px; flex-wrap:wrap; justify-content:flex-start; padding-block:18px; font-size:11px; }
  .game-badges span:before { padding-right:7px; }
  .chapter-index summary { padding:15px; font-size:14px; }
  .chapter-index summary span { display:none; }
  .chapter-index nav { grid-template-columns:1fr 1fr; padding-inline:15px; gap:4px 15px; }
  .chapter-index nav a { font-size:13px; }
  .chapter { padding:40px 0 32px; }
  .chapter h2, .game-end h2 { font-size:36px; letter-spacing:-.7px; margin-bottom:22px; }
  .chapter p.lead { font-size:19px; }
  .first-steps { grid-template-columns:1fr; gap:20px; margin-block:26px; }
  .first-steps > div { display:grid; grid-template-columns:44px 1fr; column-gap:17px; }
  .first-steps img { grid-row:span 2; width:40px; height:40px; margin:0; }
  .first-steps h3 { font-size:24px; }
  .first-steps p { grid-column:2; margin:0; }
  .reading-pair { grid-template-columns:1fr; gap:14px; margin-top:27px; }
  .play-notes { grid-template-columns:1fr 1fr; gap:14px; }
  .play-notes h3 { font-size:23px; }
  .scene { margin:25px 0; }
  .scene img { border-width:3px; border-radius:7px; }
  .scene figcaption { font-size:11px; }
  .field-note { padding:20px; font-size:15px; }
  .reference { padding-inline:14px; }
  .reference > summary { font-size:14px; }
  .table-scroll th, .table-scroll td { padding:10px 8px; min-width:80px; }
  .table-scroll table { font-size:13px; }
  .game-end { margin-top:40px; padding:30px 22px; }
  .game-end h2 { font-size:32px; }
  .game-footer { flex-wrap:wrap; gap:0 20px; font-size:11px; }
  .game-footer > span { order:3; flex:1 0 100%; }
  .other-game { display:block; }
  .other-game > span { display:block; margin-bottom:10px; }
  .other-game a { display:inline-block; font-size:24px; }
  .broadcast-guide .game-hero { min-height:0; display:flex; flex-direction:column; background:radial-gradient(ellipse at 50% 10%,#89304b,#211a29 62%); }
  .hero-cast { position:relative; width:100%; height:320px; right:auto; order:0; overflow:hidden; }
  .hero-cast img { height:104%; }
  .hero-cast .hero-dawn { height:116%; bottom:-16%; left:10%; }
  .hero-cast .hero-wade { bottom:-3%; left:-9%; }
  .hero-cast .hero-brynn { bottom:-3%; right:-9%; }
  .on-air { top:18px; right:18px; font-size:11px; padding:6px 10px; }
  .broadcast-guide .hero-copy { padding:28px 24px 36px; }
  .broadcast-guide h1 { font-size:clamp(43px,9.6vw,65px); letter-spacing:-1px; }
  .broadcast-guide h1 small { font-size:14px; letter-spacing:6px; }
  .broadcast-guide .hero-tagline { font-size:24px; }
  .broadcast-guide .hero-tagline br { display:none; }
  .broadcast-guide .hero-intro { max-width:460px; }
  .broadcast-guide .chapter h2 { font-size:29px; }
  .broadcast-guide .chapter h3 { font-size:19px; }
  .broadcast-guide .game-end h2 { font-size:27px; }
  .cast { grid-template-columns:1fr 1fr; gap:14px; }
}
@media (max-width:420px) {
  .hero-copy h1 { font-size:49px; }
  .hero-copy { padding-inline:20px; }
  .hero-tagline { font-size:23px; }
  .game-actions { align-items:stretch; }
  .game-actions .play-button { width:100%; }
  .play-button { font-size:14px; }
  .play-notes { grid-template-columns:1fr; }
  .hero-cast { height:270px; }
  .broadcast-guide .hero-copy { padding-inline:20px; }
  .broadcast-guide h1 { font-size:clamp(36px,10.5vw,44px); }
  .chapter-index nav { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print {
  .game-guide { --paper:white; --ink:#222; --muted:#444; --line:#ccc; --accent:#333; --card:white; --wash:#eee; }
  .game-header, .game-actions, .chapter-index, .game-end, .other-game, .game-footer, .hero-cast, .spring-cast, .hero-landscape, .game-badges { display:none; }
  .game-guide .game-hero { background:white; min-height:0; }
  .game-guide .hero-copy { padding:20px 0; min-height:0; color:#222; }
  .game-guide .hero-copy h1, .game-guide .hero-copy p, .game-guide h1 small { color:#222; text-shadow:none; }
  .field-guide .game-hero:after { display:none; }
  .game-guide .wrap { width:100%; }
  .chapter { padding:24px 0; }
  .chapter h2, .chapter h3 { break-after:avoid; }
}