/* ===== FONTS — loaded via Typekit in HTML ===== */
/* ===== VARIABLES ===== */
:root {
--bg-navy: #002844;
--bg-black: #000000;
--gold-1: #c8932c;
--gold-2: #f8f2c8;
--gold-3: #b78014;
--gold-4: #f3d995;
--gold-5: #b4781c;
--gold-accent: #e3a942;
--text-white: #ffffff;
--font-main: "balboa", sans-serif;
--font-condensed: "balboa-condensed", sans-serif;
--font-extra-condensed: "balboa-extra-condensed", sans-serif;
}
/* ===== RESET ===== */
*, *::before, *::after {
box-sizing: border-box;
font-family: inherit;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: var(--font-main);
font-weight: 300;
overflow: hidden;
}
body.app {
background: var(--bg-navy);
color: var(--text-white);
}
.app-shell {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
/* ===== UTILITY ===== */
.hidden { display: none !important; }
/* ===== LANDING PAGE (Setup Connection) ===== */
.landing-page {
width: 100%;
height: 100vh;
background: var(--bg-navy);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30px;
}
.landing-logo {
width: 200px;
height: auto;
}
.landing-buttons {
display: flex;
flex-direction: column;
gap: 16px;
width: 280px;
}
.btn-gold {
display: block;
padding: 14px 32px;
font-family: var(--font-main);
font-size: 40px;
color: var(--text-white);
background: linear-gradient(90deg, var(--gold-1), var(--gold-4), var(--gold-3));
border: none;
border-radius: 8px;
text-align: center;
text-decoration: none;
cursor: pointer;
letter-spacing: 2px;
transition: filter 0.15s;
}
.btn-gold:hover { filter: brightness(1.1); }
/* ===== PAIRING SCREENS ===== */
/* --- Tablet Pairing --- */
.pairing-screen {
width: 100%;
height: 100vh;
background: var(--bg-navy);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
padding: 40px;
}
.pairing-screen .pairing-logo {
width: 200px;
height: auto;
margin-bottom: 10px;
}
.pairing-screen .pairing-title {
font-size: 40px;
text-align: center;
letter-spacing: 1px;
max-width: 600px;
line-height: 1.2;
}
.pairing-screen .pairing-input-row {
display: flex;
flex-direction: column;
gap: 14px;
width: 340px;
align-items: stretch;
}
.pairing-screen .pairing-input {
height: 60px;
font-family: var(--font-main);
font-size: 44px;
letter-spacing: 8px;
text-align: center;
color: var(--gold-accent);
background: transparent;
border: 3px solid var(--gold-accent);
border-radius: 8px;
outline: none;
padding: 0 16px;
}
.pairing-screen .pairing-input::placeholder {
color: rgba(227, 169, 66, 0.4);
}
.pairing-screen .btn-pair {
display: block;
padding: 12px 32px;
font-family: var(--font-main);
font-size: 40px;
color: var(--text-white);
background: linear-gradient(90deg, var(--gold-1), var(--gold-4), var(--gold-3));
border: none;
border-radius: 8px;
cursor: pointer;
letter-spacing: 2px;
text-align: center;
}
/* --- Screen/TV Pairing --- */
.screen-pairing {
width: 100%;
height: 100vh;
background: var(--bg-navy);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
}
.screen-pairing .pairing-logo {
width: 240px;
height: auto;
}
.screen-pairing .pairing-instruction {
font-size: 40px;
letter-spacing: 1px;
text-align: center;
}
.screen-pairing .pairing-code {
font-size: 80px;
font-weight: 700;
color: var(--gold-accent);
letter-spacing: 12px;
}
.screen-pairing .pairing-waiting {
font-size: 29px;
color: var(--text-white);
opacity: 0.8;
letter-spacing: 1px;
}
/* ========================================
BUZZER SCREEN (Gold star landing)
Shown after pairing, before game starts
======================================== */
.buzzer-screen {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
/* Gold background — wide soft metallic bands, scrolls along X axis */
.buzzer-screen .buzzer-bg-gold {
position: absolute;
inset: 0;
z-index: 1;
filter: blur(20px);
/* Extend slightly to avoid blurred edges showing the background */
margin: -30px;
background: repeating-linear-gradient(
90deg,
#c4900e 0%,
#d4a428 8%,
#e8c850 18%,
#f5e098 30%,
#f8ebb0 42%,
#f5e098 54%,
#e4be40 66%,
#d0a020 78%,
#c4900e 100%
);
background-size: 1200px 100%;
animation: scroll-gold-x 6s linear infinite;
}
@keyframes scroll-gold-x {
0% { background-position: 0 0; }
100% { background-position: -1200px 0; }
}
/* Star pattern overlay (pulsating) */
.buzzer-screen .buzzer-star-pattern {
position: absolute;
z-index: 2;
width: 120%;
height: 120%;
object-fit: contain;
}
@keyframes pulse-star {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.06); opacity: 0.88; }
}
.buzzer-screen .buzzer-star-pattern {
animation: pulse-star 2s ease-in-out infinite;
}
/* TV buzzer screen - star is bigger */
.buzzer-screen-tv .buzzer-star-pattern {
width: 70%;
height: 80%;
}
/* Press Buzzer text (iPad only) */
.buzzer-screen .buzzer-text {
position: relative;
z-index: 3;
font-size: 102px;
font-weight: 500;
color: var(--bg-navy);
text-align: center;
line-height: 1;
letter-spacing: 1px;
text-transform: uppercase;
}
/* ========================================
GAME SCREEN (Navy bg + corners + frame)
======================================== */
.game-screen {
width: 100%;
height: 100vh;
background: var(--bg-navy);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Star decorations in corners — behind the golden frame, static position */
.game-screen .stars-top-right {
position: absolute;
top: -3%;
right: -3%;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.game-screen .stars-bottom-left {
position: absolute;
bottom: -3%;
left: -3%;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
/* iPad corner star sizes */
.tablet .game-screen .stars-top-right { width: 50%; }
.tablet .game-screen .stars-bottom-left { width: 60%; }
/* TV corner star sizes */
.screen .game-screen .stars-top-right { width: 32%; }
.screen .game-screen .stars-bottom-left { width: 38%; }
/* Shine sweep across each star */
@keyframes shine-sweep {
0% { left: -100%; }
40% { left: 100%; }
100% { left: 100%; }
}
.game-screen .stars-top-right::after,
.game-screen .stars-bottom-left::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(
105deg,
transparent 30%,
rgba(255,255,255,0.35) 50%,
transparent 70%
);
animation: shine-sweep 3.5s ease-in-out infinite;
pointer-events: none;
}
.game-screen .stars-bottom-left::after {
animation-delay: 1.2s;
}
/* BGT Logo in bottom-right */
.game-screen .bgt-logo {
position: absolute;
z-index: 3;
pointer-events: none;
}
.tablet .game-screen .bgt-logo {
bottom: 12px;
right: 12px;
width: 90px;
}
.screen .game-screen .bgt-logo {
bottom: 20px;
right: 24px;
width: 160px;
}
/* ========================================
GOLDEN FRAME
======================================== */
.golden-frame {
position: relative;
z-index: 1;
overflow: hidden;
background: var(--bg-navy);
}
/* Gold border using pseudo-elements for smooth gradient animation */
.golden-frame::before {
content: '';
position: absolute;
inset: 0;
padding: 17px;
background: linear-gradient(135deg, var(--gold-1), var(--gold-2), var(--gold-3), var(--gold-4), var(--gold-5));
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: 10;
pointer-events: none;
}
/* Animated shimmer on the gold border */
@keyframes shimmer-border {
0% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
100% { background-position: 0% 0%; }
}
.golden-frame::before {
background: linear-gradient(135deg,
var(--gold-1), var(--gold-2), var(--gold-3),
var(--gold-4), var(--gold-5), var(--gold-1),
var(--gold-2), var(--gold-3));
background-size: 300% 300%;
animation: shimmer-border 4s ease-in-out infinite;
}
/* Top & bottom blur edges inside the frame — currently disabled
.golden-frame::after {
content: '';
position: absolute;
inset: 17px;
z-index: 6;
pointer-events: none;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
-webkit-mask-image: linear-gradient(
180deg,
rgba(0,0,0,1) 0%,
rgba(0,0,0,0) 18%,
rgba(0,0,0,0) 82%,
rgba(0,0,0,1) 100%
);
mask-image: linear-gradient(
180deg,
rgba(0,0,0,1) 0%,
rgba(0,0,0,0) 18%,
rgba(0,0,0,0) 82%,
rgba(0,0,0,1) 100%
);
} */
/* iPad golden frame size */
.tablet .golden-frame {
width: 76%;
height: 66%;
}
/* TV golden frame size */
.screen .golden-frame {
width: 60%;
height: 70%;
}
/* Light streaks — 3 layers of vertical stripes moving independently on Y
Container = warm tones (slowest), ::before = cool tones (mid), ::after = accents (fastest)
Each layer is taller than visible and animates translateY with ease-in-out */
/* Light streaks — texture image tiled on Y, scrolls with slow→fast→slow timing */
.golden-frame .texture-container {
position: absolute;
inset: 0;
z-index: 1;
background-size: 250% auto;
background-repeat: repeat-y;
background-position: 0 0;
}
/* Single 5s cycle: slow start → speeds up → slow end.
Uses cubic-bezier for gradual acceleration then deceleration. */
@keyframes streaks-scroll {
0% { background-position: 0 0; }
100% { background-position: 0 -4000vh; }
}
.golden-frame .texture-container.animating {
animation: streaks-scroll 5s linear infinite;
opacity: 1;
transition: opacity 0.3s ease-in;
}
/* Same animation, just much slower — browser blends from fast to slow seamlessly */
.golden-frame .texture-container.decelerating {
animation: streaks-scroll 60s linear infinite;
opacity: 0;
transition: opacity 0.8s ease-out;
}
/* Text overlay inside golden frame */
.golden-frame .frame-text-overlay {
position: absolute;
inset: 17px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 5;
text-align: center;
padding: 20px;
}
/* iPad text sizes */
.golden-frame .frame-text-overlay .game-label {
font-size: 54px;
letter-spacing: 2px;
margin-bottom: 10px;
}
.golden-frame .frame-text-overlay .game-name {
font-size: 82px;
letter-spacing: 3px;
line-height: 1.15;
}
.golden-frame .frame-text-overlay .good-luck-text {
font-size: 82px;
letter-spacing: 3px;
}
/* TV text sizes (larger) */
.screen .golden-frame .frame-text-overlay .game-label {
font-size: 54px;
}
.screen .golden-frame .frame-text-overlay .game-name {
font-size: 113px;
line-height: 1.1;
}
.screen .golden-frame .frame-text-overlay .good-luck-text {
font-size: 113px;
}
/* Text scale animation (gets bigger while on screen) */
@keyframes text-grow {
0% { transform: scale(0.85); opacity: 0; }
15% { opacity: 1; }
100% { transform: scale(1.1); }
}
.text-animate {
animation: text-grow 5s ease-out forwards;
}
.text-animate-long {
animation: text-grow 9s ease-out forwards;
}
/* ===== OVERLAY / MODAL ===== */
.overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 24px;
}
.overlay .modal {
background: var(--bg-navy);
color: var(--text-white);
border: 2px solid var(--gold-accent);
border-radius: 18px;
padding: 28px 26px;
min-width: 320px;
max-width: 520px;
width: 100%;
}
.overlay .modal h3 {
margin: 0 0 10px 0;
font-size: 28px;
letter-spacing: 1px;
}
.overlay .modal p {
margin: 0 0 18px 0;
font-size: 20px;
opacity: 0.85;
}
.overlay .modal .btn-gold {
width: 100%;
font-size: 30px;
}
/* ===== SCREEN OFFLINE BANNER ===== */
.screen-offline-banner {
position: fixed;
top: 24px;
left: 50%;
transform: translateX(-50%);
background: rgba(200, 50, 50, 0.9);
color: white;
padding: 10px 30px;
border-radius: 8px;
font-size: 22px;
z-index: 10000;
display: none;
letter-spacing: 1px;
font-family: var(--font-main);
}
/* ===== FADE TRANSITIONS ===== */
.fade-in {
animation: fadeIn 0.5s ease-in forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* =====================================================================
WALKERS FOOTBALL CRISP QUIZ
===================================================================== */
@font-face {
font-family: "Lays Extra";
src: url("assets/fonts/LaysExtraBold.woff2") format("woff2"),
url("assets/fonts/LaysExtraBold.woff") format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}
:root {
--wk-red: #e2231a;
--wk-red-deep: #b3140d;
--wk-yellow: #ffd200;
--wk-yellow-2: #f0a500;
--wk-green: #36c24a;
--wk-wrong: #ff3b30;
}
.app.walkers {
background: var(--wk-red);
color: #fff;
font-family: "Lays Extra", var(--font-main);
}
/* ---- shared screen wrapper ---- */
.wk-screen {
position: absolute;
inset: 0;
width: 100%;
height: 100vh;
background: var(--wk-red);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
padding: 4vh 6vw;
gap: 2.4vh;
}
/* tablet screens use the branded textured red background image */
.tablet .wk-screen {
background: var(--wk-red) url("assets/images/tablet-back.png") center / cover no-repeat;
}
.wk-logo { width: 150px; height: auto; }
.screen .wk-logo { width: 230px; }
.wk-logo-lg { width: 320px; }
.wk-sub {
font-family: "Lays Extra", sans-serif;
font-size: 15px;
letter-spacing: 2px;
text-transform: uppercase;
line-height: 1.3;
opacity: 0.95;
}
.screen .wk-sub { font-size: 20px; }
.wk-sub-lg { font-size: 26px; }
/* ---- buttons ---- */
.wk-btn {
display: inline-block;
padding: 14px 46px;
font-family: "Lays Extra", sans-serif;
font-weight: 700;
font-size: 26px;
letter-spacing: 2px;
text-transform: uppercase;
color: #000;
background: linear-gradient(180deg, var(--wk-yellow), var(--wk-yellow-2));
border: none;
border-radius: 999px;
cursor: pointer;
box-shadow: 0 6px 0 rgba(0,0,0,0.18);
transition: filter .15s, transform .05s;
}
.wk-btn:hover { filter: brightness(1.06); }
.wk-btn:active { transform: translateY(2px); box-shadow: 0 3px 0 rgba(0,0,0,0.18); }
/* Start Game / Yes I do buttons: fade in, then pulsate continuously */
@keyframes wk-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
#btn-start-game,
#btn-yes,
#btn-lets-go {
animation: wk-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both,
wk-pulse 1.5s ease-in-out 1s infinite;
}
/* =====================================================================
ENTRANCE / MOTION
===================================================================== */
@keyframes wk-fade-up {
from { opacity: 0; transform: translateY(26px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: wk-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes wk-pop {
0% { opacity: 0; transform: translateY(40px) scale(0.7); }
70% { opacity: 1; transform: translateY(-6px) scale(1.04); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wk-spin { to { transform: rotate(360deg); } }
@keyframes wk-trophy-rise {
from { transform: translate(-50%, 100%); opacity: 0; }
to { transform: translate(-50%, 18%); opacity: 1; }
}
/* =====================================================================
TV STAGE (rotating sunburst background)
===================================================================== */
.wk-tv { padding: 0; }
.wk-tv-bg {
position: absolute;
top: 50%;
left: 50%;
width: 100vmax;
height: 100vmax;
transform: translate(-50%, -50%);
background: url("assets/images/tv-default-back.png") center / contain no-repeat;
z-index: 0;
pointer-events: none;
}
/* Radial light sweep — a soft bright ring that grows outward from the centre
and fades as it reaches the edges, looping forever. */
.wk-tv-bg::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(circle,
rgba(255,228,170,0) 20%,
rgba(255,228,170,0.18) 38%,
rgba(255,228,170,0.30) 47%,
rgba(255,228,170,0.18) 56%,
rgba(255,228,170,0) 74%);
mix-blend-mode: overlay;
transform: scale(0.12);
opacity: 0;
pointer-events: none;
animation: wk-radial-sweep 5s ease-in-out infinite;
}
@keyframes wk-radial-sweep {
0% { transform: scale(0.12); opacity: 0; }
15% { opacity: 1; }
100% { transform: scale(1.7); opacity: 0; }
}
.wk-tv-content {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 5vh 8vw;
gap: 2.2vh;
}
.wk-tv-content .wk-logo {
position: absolute;
top: 5vh;
left: 0;
right: 0;
margin: 0 auto;
/* centre via auto margins (not transform) so the .animate-in entrance,
which ends on transform: translateY(0), can't knock it off-centre */
}
/* =====================================================================
TV: LANDING
===================================================================== */
.wk-hello {
font-family: "Lays Extra", sans-serif;
font-size: 90px;
line-height: 0.9;
color: var(--wk-yellow);
font-style: italic;
margin-top: 6vh;
}
.wk-hello-img {
width: min(660px, 62vw);
height: auto;
/* negative margins crop the image's built-in transparent padding so it sits
close to the logo above and the copy below */
margin: -5vh 0 -4vh;
}
/* landing: clean centered column — logo in normal flow so it's perfectly centered */
#view-landing .wk-tv-content {
justify-content: center;
gap: 1vh;
padding: 4vh 8vw;
}
#view-landing .wk-tv-content .wk-logo {
position: static;
transform: none;
margin: 0 auto;
width: 320px;
}
.wk-hello-sub {
font-family: "Lays Extra", sans-serif;
font-size: 64px;
letter-spacing: 2px;
text-transform: uppercase;
color: #fff;
}
.wk-tap-prompt {
font-family: "Lays Extra", sans-serif;
font-size: 38px;
line-height: 1.4;
margin-top: 1vh;
opacity: 0.95;
}
/* =====================================================================
TV: READY / HOW TO PLAY
===================================================================== */
.wk-crisps {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 12px;
margin-top: 4vh;
height: 30vh;
}
.crisp-pack {
height: 100%;
width: auto;
opacity: 0;
animation: wk-pop 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
filter: drop-shadow(0 12px 18px rgba(0,0,0,0.3));
}
.crisp-left { animation-delay: 0.15s; transform-origin: bottom center; }
.crisp-center { animation-delay: 0.35s; height: 112%; z-index: 2; }
.crisp-right { animation-delay: 0.55s; }
.wk-title {
font-family: "Lays Extra", sans-serif;
font-size: 72px;
line-height: 1;
letter-spacing: 1px;
color: #fff;
margin: 1vh 0 0;
}
.wk-title-big { font-size: 100px; }
.wk-body {
font-family: "Lays Extra", sans-serif;
font-weight: 700;
font-size: 26px;
line-height: 1.35;
max-width: 820px;
margin: 1.2vh auto 0;
}
/* larger sub-copy on the "Yes I do" (Ready) and "How to play" screens */
#view-ready .wk-body,
#view-howto .wk-body {
font-size: 34px;
max-width: 900px;
}
/* =====================================================================
TV: QUIZ
===================================================================== */
.wk-question {
font-family: "Lays Extra", sans-serif;
font-weight: 700;
font-size: 46px;
line-height: 1.25;
max-width: 760px;
margin: 0 auto;
color: #fff;
}
/* quiz: top-aligned with extra space below the logo and below the question */
#view-quiz .wk-tv-content {
justify-content: flex-start;
padding-top: 25vh;
gap: 5vh;
}
.wk-timer {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 3vh;
}
.wk-timer img { width: 210px; height: auto; }
.wk-timer span {
position: absolute;
top: 51.8%;
left: 49.6%;
transform: translate(-50%, -50%);
font-family: "Lays Extra", sans-serif;
font-size: 44px;
line-height: 1;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.wk-progress {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 3vh;
}
.wk-ball {
width: 68px;
height: 68px;
border-radius: 50%;
opacity: 0.45;
transition: opacity 0.2s, box-shadow 0.2s, transform 0.2s;
}
.wk-ball.ball-current {
opacity: 1;
transform: scale(1.18);
box-shadow: 0 0 0 4px rgba(255,255,255,0.9);
}
.wk-ball.ball-correct {
opacity: 1;
box-shadow: 0 0 0 4px var(--wk-green);
}
.wk-ball.ball-wrong {
opacity: 1;
box-shadow: 0 0 0 4px var(--wk-wrong);
}
/* =====================================================================
TV: WINNER / LOSER
===================================================================== */
.wk-trophy {
position: absolute;
bottom: 0;
left: 50%;
width: 30vh;
z-index: 3;
/* rest fully off-screen below so it's hidden on load, then rises up */
transform: translate(-50%, 100%);
animation: wk-trophy-rise 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
filter: drop-shadow(0 -6px 20px rgba(0,0,0,0.35));
}
.wk-trophy img {
display: block;
width: 100%;
height: auto;
}
/* subtle light sweep gliding across the trophy (clipped to its shape) */
.wk-trophy::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(115deg,
rgba(255,255,255,0) 43%,
rgba(255,255,255,0.45) 50%,
rgba(255,255,255,0) 57%);
background-size: 250% 100%;
background-repeat: no-repeat;
-webkit-mask: url("assets/images/worldcup.png") center / contain no-repeat;
mask: url("assets/images/worldcup.png") center / contain no-repeat;
mix-blend-mode: screen;
animation: wk-trophy-shine 4.5s ease-in-out 1.6s infinite;
}
@keyframes wk-trophy-shine {
0% { background-position: 165% 0; }
55% { background-position: -65% 0; }
100% { background-position: -65% 0; }
}
/* winner: position the title below the logo and above the rising trophy */
#view-winner .wk-tv-content {
justify-content: flex-start;
padding-top: 28vh;
}
/* loser (TV): keep the title vertically centred */
.screen #view-loser .wk-tv-content {
justify-content: center;
}
/* confetti canvas (winner TV) — particle physics drawn in JS */
.wk-confetti-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 4;
pointer-events: none;
}
/* =====================================================================
TV: PAIRING (restyled)
===================================================================== */
.wk-tv-pair { gap: 2.2vh; }
/* larger logo on the pairing screens */
.wk-tv-pair .wk-logo-lg { width: 460px; }
.tablet .wk-pair-screen .wk-logo { width: 240px; }
/* larger, consistent logo across the iPad flow screens */
.tablet #view-landing .wk-logo,
.tablet #view-ready .wk-logo,
.tablet #view-howto .wk-logo,
.tablet #view-quiz .wk-logo,
.tablet #view-winner .wk-logo,
.tablet #view-loser .wk-logo { width: 260px; }
.wk-pair-instruction {
font-family: "Lays Extra", sans-serif;
font-weight: 700;
font-size: 30px;
letter-spacing: 1px;
line-height: 1.3;
margin-top: 2vh;
text-transform: uppercase;
}
.wk-pair-code {
font-family: "Lays Extra", sans-serif;
font-size: 110px;
letter-spacing: 14px;
color: #fff;
margin-top: 1vh;
}
/* =====================================================================
TABLET: PAIRING + FLOW SCREENS
===================================================================== */
.wk-pair-title {
font-family: "Lays Extra", sans-serif;
font-size: 26px;
line-height: 1.3;
max-width: 520px;
}
.wk-pair-row {
display: flex;
flex-direction: column;
gap: 16px;
width: 300px;
align-items: stretch;
}
.wk-pair-input {
height: 64px;
font-family: "Lays Extra", sans-serif;
font-size: 42px;
letter-spacing: 10px;
text-align: center;
color: #fff;
background: transparent;
border: 2px solid #fff;
border-radius: 999px;
outline: none;
padding: 0 20px;
}
.wk-pair-input::placeholder { color: rgba(255,255,255,0.45); }
/* =====================================================================
TABLET: QUIZ ANSWERS
===================================================================== */
.wk-logo-top { width: 110px; }
.tablet .wk-screen .wk-sub { margin-bottom: 1vh; }
.wk-answers {
display: flex;
flex-direction: column;
gap: 18px;
width: 100%;
max-width: 460px;
margin-top: 2vh;
}
.wk-answer {
width: 100%;
padding: 16px 22px;
font-family: "Lays Extra", sans-serif;
font-weight: 600;
font-size: 24px;
color: #fff;
background: transparent;
border: 2px solid #fff;
border-radius: 999px;
cursor: pointer;
text-align: center;
transition: background 0.15s, color 0.15s, transform 0.05s;
}
.wk-answer.selected {
background: var(--wk-yellow);
color: var(--wk-red-deep);
border-color: var(--wk-yellow);
}
.wk-answer:disabled { cursor: default; opacity: 0.85; }
.wk-confirm { margin-top: 3vh; }
/* =====================================================================
TABLET: WINNER / LOSER
===================================================================== */
.wk-end-copy {
font-family: "Lays Extra", sans-serif;
font-weight: 700;
font-size: 30px;
line-height: 1.3;
}
.wk-crisphand {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -250px; /* centre the 500px image without a transform */
width: 500px;
height: auto;
z-index: 1;
pointer-events: none;
transform-origin: bottom center; /* pivot at the wrist */
/* rests off-screen below, rises in, then gently waves */
transform: translateY(100%);
animation: wk-hand-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards,
wk-hand-wave 2.2s ease-in-out 1.2s infinite;
}
/* crisp-hand slides up into view from below the screen edge */
@keyframes wk-hand-rise {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* gentle waving wiggle, pivoting at the bottom-centre (wrist) */
@keyframes wk-hand-wave {
0% { transform: translateY(0) rotate(0deg); }
25% { transform: translateY(0) rotate(4deg); }
75% { transform: translateY(0) rotate(-4deg); }
100% { transform: translateY(0) rotate(0deg); }
}
/* lift the winner/loser content up so the (taller) crisp hand can't overlap it */
.tablet #view-winner,
.tablet #view-loser {
justify-content: center;
padding-bottom: 30vh;
}
/* keep modal readable on red theme */
.walkers .overlay .modal {
background: var(--wk-red-deep);
border-color: var(--wk-yellow);
}