.page-reindeer-games {
  --rg-yellow: #ffdf00;
  --rg-paper: #f2efe8;
  --rg-shell: min(100% - 112px, 1344px);
  background: #07090b;
}

.rg-shell { width: var(--rg-shell); margin-inline: auto; }
.page-reindeer-games h1, .page-reindeer-games h2, .page-reindeer-games h3 { text-transform: uppercase; font-weight: 800; }
.page-reindeer-games .site-header { position: relative; background: #080a0c; }
.page-reindeer-games .site-nav a[aria-current='page'] { color: var(--rg-yellow); }
.page-reindeer-games .nav-action { background: var(--rg-yellow); color: #080a0c; border-color: var(--rg-yellow); }
.page-reindeer-games .button { min-height: 48px; border-radius: 0; padding: .7em 1.5em; font-family: var(--display); font-size: clamp(1rem, 1.45vw, 1.4rem); font-weight: 700; line-height: 1.2; letter-spacing: 0; }
.page-reindeer-games .button--signal { background: var(--rg-yellow); border-color: var(--rg-yellow); }
.page-reindeer-games .button--outline { border: 1px solid #f2efe8; background: rgba(7,9,11,.45); }
.page-reindeer-games .button--outline:hover,
.page-reindeer-games .button--outline:focus-visible { background: var(--rg-paper); color: #07090b; }
.page-reindeer-games :focus-visible { outline-color: var(--rg-yellow); outline-offset: 5px; }
.page-reindeer-games .rg-practice .button:focus-visible,
.page-reindeer-games .game-dialog__body .button:focus-visible { outline-color: #07090b; }

.rg-hero { position: relative; isolation: isolate; min-height: 440px; height: clamp(440px, 34vw, 620px); overflow: hidden; }
.rg-hero__media { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.rg-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgba(4,7,10,.62),rgba(4,7,10,.25) 42%,transparent 67%),linear-gradient(0deg,rgba(4,7,10,.5),transparent 28%); }
.rg-hero__inner { display: flex; height: 100%; align-items: center; padding-block: 28px; }
.rg-hero__copy { width: 55%; }
.rg-hero h1 { font-size: clamp(5.75rem, 9.6vw, 10rem); line-height: .79; letter-spacing: -.012em; text-wrap: initial; }
.rg-hero h1 > span { display: block; }
.rg-dot { color: var(--rg-yellow); }
.rg-hero__edition { font-family: var(--display); font-size: clamp(3.1rem, 4.95vw, 5.2rem); line-height: 1; font-weight: 800; color: #d0d4d6; text-transform: uppercase; margin-top: .17em; letter-spacing: -.006em; }
.rg-hero__intro { margin-top: .42em; font-size: clamp(.95rem, 1.48vw, 1.4rem); line-height: 1.45; color: #fff; }
.rg-hero .button-row { margin-top: 1.25rem; gap: .8rem; }

.rg-facts { background: #080b0d; border-block: 1px solid #1f2427; }
.rg-facts__inner { display: grid; grid-template-columns: .86fr 1.37fr 1.1fr; min-height: 80px; align-items: center; padding-block: 14px; }
.rg-fact { display: flex; align-items: center; gap: 18px; padding-inline: 30px; border-left: 1px solid #65696a; }
.rg-fact:first-child { padding-left: 20px; border-left: 0; }
.rg-fact svg { width: 28px; height: 28px; flex: 0 0 28px; stroke: #f2efe8; fill: none; stroke-width: 1.6; }
.rg-fact strong { display: block; font-family: var(--display); font-size: clamp(1.1rem, 1.8vw, 1.8rem); font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.rg-fact small { display: block; margin-top: 4px; color: #ced0d0; font-size: .73rem; line-height: 1.4; }

.rg-games { background: var(--rg-paper); color: #07090b; padding-block: 26px 28px; }
.rg-games__heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 16px; }
.rg-games h2 { font-size: clamp(2.5rem, 4.75vw, 5rem); line-height: .95; letter-spacing: -.01em; }
.rg-games__hint { font-size: .82rem; line-height: 1.3; padding-bottom: .25em; color: #44494b; }
.rg-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px 22px; }
.rg-game-card { display: block; border: 0; padding: 0; background: #070b0e; color: #fff; cursor: pointer; text-align: left; min-width: 0; border-radius: 0; appearance: none; transition: box-shadow .18s ease, transform .18s ease; }
.rg-game-card:focus-visible { outline: 3px solid #07090b; box-shadow: 0 0 0 7px var(--rg-yellow); }
.rg-art { position: relative; display: block; overflow: hidden; aspect-ratio: 294 / 160; isolation: isolate; }
.rg-art > img { position: absolute; width: 348.29932%; max-width: none; height: auto; left: calc(-1 * var(--art-x)); top: calc(-1 * var(--art-y)); pointer-events: none; }
.rg-art--grinch { --art-x: 20.06803%; --art-y: 323.75%; }
.rg-art--basketball { --art-x: 125.5102%; --art-y: 323.75%; }
.rg-art--antlers { --art-x: 228.23129%; --art-y: 323.75%; }
.rg-art--parking { --art-x: 20.06803%; --art-y: 454.375%; }
.rg-art--ornaments { --art-x: 125.5102%; --art-y: 454.375%; }
.rg-art--lights { --art-x: 228.23129%; --art-y: 454.375%; }
.rg-game-card__caption { display: flex; align-items: center; gap: 14px; min-height: 49px; padding: 8px 12px; }
.rg-game-card__name { font: 700 clamp(1rem, 1.72vw, 1.7rem)/1.08 var(--display); text-transform: uppercase; }
.rg-game-card__arrow { color: var(--rg-yellow); margin-left: auto; font-size: 1.2rem; }

.rg-prize { background: radial-gradient(ellipse at 28% 60%,#242626 0, #111415 34%, #07090b 75%); overflow: hidden; }
.rg-prize__inner { display: grid; grid-template-columns: 1.03fr 1fr; align-items: center; gap: 50px; min-height: 345px; }
.rg-prize__art { position: relative; overflow: hidden; aspect-ratio: 470 / 256; margin-left: -56px; width: calc(100% + 56px); }
.rg-prize__art img { position: absolute; width: 217.87234%; max-width: none; height: auto; left: 0; top: -367.96875%; }
.rg-prize h2 { font-size: clamp(3.7rem, 6vw, 6.2rem); line-height: .95; letter-spacing: -.018em; }
.rg-prize p { margin-top: 18px; font-size: clamp(1rem, 1.8vw, 1.65rem); color: #fff; }

.rg-scoring { padding: 24px 0 22px; background: var(--rg-paper); color: #080a0c; text-align: center; }
.rg-scoring h2 { font-size: clamp(2.4rem, 4.2vw, 4.2rem); line-height: 1; }
.rg-scoring__steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 26px auto 22px; }
.rg-scoring__step { display: flex; gap: 20px; align-items: center; padding-inline: 36px; text-align: left; border-left: 1px solid #aeb0ad; }
.rg-scoring__step:first-child { border-left: 0; padding-left: 24px; }
.rg-scoring__step svg { flex: 0 0 35px; width: 35px; height: 35px; fill: none; stroke: currentColor; stroke-width: 2.3; }
.rg-scoring__step h3 { font-family: var(--display); font-size: clamp(1.2rem, 1.6vw, 1.7rem); line-height: 1.1; text-transform: none; font-weight: 700; }
.rg-scoring__step p { margin-top: 5px; font-size: .8rem; line-height: 1.4; color: #464b4d; }
.rg-scoring__note { margin-inline: auto; font-size: .78rem; color: #484c4e; }

.rg-practice { background: var(--rg-yellow); color: #07090b; padding-block: 28px; position: relative; overflow: hidden; }
.rg-practice::after { content: ''; position: absolute; z-index: 0; width: 460px; height: 260px; right: -60px; bottom: -175px; transform: rotate(-25deg); background: repeating-linear-gradient(0deg,rgba(7,9,11,.6) 0 3px,transparent 3px 8px,rgba(7,9,11,.2) 8px 11px,transparent 11px 17px); opacity: .6; pointer-events: none; }
.rg-practice__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 38px; }
.rg-practice h2 { font-size: clamp(3rem, 5.45vw, 5.8rem); line-height: .9; letter-spacing: -.015em; }
.rg-practice p { font-family: var(--display); font-size: clamp(1rem,1.6vw,1.55rem); margin-top: 10px; line-height: 1.3; }
.rg-practice .button { min-width: 280px; min-height: 58px; }
.page-reindeer-games .partner-strip { border-bottom: 1px solid #23272a; padding-block: 15px; }
.page-reindeer-games .partner-strip__inner { min-height: 55px; }
.rg-footer { padding-block: 20px; background: #07090b; color: #afb4b8; }
.rg-footer__inner { display: flex; align-items: center; gap: 35px; justify-content: space-between; }
.rg-footer__logo { width: 108px; height: auto; }
.rg-footer__motto { font-family: var(--display); font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; }
.rg-footer nav { display: flex; flex-wrap: wrap; gap: 20px; font-size: .78rem; }
.rg-footer a { text-decoration: none; }
.rg-footer a:hover { color: var(--rg-yellow); }

body.game-dialog-open { overflow: hidden; }
.game-dialog { width: min(740px,calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 40px); margin: auto; padding: 0; border: 1px solid #51575b; border-radius: 0; background: var(--rg-paper); color: #0a0d0f; overscroll-behavior: contain; box-shadow: 0 24px 100px #0009; color-scheme: light; }
.game-dialog::backdrop { background: rgba(0,3,6,.84); backdrop-filter: blur(5px); }
.game-dialog__topbar { position: sticky; top: 0; z-index: 3; background: #070b0e; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; color: #fff; }
.game-dialog__topbar span { font: 700 1.05rem/1.2 var(--display); letter-spacing: .03em; }
.game-dialog__topbar > span { font-size: .72rem; }
.game-dialog__close { display: inline-flex; gap: 10px; justify-content: center; align-items: center; min-width: 86px; min-height: 44px; border: 1px solid #c5cbcd; background: #070b0e; color: #fff; cursor: pointer; font-size: .9rem; }
.game-dialog__close span { font-size: 1.65rem; font-weight: 400; line-height: .7; }
.game-dialog__body { padding: 28px 34px 34px; }
.game-dialog__body h2 { font-size: clamp(2.5rem,5vw,3.8rem); line-height: .97; margin-bottom: 18px; text-wrap: initial; }
.game-dialog__body > p { font-size: 1rem; line-height: 1.7; }
.game-dialog__body h3 { font-size: 1.6rem; margin: 26px 0 10px; }
.game-dialog__body ol { padding-left: 22px; margin: 0; }
.game-dialog__body li { padding-left: 5px; margin-block: 9px; line-height: 1.6; }
.game-dialog__score { border-left: 5px solid #070b0e; padding: 16px 20px; margin-top: 24px; background: #ffdf00; }
.game-dialog__score h3 { margin: 0 0 8px; }
.game-dialog__score p { font-size: .95rem; line-height: 1.65; }
.game-dialog__notice { padding-top: 22px; font-size: .84rem !important; color: #495056; }
.game-dialog__body .button { margin-top: 22px; color: #fff; }
.rg-noscript { padding: 20px; text-align: center; background: #ffdf00; color: #080a0c; }

@media (hover:hover) { .rg-game-card:hover { transform: translateY(-3px); box-shadow: 0 7px 0 #ffdf00; } .rg-game-card:hover .rg-game-card__arrow { transform: translateX(3px); } }
@media (min-width:1181px) and (max-width:1350px) { .page-reindeer-games .site-nav { gap: 16px; } .page-reindeer-games .site-nav a { font-size: .75rem; } }
@media (max-width:1180px) { .page-reindeer-games .site-header { position: sticky; } .page-reindeer-games { --rg-shell: min(100% - 64px,1344px); } .rg-hero { height: 470px; } .rg-hero__copy { width: 60%; } .rg-hero h1 { font-size: clamp(5.7rem,10.5vw,8.4rem); } .rg-fact { gap: 12px; padding-inline: 20px; } .rg-prize__inner { gap: 25px; min-height: 310px; } .rg-prize__art { margin-left: -32px; width: calc(100% + 32px); } .rg-scoring__step { gap: 12px; padding-inline: 22px; } }
@media (max-width:820px) { .rg-hero { height: 490px; } .rg-hero__copy { width: 70%; } .rg-hero__edition { font-size: 3.55rem; } .rg-hero__media { object-position: 60% center; } .rg-facts__inner { grid-template-columns: 1fr 1.4fr; gap: 14px 0; padding-block: 18px; } .rg-fact:first-child { padding-left: 0; } .rg-fact:last-child { grid-column: 1 / -1; border-left: 0; padding-left: 0; } .rg-fact:last-child small { display: inline; margin: 0 0 0 12px; } .rg-fact:last-child strong { display: inline; } .rg-grid { gap: 16px; } .rg-game-card__caption { gap: 9px; padding-inline: 9px; } .rg-game-card__name { font-size: 1.05rem; } .rg-game-card__arrow { display: none; } .rg-prize__inner { gap: 24px; min-height: 285px; } .rg-prize h2 { font-size: 3.6rem; } .rg-prize p { font-size: 1rem; margin-top: 12px; } .rg-scoring__step { gap: 12px; padding-inline: 16px; } .rg-scoring__step:first-child { padding-left: 0; } .rg-scoring__step svg { flex-basis: 28px; width: 28px; height: 28px; } .rg-practice__inner { gap: 24px; } .rg-practice .button { min-width: 210px; } .rg-footer__motto { display: none; } }
@media (max-width:620px) {
  .page-reindeer-games { --rg-shell: calc(100% - 36px); }
  .rg-hero { min-height: 670px; height: min(790px,calc(100svh - 65px)); max-height: 790px; }
  .rg-hero__inner { align-items: flex-start; padding-top: 28px; }
  .rg-hero__copy { width: 100%; }
  .rg-hero h1 { font-size: clamp(5.5rem,20vw,7.65rem); line-height: .8; }
  .rg-hero__edition { font-size: clamp(2.9rem,10.7vw,4rem); margin-top: .18em; }
  .rg-hero__intro { font-size: .94rem; margin-top: 12px; }
  .rg-hero__media { height: 58%; top: auto; bottom: 0; object-position: 71% 58%; }
  .rg-hero::after { background: linear-gradient(180deg,#080d14 0%,#080d14 34%,rgba(8,13,20,.86) 42%,transparent 67%),linear-gradient(0deg,#080b0d 0%,transparent 22%); }
  .rg-hero .button-row { flex-wrap: nowrap; margin-top: 18px; gap: 10px; }
  .rg-hero .button { flex: 1; padding: 13px 10px; min-width: 0; font-size: 1.07rem; min-height: 46px; text-align: center; justify-content: center; }
  .rg-facts__inner { grid-template-columns: 1fr; gap: 17px; padding-block: 20px; }
  .rg-fact, .rg-fact:first-child { padding: 0; border: 0; gap: 15px; }
  .rg-fact strong { font-size: 1.45rem; }
  .rg-fact svg { width: 25px; height: 25px; flex-basis: 25px; }
  .rg-fact:last-child { grid-column: auto; }
  .rg-fact:last-child strong { display: block; }
  .rg-fact:last-child small { display: block; margin: 4px 0 0; font-size: .73rem; }
  .rg-games { padding-block: 28px 30px; }
  .rg-games__heading { display: block; margin-bottom: 18px; }
  .rg-games h2 { font-size: clamp(2.3rem,9.1vw,3.5rem); }
  .rg-games__hint { margin-top: 12px; font-size: .8rem; }
  .rg-grid { grid-template-columns: 1fr; gap: 19px; }
  .rg-game-card__caption { min-height: 51px; gap: 14px; padding-inline: 13px; }
  .rg-game-card__name { font-size: 1.48rem; }
  .rg-game-card__arrow { display: block; }
  .rg-prize__inner { grid-template-columns: 1fr; gap: 0; padding-bottom: 36px; }
  .rg-prize__art { width: calc(100% + 36px); margin-left: -18px; }
  .rg-prize__copy { padding-top: 8px; }
  .rg-prize h2 { font-size: clamp(3.7rem,15vw,5.3rem); }
  .rg-prize p { font-size: 1.05rem; margin-top: 15px; }
  .rg-scoring { padding: 30px 0; text-align: left; }
  .rg-scoring h2 { font-size: clamp(2.2rem,9.5vw,3.4rem); }
  .rg-scoring__steps { grid-template-columns: 1fr; gap: 22px; margin-block: 27px; }
  .rg-scoring__step, .rg-scoring__step:first-child { padding: 0; border: 0; gap: 20px; }
  .rg-scoring__step svg { width: 34px; height: 34px; flex-basis: 34px; }
  .rg-scoring__step h3 { font-size: 1.5rem; }
  .rg-scoring__step p { font-size: .87rem; }
  .rg-scoring__note { font-size: .8rem; line-height: 1.7; }
  .rg-practice { padding-block: 32px; }
  .rg-practice__inner { flex-direction: column; align-items: stretch; gap: 24px; }
  .rg-practice h2 { font-size: clamp(2.95rem,11.9vw,4.6rem); }
  .rg-practice p { font-size: 1.18rem; line-height: 1.5; }
  .rg-practice .button { width: 100%; }
  .rg-footer__inner { align-items: flex-start; gap: 24px; }
  .rg-footer nav { gap: 12px 18px; justify-content: flex-end; font-size: .77rem; }
  .rg-footer__logo { width: 95px; min-width: 95px; }
  .game-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .game-dialog__body { padding: 24px 20px 28px; }
  .game-dialog__body h2 { font-size: 2.6rem; }
  .game-dialog__body > p, .game-dialog__body li { font-size: .93rem; }
  .game-dialog__topbar { padding: 8px 12px; }
  .game-dialog__score { padding: 15px; }
}
@media (max-width:360px) { .rg-hero { min-height: 640px; } .rg-hero__intro { font-size: .84rem; } .rg-hero .button { font-size: .94rem; } .rg-game-card__name { font-size: 1.25rem; } .rg-footer__inner { flex-direction: column; } .rg-footer nav { justify-content: flex-start; } }
@media (prefers-reduced-motion:reduce) { .rg-game-card, .rg-game-card__arrow { transition: none; transform: none !important; } }
