/* DareTap Universe: warm paper, arcade colour and the original character cast. */
:root {
  color-scheme: light;
  --bg: #fffaf0;
  --surface: #ffffff;
  --line: #ded6e9;
  --text: #292039;
  --muted: #696173;
  --lime: #c5fa74;
  --violet: #7045ef;
  --orange: #ff916c;
  --ink: #30213f;
  --yellow: #ffe375;
}
body { background: var(--bg); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline-color: #ff784f;
}
.site-header { border-color: #e6dfea; height: 94px; }
.brand { color: var(--ink); font-size: 21px; }
.brand img { width: 44px; height: 44px; }
.brand-light { color: #7445e0; letter-spacing: .3em; }
.site-header nav { font-size: 12px; }
.site-header nav a { color: #61556e; border-radius: 24px; }
.site-header nav a[aria-current] { color: #fff; background: #7045ef; }
.site-header nav a:hover { color: #512dbb; background: #ede3ff; }
.site-header nav a[aria-current]:hover { color: #fff; background: #6035df; }
.button { border: 2px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px var(--ink); font-size: 13px; min-height: 47px; }
.button:hover { box-shadow: 4px 5px var(--ink); transform: translateY(-2px); }
.button.lime { background: var(--lime); color: var(--ink); }
.button.ink { background: var(--ink); color: #fff; }
.button.outline { border-color: var(--ink); color: var(--ink); background: #fff; }
.text-link { color: #6033d1; font-size: 12px; }
.text-link:hover { color: #3d1c91; }
.eyebrow { color: #776282; font-size: 10px; }

/* One unmistakable welcome: a bright stage for Red, Sunny and Hop. */
.discover-hero {
  position: relative;
  isolation: isolate;
  grid-template-columns: 1fr 1.05fr;
  gap: 8px;
  min-height: 465px;
  margin: 29px 0 25px;
  padding: 42px 32px 42px 47px;
  border: 2px solid var(--ink);
  border-radius: 28px;
  background: #7545ec;
  box-shadow: 5px 6px var(--ink);
  color: #fff;
  overflow: hidden;
}
.discover-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 76% 45%, #a686ff88, transparent 50%);
  z-index: -1;
}
.discover-intro { position: relative; z-index: 4; }
.discover-intro > .eyebrow { color: #fff1bb; font-size: 9px; letter-spacing: .15em; }
.discover-intro h1 { font-size: clamp(43px, 4.7vw, 68px); line-height: 1.02; letter-spacing: -.065em; margin: 24px 0 22px; }
.discover-intro h1 span { display: inline-block; color: #ffe77c; transform: rotate(-2deg); }
.discover-intro > p { color: #f1e8ff; font-size: 14px; max-width: 430px; line-height: 1.8; }
.discover-intro .actions { gap: 20px; flex-direction: row; align-items: center; }
.discover-intro .text-link { color: #fff; font-size: 11px; }
.real-counts { gap: 21px; color: #e6d5ff; padding-top: 28px; font-size: 10px; }
.real-counts strong { color: #fff7c8; margin: 0 0 0 5px; }
.universe-stage { height: 382px; width: 100%; position: relative; align-self: end; }
.crew-sun { position: absolute; width: 350px; height: 350px; border-radius: 50%; background: #ffde69; top: 8px; right: 42px; border: 2px solid var(--ink); box-shadow: 12px 12px #5430ac; }
.crew-sun::after { content: ''; position: absolute; inset: -19px; border: 1px dashed #f7e5a88a; border-radius: 50%; }
.universe-stage img { position: absolute; object-fit: contain; object-position: bottom; filter: drop-shadow(0 9px 1px #38205f30); }
.universe-sunny { width: 48%; height: 77%; bottom: 13%; left: -2%; z-index: 2; transform: rotate(-9deg); }
.universe-hop { width: 44%; height: 104%; bottom: -2%; right: -4%; z-index: 3; transform: rotate(9deg); }
.universe-red { width: 68%; height: 104%; bottom: -9%; left: 12%; z-index: 4; transform: rotate(-5deg); }
.crew-stamp { position: absolute; top: -15px; left: 22px; z-index: 5; color: var(--ink); background: #c8fa77; font-size: 10px; line-height: 1.05; letter-spacing: .08em; padding: 13px 15px; border: 2px solid var(--ink); box-shadow: 3px 3px var(--ink); border-radius: 10px; transform: rotate(-11deg); }
.crew-stamp b { font-size: 29px; letter-spacing: -.06em; }
.crew-ticket { position: absolute; bottom: -15px; left: 11px; z-index: 6; padding: 11px 15px; border: 2px solid var(--ink); background: #ff9bb3; color: var(--ink); box-shadow: 3px 3px var(--ink); font-size: 12px; font-weight: 700; border-radius: 8px; transform: rotate(-7deg); }
.crew-ticket b { font-size: 24px; margin-left: 15px; line-height: 1; }
.crew-spark { position: absolute; z-index: 1; color: #ff9db5; line-height: 1; }
.spark-one { font-size: 100px; left: -13px; top: 74px; transform: rotate(8deg); }
.spark-two { font-size: 58px; right: -8px; top: -22px; color: #d2ff86; }
.spark-three { font-size: 60px; right: 17px; bottom: -29px; color: #fff; z-index: 5; }

/* A compact daily invitation keeps the games close to the fold. */
.daily-feature { background: #ffe88d; border: 2px solid var(--ink); box-shadow: 3px 4px var(--ink); color: var(--ink); border-radius: 19px; }
.daily-feature-top { color: #58491f; }
.feature-label { color: #483222; background: #fff5c7; border: 1px solid #c5a947; font-size: 10px; }
.daily-feature .eyebrow { color: #725e2b; }
.daily-feature p { color: #665436; }
.daily-stack { position: relative; height: 190px; scale: 1; margin: 0; }
.daily-stack img { object-fit: contain; width: 100%; height: 100%; position: relative; z-index: 2; }
.daily-stack > span { background: #c8f676; color: var(--ink); border: 2px solid var(--ink); z-index: 3; font-weight: 700; }
.feature-actions { color: var(--ink); border-color: #d2b64e; }
.daily-lane { margin: 0 0 43px; }
.daily-lane .daily-feature { display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 28px; padding: 20px 27px; }
.daily-lane .daily-feature-top { align-items: start; flex-direction: column; gap: 15px; font-size: 11px; }
.daily-lane .daily-feature-main { display: grid; grid-template-columns: 1fr 115px; gap: 17px; align-items: center; padding: 0; }
.daily-lane .daily-feature h2 { font-size: 25px; letter-spacing: -.045em; margin: 6px 0 7px; }
.daily-lane .daily-feature h2 br { display: none; }
.daily-lane .daily-feature p { font-size: 11px; margin: 0; max-width: 350px; }
.daily-lane .daily-stack { height: 115px; }
.daily-lane .daily-stack > span { width: 33px; height: 33px; font-size: 17px; right: 0; bottom: 0; line-height: 29px; }
.daily-lane .feature-actions { border: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; align-items: center; font-size: 11px; }
.daily-lane .unavailable { display: block; }
.unavailable .hub-empty { padding: 12px; }
.unavailable .empty-character { display: none; }

/* Characters belong to the games they already represent in Puzzle. */
.hub-section-heading h2 { font-size: 32px; }
.hub-section-heading .eyebrow { color: #805488; }
.hub-section-heading .text-link { color: #6534cf; }
.search-box { background: #fff; border: 1.5px solid #c7b6d8; height: 47px; box-shadow: 2px 2px #ede0f1; }
.search-box > span[aria-hidden] { color: #774598; }
.search-box input { color: var(--ink); }
.search-box input::placeholder { color: #88728f; }
.search-box button { color: #6a37db; }
.category-tabs button { border: 1.5px solid #cbbdd3; background: #fff; color: #61516c; font-size: 11px; }
.category-tabs button.selected { background: #7144e9; border-color: #4c289e; color: #fff; box-shadow: 2px 2px #34213f; }
.category-tabs button:hover { border-color: #7045ef; color: #542ab9; }
.category-tabs button.selected:hover { color: #fff; }
.play-card { background: #fff; border: 2px solid var(--ink); border-radius: 17px; box-shadow: 3px 4px #30213f; }
.play-card:hover { border-color: var(--ink); box-shadow: 4px 7px var(--ink); transform: translateY(-4px) rotate(-.5deg); }
.game-art, .game-art.art-sudoku, .catalogue-grid .game-art { height: 185px; border-bottom: 2px solid var(--ink); }
.game-art.art-letters { background: #ffa47d; }
.game-art.art-sudoku { background: #c1a2ff; }
.game-art.art-guess { background: #75e1e9; }
.game-art.art-pixels { background: #ff93b9; }
.game-art.art-connect { background: #ffe378; }
.game-art.art-path { background: #c1f779; }
.game-art.art-chess { background: #f5bb74; }
.chess-board { display:grid;grid-template-columns:repeat(4,1fr);width:156px;height:156px;border:3px solid #30213f;border-radius:10px;overflow:hidden;transform:rotate(-8deg); }
.chess-board span { display:grid;place-items:center;background:#fff4d4;color:#30213f;font:32px/1 Georgia,serif; }
.chess-board span:nth-child(8n+2),.chess-board span:nth-child(8n+4),.chess-board span:nth-child(8n+5),.chess-board span:nth-child(8n+7) { background:#9163bf;color:#fff4d4; }
.game-detail-visual>.game-art>.card-cast { transform:none;scale:1; }
.play-grid:has(>.play-card:nth-child(6):last-child) { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:700px){.play-grid:has(>.play-card:nth-child(6):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
.game-art::after { width: 150px; height: 150px; background: #ffffff47; border: 1px solid #ffffff80; right: 13px; top: 18px; bottom: auto; }
.game-art.with-cast > div:not(.card-cast) { position: absolute; top: 32px; left: 5px; scale: .68; opacity: .85; transform: rotate(-15deg); z-index: 1; }
.game-art > .card-cast { position: absolute; inset: 0; z-index: 3; scale: 1; display: flex; align-items: end; justify-content: end; }
.card-cast img { width: 88%; height: 96%; object-fit: contain; object-position: bottom; filter: drop-shadow(3px 3px 0 #4420482b); transition: transform .2s; }
.play-card:hover .card-cast img { transform: translateY(-3px) rotate(2deg); }
.card-cast.cast-duo img { width: 66%; height: 95%; position: absolute; bottom: 0; left: 0; }
.card-cast.cast-duo img + img { width: 60%; height: 81%; right: -2px; left: auto; }
.play-card-copy { padding: 18px 16px 17px; }
.play-card h3 { font-size: 21px; color: var(--ink); }
.play-card p { color: #78697d; font-size: 11px; }
.card-meta { color: #7c6687; font-size: 9px; }
.available-dot { color: #527031; font-size: 8px; }
.available-dot::before { background: #6ca52f; }
.play-card-actions { border-color: #eee5f2; padding-top: 12px; }
.card-play { background: #efe5ff; color: #6131c4; padding: 6px 11px; border: 1px solid #d2baf5; border-radius: 7px; font-size: 11px; font-weight: 700; }
.card-play:hover { background: #7545ec; color: #fff; }
.card-detail { border-color: #cfbfd9; color: #755486; background: #fff; }
.card-detail:hover { background: #f0e5ff; }
.results-count { color: #806c8e; }

/* Leaderboards feel like part of the same universe, with real results only. */
.hub-heading { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 25px; background: #f0e6ff; border: 2px solid var(--ink); border-radius: 22px; margin: 30px 0 26px; padding: 26px 36px; min-height: 200px; overflow: hidden; box-shadow: 4px 4px #dccceb; }
.hub-heading h1 { max-width: 940px; font-size: 44px; margin: 14px 0; }
.hub-heading p { color: #75647c; }
.heading-copy { position: relative; z-index: 2; min-width: 0; }
.heading-copy > .eyebrow { color: #7750a4; }
.heading-character { width: 165px; height: 175px; object-fit: contain; flex: none; transform: rotate(7deg); }
.board-preview, .how-card, .competition-card, .board-rules, .ranking-table { background: #fff; border: 2px solid var(--ink); box-shadow: 3px 4px #e5d9e8; border-radius: 17px; }
.board-preview-title { background: #eee4ff; }
.competition-icon { color: #6540a7; background: #d9c3ff; border: 1px solid #ac87e1; }
.live-badge { color: #4b7028; background: #ecf9d8; border-color: #bed18a; }
.live-badge::before { background: #729e3c; }
.board-meta { background: #eee4ff; border-color: #d8c7eb; color: #796389; }
.board-preview-empty { background: #fff; padding-block: 22px; gap: 20px; }
.board-character { width: 108px; height: 117px; object-fit: contain; flex: none; transform: rotate(-6deg); }
.board-preview-empty p { color: #796a81; }
.board-footer { background: #c9f784; color: #364d1e; border-color: var(--ink); font-weight: 700; }
.board-footer:hover { background: #b7ee66; }
.how-card { background: #ffdbdc; }
.how-card > .eyebrow { color: #8d415d; }
.how-card > div > span { color: #69324a; background: #fff8eb; border: 1px solid #b37487; box-shadow: 2px 2px #b37487; font-weight: 700; }
.how-card h3 { color: #593345; }
.how-card p { color: #895d6b; font-size: 11px; }
.world-links > a { background: #e0f6f3; border: 2px solid var(--ink); box-shadow: 3px 4px #d9ece7; border-radius: 16px; }
.world-links > a + a { background: #ffead0; }
.world-links b { color: #624375; }
.world-mark { color: #27676a; background: #b8e8e3; border-color: #68a7a0; }
.world-mark.puzzle-mark { color: #976135; background: #ffdaaa; border-color: #cf9a58; }
.world-links p { color: #726479; font-size: 11px; }
.board-choices a { background: #fff; border-color: #c3aed1; color: #786185; }
.board-choices a[aria-current] { background: #7244ea; border-color: #482592; color: #fff; }
.board-filter label, .board-filter > span { color: #82698c; }
.board-filter select, .board-filter input { color: var(--ink); background: #fff; border-color: #b9a2c9; }
.board-title-banner { background: #ffe17b; border: 2px solid var(--ink); border-radius: 17px; box-shadow: 3px 4px #e6d5a0; }
.board-title-banner .eyebrow { color: #7b6128; }
.board-title-banner::after { color: #c39a3333; }
.board-title-banner .competition-icon { color: #785918; background: #fff0ab; border-color: #c6a152; }
.ranking-heading > span { color: #8a7294; }
.ranking-main > .hub-empty, .hub-empty { background: #fff3db; border: 2px solid var(--ink); box-shadow: 3px 4px #ecddc1; border-radius: 17px; }
.ranking-main > .hub-empty { min-height: 340px; }
.hub-empty .empty-character { display: block; object-fit: contain; width: 118px; height: 124px; margin: 0 auto; }
.hub-empty h3 { color: #533746; margin-top: 14px; }
.hub-empty p { color: #89725d; }
.my-place { position: relative; overflow: hidden; background: #cafa8b; color: #344b29; border: 2px solid var(--ink); box-shadow: 3px 4px #d6e5bc; border-radius: 17px; }
.my-place > .eyebrow { color: #4a672c; }
.my-place > strong { color: #537937; }
.my-place .button { background: #344c27; color: #fff; border-color: #24391c; box-shadow: 2px 3px #24391c; }
.board-rules { background: #ddf4f5; }
.board-rules > .eyebrow { color: #3a8386; }
.board-rules h3 { color: #3b686d; }
.board-rules p, .board-rules p:last-child { color: #608487; }
.competition-card p { color: #8a7294; }
.competition-card > b { color: #7a4ed0; }
.period-tabs a { border-color: #c6b5d1; background: #fff; color: #816890; }
.period-tabs a[aria-current] { background: #7545ec; color: #fff; border-color: #512dba; }
.ranking-table th, .ranking-table td { border-color: #eadff0; }
.ranking-table th { color: #8b7795; background: #f9f4ff; }
.ranking-table td:last-child { color: #7341d3; }
.rank-number { color: #8f7e99; }
.medal-1 { background: #ffe178; color: #765b22; }
.medal-2 { background: #dfccff; color: #745296; }
.medal-3 { background: #ffd0b7; color: #9a5b3f; }
.avatar-badge { background: #eee1ff; color: #8a63af; border-color: #c9afe1; }
.podium-place { background: #eee1ff; border: 2px solid #b192d0; }
.podium-place > strong { color: #7952a0; }
.podium-place > span:last-child, .podium-rank { color: #8b6ba6; }
.podium-1 { background: #ffe787; border-color: #b19535; }
.podium-1 .podium-rank, .podium-1 > strong { color: #856a23; }
.podium-1 .avatar-badge { background: #fff4bd; color: #947823; border-color: #d3bc62; }
.podium-3 { background: #ffd9c4; border-color: #c5997d; }

/* Keep detail, account and record pages inside the same visual family. */
.back-link, .game-detail-copy > .eyebrow, .game-information .eyebrow { color: #8051bc; }
.game-detail-visual > .game-art { border: 2px solid var(--ink); box-shadow: 5px 5px var(--ink); border-radius: 24px; }
.detail-character { width: 200px; height: 245px; bottom: -12px; right: -23px; filter: drop-shadow(3px 4px 0 #40204930); }
.game-detail-visual > .game-art > div { transform: rotate(-10deg) translateX(-17px); }
.game-facts { color: #876899; }
.game-facts span { background: #f4eaff; border-color: #d1bce2; }
.game-information { border-color: #e0d0e7; }
.panel, .empty, .record-card, .list-card, .result-panel, .table-wrap { background: #fff; border: 2px solid #d4bfdf; color: var(--ink); }
.result-panel { background: #f0e2ff; }
.result-panel h1 { color: #7545cf; }
.huge-result, .record-value { color: #7444d3; }
.record-card .verified, .verified { color: #597e36; }
input { background: #fff; border-color: #cfb9dc; color: var(--ink); }
.destination.web { background: #d7f4ef; }
.destination.puzzle { background: #ffecd1; }
.destination { border: 2px solid var(--ink); }
.destination-art { color: #6bc0b655; }
.empty > .empty-graphic { color: #8e5cc5; }
footer { border-top: 2px solid var(--ink); color: #97839f; }
footer .brand { color: #7642c7; }
footer nav a { color: #7e678a; }

@media (max-width: 1150px) {
  .discover-hero { padding: 35px 26px 37px 32px; min-height: 420px; }
  .discover-intro h1 { font-size: 53px; }
  .discover-intro > p { font-size: 13px; }
  .discover-intro .actions { gap: 14px; }
  .discover-intro .button { font-size: 11px; padding-inline: 14px; }
  .discover-intro .text-link { font-size: 10px; }
  .universe-stage { height: 330px; }
  .crew-sun { width: 290px; height: 290px; right: 20px; }
  .crew-stamp { left: 8px; padding: 10px 12px; }
  .crew-stamp b { font-size: 24px; }
  .daily-lane .daily-feature { grid-template-columns: 150px 1fr auto; gap: 18px; padding: 19px 22px; }
  .daily-lane .daily-feature-main { grid-template-columns: 1fr 83px; gap: 8px; }
  .daily-lane .daily-stack { height: 100px; }
  .daily-lane .daily-feature h2 { font-size: 22px; }
  .daily-lane .feature-actions .button { font-size: 11px; padding-inline: 14px; }
  .game-art, .game-art.art-sudoku, .catalogue-grid .game-art { height: 165px; }
  .game-art.with-cast > div:not(.card-cast) { left: -15px; scale: .55; }
  .play-card h3 { font-size: 18px; }
  .play-card-copy { padding: 14px 12px; }
  .card-meta { font-size: 8px; }
  .available-dot { font-size: 0; }
  .card-cast img { width: 100%; }
}
@media (max-width: 900px) {
  .discover-hero { grid-template-columns: 1.15fr 1fr; gap: 0; }
  .discover-intro h1 { font-size: 45px; }
  .discover-intro .actions { align-items: start; flex-direction: column; }
  .real-counts { gap: 10px; padding-top: 18px; flex-direction: row; font-size: 8px; }
  .universe-stage { height: 280px; }
  .crew-sun { width: 240px; height: 240px; right: 5px; }
  .crew-stamp { top: -19px; left: 0; font-size: 8px; }
  .crew-ticket { font-size: 10px; left: -10px; bottom: -9px; padding: 8px 11px; }
  .spark-one { left: -30px; font-size: 78px; }
  .daily-lane .daily-feature { grid-template-columns: 1fr auto; gap: 13px 22px; }
  .daily-lane .daily-feature-top { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .daily-lane .daily-feature-main { grid-template-columns: 1fr 85px; }
  .hub-heading h1 { font-size: 37px; }
  .heading-character { width: 120px; height: 150px; }
  .detail-character { width: 150px; height: 190px; }
  .play-card h3 { font-size: 22px; }
  .game-art, .game-art.art-sudoku, .catalogue-grid .game-art { height: 185px; }
}
@media (max-width: 700px) {
  main, footer, .site-header { padding-inline: 18px; }
  .site-header { height: auto; min-height: 115px; padding-block: 16px 12px; }
  .brand { font-size: 19px; }
  .brand img { width: 37px; height: 37px; }
  .site-header nav { font-size: 10px; }
  .site-header nav a { padding: 7px 9px; }
  .discover-hero { display: flex; flex-direction: column; align-items: stretch; margin-top: 21px; padding: 28px 23px 28px; gap: 28px; border-radius: 23px; min-height: 0; box-shadow: 4px 5px var(--ink); }
  .discover-intro > .eyebrow { font-size: 8px; line-height: 1.7; letter-spacing: .08em; }
  .discover-intro h1 { font-size: clamp(39px, 10.3vw, 61px); line-height: 1.05; margin: 18px 0 17px; }
  .discover-intro > p { font-size: 12px; margin-bottom: 20px; }
  .discover-intro .actions { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
  .discover-intro .button { font-size: 10px; padding: 10px 12px; min-height: 43px; gap: 10px; }
  .discover-intro .text-link { font-size: 9px; }
  .real-counts { flex-direction: row; gap: 19px; font-size: 8px; padding-top: 20px; }
  .real-counts strong { font-size: 12px; }
  .universe-stage { height: 268px; max-width: 385px; width: 100%; align-self: center; margin-top: 5px; }
  .crew-sun { width: 240px; height: 240px; right: 13px; top: 10px; box-shadow: 8px 8px #5731a6; }
  .universe-sunny { left: -9%; width: 52%; bottom: 12%; }
  .universe-red { left: 5%; width: 77%; bottom: -10%; }
  .universe-hop { right: -10%; width: 49%; }
  .crew-stamp { left: 0; top: -9px; font-size: 7px; padding: 8px 10px; }
  .crew-stamp b { font-size: 21px; }
  .crew-ticket { left: -6px; bottom: -14px; font-size: 9px; }
  .crew-ticket b { font-size: 18px; margin-left: 9px; }
  .spark-one { left: -26px; top: 69px; font-size: 65px; }
  .spark-two { top: -3px; right: -7px; font-size: 40px; }
  .spark-three { right: -4px; bottom: -20px; font-size: 40px; }
  .daily-lane { margin: 0 0 36px; }
  .daily-lane .daily-feature { display: block; padding: 20px; border-radius: 18px; }
  .daily-lane .daily-feature-top { font-size: 9px; gap: 9px; flex-direction: row; }
  .feature-label { font-size: 8px; }
  .daily-lane .daily-feature-main { grid-template-columns: 1fr 88px; gap: 9px; margin: 14px 0 18px; }
  .daily-lane .daily-feature h2 { font-size: 25px; }
  .daily-lane .daily-feature p { font-size: 10px; }
  .daily-lane .daily-stack { height: 110px; }
  .daily-lane .feature-actions { flex-direction: row; justify-content: space-between; gap: 9px; font-size: 9px; }
  .daily-lane .feature-actions .button { font-size: 10px; padding: 10px 11px; min-height: 42px; gap: 6px; }
  .hub-section-heading h2 { font-size: 27px; }
  .category-tabs button { font-size: 9px; padding-inline: 12px; }
  .play-grid, .catalogue-grid { gap: 17px 13px; }
  .game-art, .game-art.art-sudoku, .catalogue-grid .game-art { height: 152px; }
  .game-art.with-cast > div:not(.card-cast) { top: 12px; left: -27px; scale: .49; }
  .card-cast img { width: 105%; height: 96%; }
  .card-cast.cast-duo img { width: 70%; }
  .card-cast.cast-duo img + img { width: 62%; right: -2px; }
  .play-card-copy { padding: 13px 11px; }
  .play-card h3 { font-size: 18px; line-height: 1.1; min-height: 40px; margin: 9px 0 7px; }
  .play-card p, .catalogue-grid .play-card p { font-size: 10px; min-height: 67px; }
  .card-meta { font-size: 8px; }
  .card-play { font-size: 9px; padding: 6px 9px; }
  .card-detail { width: 23px; line-height: 22px; }
  .hub-heading { padding: 25px 22px; margin-top: 22px; min-height: 200px; gap: 0; }
  .hub-heading h1 { font-size: 34px; max-width: 230px; margin-top: 15px; }
  .hub-heading p { font-size: 12px; max-width: 255px; }
  .heading-character { position: absolute; width: 105px; height: 124px; right: -17px; bottom: 6px; opacity: .25; }
  .heading-copy { width: 100%; }
  .hub-heading .eyebrow { font-size: 8px; }
  .board-character { width: 87px; height: 100px; }
  .board-preview-empty { padding: 20px 17px; gap: 13px; }
  .board-preview-empty h3 { font-size: 17px; }
  .how-card p, .world-links p { font-size: 11px; }
  .board-title-banner { padding: 20px; }
  .board-title-banner h2 { font-size: 26px; }
  .board-filter .button { padding-inline: 12px; }
  .ranking-main > .hub-empty { min-height: 350px; }
  .hub-empty .empty-character { width: 106px; height: 116px; }
  .game-detail-visual > .game-art { height: 245px; }
  .detail-character { width: 158px; height: 199px; right: -7px; }
  .game-detail-visual > .game-art > div { transform: rotate(-9deg) translateX(-20px); scale: 1.6; }
  .game-detail-copy .actions { flex-wrap: wrap; }
  footer { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .card-cast img { transition: none; }
  .play-card:hover, .play-card:hover .card-cast img { transform: none; }
}

/* New scenes are decorative mascots; actual rankings remain in the data below. */
.hub-heading.scene-heading { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 28px; min-height: 280px; }
.scene-heading .heading-copy { min-width: 0; }
.scene-heading .heading-scene { display: block; width: 100%; max-width: 450px; height: auto; justify-self: end; object-fit: contain; }
.scene-heading h1 { overflow-wrap: anywhere; }
.crew-carousel { min-width: 0; width: 100%; align-self: center; color: #fff; }
.carousel-kicker { display: block; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff1bb; margin-bottom: 12px; }
.crew-carousel-track { display: flex; position: relative; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; border-radius: 18px; }
.crew-carousel[data-enhanced] .crew-carousel-track { scrollbar-width: none; }
.crew-carousel[data-enhanced] .crew-carousel-track::-webkit-scrollbar { display: none; }
.crew-carousel-track:focus-visible { outline: 3px solid #ffe77c; outline-offset: -3px; }
.crew-slide { flex: 0 0 100%; min-width: 0; margin: 0; padding: 7px 7px 13px; scroll-snap-align: start; scroll-snap-stop: always; box-sizing: border-box; }
.crew-slide img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: contain; user-select: none; }
.crew-slide figcaption { text-align: center; font-size: clamp(17px,1.6vw,24px); line-height: 1.25; color: #fff; font-weight: 700; margin-top: 14px; }
.crew-carousel-controls { display: grid; grid-template-columns: 44px minmax(0,104px) 44px; gap: 16px; align-items: center; justify-content: center; margin-top: 12px; }
.crew-carousel-controls[hidden] { display: none; }
.crew-carousel-arrow { display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 2px solid #30213f; border-radius: 50%; background: #fffaf0; color: #30213f; font: inherit; font-size: 23px; cursor: pointer; box-shadow: 2px 3px #30213f; }
.crew-carousel-arrow:hover { background: #ffe77c; }
.crew-carousel-arrow:focus-visible { outline: 3px solid #ffe77c; outline-offset: 4px; }
.crew-carousel-progress { text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.crew-carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.crew-carousel-dots i { width: 7px; height: 7px; border-radius: 8px; background: #ffffff70; }
.crew-carousel-dots i[data-active] { width: 23px; background: #ffe77c; }
@media (max-width:700px) {
  .hub-heading.scene-heading { display: flex; flex-direction: column; align-items: stretch; gap: 18px; padding: 25px 22px 14px; }
  .scene-heading h1, .scene-heading p { max-width: none; }
  .scene-heading .heading-scene { width: min(100%,330px); align-self: center; }
  .crew-carousel { max-width: 460px; justify-self: center; }
  .crew-carousel-controls { gap: 12px; }
}