/* =====================================================
   FEED THE TREAT - HALLOWEEN COMPETITION PAGE
   Loaded only by feed-the-treat-competition.html
   Place AFTER main.css / logo-fix.css / responsive.css
   =====================================================

   COLOUR HIERARCHY (read before editing):
   The page stays predominantly dark purple and low contrast.
   Purple is the ENVIRONMENT colour, not a UI accent - no bright
   purple cards, no neon glows. White carries the typography, the CTA
   keeps the site-wide button treatment from main.css, and orange/gold
   appear only as small details. The playable game is the strongest focal
   point on the page; nothing should out-shout it.
   ===================================================== */

:root {
   /* CORE */
   --page-bg: #120D23;
   --page-bg-alt: #161027;

   /* HEADER */
   --header-bg: #120D23;
   --header-border: #332743;

   /* HERO */
   --hero-dark: #120D23;
   --hero-purple: #1D1330;
   --hero-mid: #2F1C46;
   --hero-light: #341E4A;

   /* PROMO SECTION */
   --promo-top: #2F1C46;
   --promo-bottom: #241637;

   /* FOOTER */
   --footer-bg: #0D0919;
   --footer-border: #2A2035;

   /* TEXT */
   --text-primary: #F8F7FA;
   --text-secondary: #D8D2E0;
   --text-muted: #9D94AA;

   /* HALLOWEEN ACCENTS */
   --orange: #FF9A4A;
   --gold: #DCA63B;
   --halloween-purple: #C58BD8;

   /* GAME */
   --game-border: #6D4A7F;
   --game-glow: #4B2A62;

   /* FEATURE ROW */
   --feature-divider: #4A3657;
   --feature-icon-bg: #241637;
   --feature-icon-border: #644375;
}

/* The site's body is #1d1e24; this page runs on the Halloween dark. */
body {
   background-color: var(--page-bg);
}

/* ===========================
   HEADER
   =========================== */

/* Almost-black purple bar. Opaque because the hero behind it is a
   photo - the site-wide transparent header would let the art bleed
   up behind the nav. No decoration in here by design. */
.header {
   background-color: var(--header-bg);
   border-block-end: 1px solid var(--header-border);
}

.header .navbar__list .navbar__item > a {
   color: var(--text-primary);
}

/* ===========================
   HERO
   =========================== */

/* The artwork spans the hero AND the game embed as one continuous scene,
   so the castle sits behind the game rather than stopping above it.
   The gradient is deliberately heavy - the photo is environment, not a
   bright purple panel - and closes to solid at the bottom so it meets
   the footer cleanly. */
.ftc-stage {
   position: relative;
   margin-top: 100px; /* clears the fixed header */
   background-color: var(--hero-dark);
   background-image:
      linear-gradient(180deg,
         rgba(18, 13, 35, 0.80) 0%,
         rgba(29, 19, 48, 0.72) 30%,
         rgba(47, 28, 70, 0.66) 55%,
         rgba(29, 19, 48, 0.82) 80%,
         rgba(18, 13, 35, 0.96) 94%,
         var(--hero-dark) 100%),
      url('../images/games/feed-the-treat/feed-the-treat-bg.png');
   background-repeat: no-repeat;
   background-position: center top;
   background-size: cover;
   overflow: hidden;
}

.ftc-hero {
   position: relative;
   padding: 70px 0 70px;
   background: transparent;
   text-align: center;
}

.ftc-hero__tag {
   display: inline-block;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--halloween-purple);
   margin-bottom: 16px;
}

.ftc-hero h1 {
   font-size: clamp(46px, 7vw, 78px);
   font-weight: 700;
   line-height: 1.05;
   margin-bottom: 20px;
   text-transform: none;
   color: var(--text-primary);
}

/* WHITE -> ORANGE -> purple background. Orange appears once, here. */
.ftc-hero h1 em {
   font-style: normal;
   color: var(--orange);
}

.ftc-hero p.desc {
   font-size: 19px;
   line-height: 1.7;
   /* 660px broke "hamper!" onto a third line. Two lines need >=700px, so
      740 keeps ~40px of headroom for copy tweaks rather than sitting on
      the threshold. The hero column caps it below this on narrow screens. */
   max-width: 740px;
   margin: 0 auto;
   color: var(--text-secondary);
   text-transform: none;
}

/* ===========================
   GAME EMBED
   =========================== */

/* Transparent - the shared .ftc-stage background shows through. */
.ftt-embed-wrap {
   padding: 10px 0 70px;
   background: transparent;
}

/* The game gets its own boundary so it reads as the focal point -
   a defined edge and a restrained glow, not a neon halo. */
.ftt-embed {
   position: relative;      /* anchors the phone poster and nothing else */
   width: 100%;
   max-width: 849px;          /* native stage width */
   margin-inline: auto;
   aspect-ratio: 849 / 487;   /* native ratio - without this it letterboxes */
   background: var(--page-bg);
   border-radius: 18px;
   overflow: hidden;
   border: 2px solid var(--game-border);
   box-shadow: 0 0 30px rgba(75, 42, 98, 0.35);
}

.ftt-embed iframe {
   width: 100%;
   height: 100%;
   display: block;
   border: 0;
}

/* ---------------------------------------------------
   PHONE: POSTER -> FULL-SCREEN PLAY
   ---------------------------------------------------
   Desktop plays inline and never sees either control.
   The poster is revealed in the (pointer: coarse) block at
   the bottom of this file; the exit button is keyed off
   .is-fullscreen instead, so that turning the phone sideways
   mid-game cannot take the way out away. */
.ftt-poster,
.ftt-exit {
   display: none;
   font-family: inherit;   /* buttons do not inherit it on their own */
}

/* Covers the inline iframe until tapped. The art is the game's own
   title screen, so the poster reads as the game rather than as an ad. */
.ftt-poster {
   position: absolute;
   inset: 0;
   width: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 14px;
   padding: 20px;
   border: 0;
   cursor: pointer;
   text-align: center;
   background-color: var(--page-bg);
   background-image:
      linear-gradient(180deg, rgba(18, 13, 35, 0.55), rgba(18, 13, 35, 0.75)),
      url('../images/games/feed-the-treat/hero.png');
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
}

.ftt-poster__play {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px 28px;
   border-radius: 999px;
   background: var(--orange);
   color: #1A1030;
   font-size: 17px;
   font-weight: 700;
}

.ftt-poster__hint {
   font-size: 13px;
   line-height: 1.5;
   color: var(--text-secondary);
}

/* The way back out. Sits clear of the notch on a landscape phone, which
   is where players will be once the game's rotate prompt has done its job. */
.ftt-exit {
   position: fixed;
   top: max(12px, env(safe-area-inset-top));
   left: max(12px, env(safe-area-inset-left));
   z-index: 2147483001;   /* one above the overlay it sits on */
   align-items: center;
   gap: 6px;
   padding: 9px 16px;
   border: 1px solid rgba(248, 247, 250, 0.35);
   border-radius: 999px;
   background: rgba(18, 13, 35, 0.75);
   color: var(--text-primary);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
}

/* Once the overlay is open these two are driven by the class alone, never
   by a breakpoint: a phone in landscape is ~930px wide, so a width-based
   rule would hide the back button at exactly the moment the game asks the
   player to rotate. */
.ftt-embed.is-fullscreen .ftt-poster {
   display: none;
}

.ftt-embed.is-fullscreen .ftt-exit:not([hidden]) {
   display: inline-flex;
}

/* The overlay itself. aspect-ratio and max-width both have to be undone -
   they are what keeps the inline embed at the game's native shape - and
   transform is reset because AOS can leave one behind on this element,
   which would drag the fixed layer off-screen. */
.ftt-embed.is-fullscreen {
   position: fixed;
   inset: 0;
   /* Above everything the template puts on this page - the header sits at 9,
      the mobile menu and the scroll-to-top button at 9999. */
   z-index: 2147483000;
   width: 100%;
   max-width: none;
   height: 100dvh;
   margin: 0;
   aspect-ratio: auto;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   transform: none !important;
}

/* Stops the page scrolling underneath the overlay, and takes down the
   fixed furniture that would otherwise float over the game. The native
   Fullscreen API is requested too where the browser has one (everything
   except iPhone Safari, which has none) - that is what hides the URL bar;
   these rules are what the page can do on its own. */
body.ftt-playing {
   overflow: hidden;
}

body.ftt-playing .header,
body.ftt-playing .progress-wrap,
body.ftt-playing .catuma-cookie-banner,
body.ftt-playing .mobile-menu {
   display: none !important;
}

/* In native fullscreen the element is already the whole screen - let it be
   rather than fighting it with our own fixed box. */
.ftt-embed.is-fullscreen:fullscreen {
   height: 100%;
}

/* ===========================
   FOOTER
   =========================== */

/* Darkest band on the page, closing the vertical rhythm:
   hero/game stage #120D23 -> footer #0D0919 */
.ftc-footer {
   margin-top: 0;             /* main.css adds 126px, which would show a lighter band */
   background-color: var(--footer-bg);
   background-image: none !important; /* overrides any [data-background] JS */
   border-block-start: 1px solid var(--footer-border);
}

.ftc-footer .left-thumb,
.ftc-footer .right-thumb,
.ftc-footer .arrow {
   display: none;
}

.ftc-footer h6 {
   color: var(--text-primary);
}

.ftc-footer p,
.ftc-footer a {
   color: #B8B0C2;
}

.ftc-footer .footer__copyright p {
   color: #756B80;
}

/* ===========================
   RESPONSIVE
   =========================== */

@media (max-width: 991px) {
   .ftc-hero {
      padding: 90px 0 50px;
   }
}

/* Phones and small tablets held in the hand. The same test is repeated in
   the page's inline script - change one, change the other.

   Two arms, because a phone is small in ONE dimension at a time: upright it
   is under 900px wide, sideways it is under 560px tall. A single max-width
   test would drop out the moment the player rotates.

   Deliberately a pointer test rather than size alone: a narrow desktop
   window should keep the inline game, since there is nothing to rotate. */
@media (pointer: coarse) and (max-width: 900px),
       (pointer: coarse) and (max-height: 560px) {
   .ftt-poster {
      display: flex;
   }

   /* 46px was the old floor and it crowds a 390px screen. */
   .ftc-hero h1 {
      font-size: clamp(36px, 10vw, 78px);
   }

   .ftc-hero p.desc {
      font-size: 17px;
   }
}