:root {
  color-scheme: light;
  --blue: #004899;
  --green: #76c80a;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  background: var(--blue);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
button, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
a { color: inherit; text-underline-offset: .2em; }
img { max-width: 100%; height: auto; }
p { margin: 0 0 15px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.message-form textarea:focus { outline: 1px solid #00489966; outline-offset: 1px; }
.send-button:focus-visible { outline-color: var(--blue); outline-offset: 2px; }
main:focus, .game-screen:focus { outline: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: -100px; left: 20px; padding: 12px; z-index: 200; background: #fff; color: var(--blue); }
.skip-link:focus { top: 10px; }
.site-header { position: absolute; z-index: 30; inset: 0 0 auto; height: 85px; padding: 15px 20px; }
.brand { display: inline-flex; align-items: flex-start; gap: 14px; text-decoration: none; }
.brand-kfv { width: 66px; margin-top: -4px; }
.brand-game { width: 145px; max-height: 45px; }
.menu-toggle, .menu-close { position: absolute; right: max(18px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top)); width: 44px; height: 44px; padding: 9px; border: 0; background: transparent; color: #fff; }
.menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.menu-toggle span { display: block; width: 26px; height: 3px; background: currentColor; }
.menu-close { font-size: 43px; line-height: 24px; font-weight: 200; }
.site-menu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 80px 0 40px; border: 0; color: #fff; background: var(--blue); overflow-y: auto; }
.site-menu::backdrop { background: var(--blue); }
.site-menu[open] { display: flex; align-items: center; }
body.menu-open { overflow: hidden; }
.menu-content { width: 70%; margin: auto; }
.menu-brand { display: block; width: fit-content; margin-bottom: 35px; }
.menu-brand img { display: block; }
.menu-kfv { width: 118px; margin-bottom: 20px; }
.menu-game { width: 275px; }
.site-menu ul { list-style: none; padding: 0; margin: 0; }
.site-menu li a { display: block; position: relative; padding: 12px 0 12px 23px; font-size: 17px; text-decoration: none; }
.site-menu li a::before { content: ">"; position: absolute; left: 0; }
.site-menu li a:hover { text-decoration: underline; }
.no-js-nav { position: relative; z-index: 40; padding: 85px 20px 10px; }
.no-js-nav a { display: inline-block; padding: 8px; }
.desktop-notice { display: none; }
.game { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.driving-scene { position: absolute; inset: 0; overflow: hidden; z-index: -2; pointer-events: none; }
.scene-road, .scene-phone, .scene-wheel { position: absolute; bottom: 0; left: -10px; right: -10px; height: 100%; background-position: bottom center; background-repeat: no-repeat; background-size: 105% auto; }
.scene-road { background-image: url('/wp-content/uploads/2017/12/kfv-home-screen-neu-background.png'); animation: landscape .95s ease-in-out infinite alternate; }
.scene-phone { background-image: url('/wp-content/uploads/2017/12/kfv-home-screen-neu-right-arm-phone-green.png'); transition: opacity .3s, transform .3s; }
.scene-wheel { width: 115vw; height: 115vw; left: -12.5vw; bottom: -42vw; background-image: url('/wp-content/uploads/2017/12/kfv-home-screen-neu-centered-arm-left.png'); animation: driving .95s ease-in-out infinite alternate; }
.game[data-state="message"] .scene-phone, .game[data-state="end"] .scene-phone { opacity: 0; transform: translate(50%, 15%); }
.game[data-state="end"] .scene-wheel { background-image: url('/wp-content/uploads/2017/12/kfv-home-screen-neu-centered-arm-both.png'); }
.screen-tint { position: absolute; z-index: -1; inset: 0; pointer-events: none; transition: background-color .3s; }
.game[data-state="time"] .screen-tint { background: #004899e0; }
.game[data-state="results"] .screen-tint { background: #7ecb19e8; }
.game-screen { position: relative; padding: 100px 20px 36px; font-size: 18px; line-height: 1.7; }
.start-screen { padding-top: 124px; }
.pill { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; border: 2px solid #fff; border-radius: 24px; padding: 11px 18px; margin-top: 10px; background: #fff; color: var(--blue); font-size: 14px; line-height: 1; font-weight: 700; text-decoration: none; text-transform: uppercase; transition: box-shadow .2s; }
.pill:hover { box-shadow: 0 0 15px #0003; }
.start-button { width: 70%; font-size: 17px; margin-top: 12px; box-shadow: 0 0 30px #0005; }
.elapsed { margin-left: 5px; font-size: 50px; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.distances { margin: 0 0 15px; }
.distances > div { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 15px; border-bottom: 2px dotted #fff; overflow: hidden; white-space: nowrap; animation: result-in .3s ease-in-out both; animation-delay: calc(var(--row) * .4s); }
.distances dd { margin: 0; font-variant-numeric: tabular-nums; }
.result-actions { display: flex; flex-wrap: wrap; gap: 20px; }
.restart-button { color: #599608; }
.outline-button { color: #fff; background: transparent; }
.end-screen { padding-top: max(100px, 20svh); }
.end-screen h2, .end-screen p { padding: 0 10px 0 5px; font-size: 20px; line-height: 1.4; }
.end-screen h2 { margin: 0 0 15px; font-weight: 400; }
.end-screen p { font-weight: 700; }
/* Original enlarged phone artwork, with the text placed within its screen.
   A minimum stage height and a scrollable document accommodate short screens. */
.game[data-state="message"] { min-height: max(100svh, calc(155vw + 75px)); }
.message-screen { min-height: max(100svh, calc(155vw + 75px)); padding: 0; }
.message-phone { position: absolute; pointer-events: none; width: 212vw; height: 265vw; left: -21.1vw; bottom: -110vw; background: url('/wp-content/uploads/2018/03/kfv-home-screen-neu-right-arm-phone-grey-no-rotation-high-res-3-1-neu.png') left bottom / 100% auto no-repeat; }
.message-content { position: absolute; left: 20.5%; right: 15%; bottom: 33.9vw; color: var(--blue); font-size: 14px; line-height: 1.4; }
.chat-bubble { position: relative; margin: 0 0 8px; border-radius: 5px; padding: 10px; background: #e2e2e2; font-size: inherit; font-weight: 400; line-height: 1.4; }
.message-content > p { margin-bottom: 5px; }
.message-sample { display: block; margin-top: 5px; font-weight: 700; }
.message-form { display: flex; align-items: flex-end; gap: 5px; margin: 0; background: #f7f7f7; }
.message-form textarea { display: block; width: calc(100% - 49px); min-height: 48px; max-height: 130px; resize: none; scrollbar-width: none; margin: 0; border: 0; border-radius: 30px; padding: 10px; background: #c3e496; color: var(--blue); font-family: Consolas, "Courier New", monospace; font-size: 16px; line-height: 1.25; letter-spacing: -.02em; }
.message-form textarea::-webkit-scrollbar { display: none; }
.send-button { flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0; background: #599608 url('/wp-content/uploads/2017/11/send-icon.png') center / 70% 70% no-repeat; box-shadow: 1px 1px 3px #0002; }
.send-button:disabled { opacity: 1; }
/* The artwork extends beyond the stage; anchor its entrance at the viewport's bottom right. */
.game.message-entering .message-phone { transform-origin: 121.1vw 155vw; animation: phone-in .5s ease-in-out both; }
.game.message-entering .chat-bubble { animation: message-bubble-in .4s ease-in-out .75s both; }
.game.message-entering #message-instruction { animation-delay: 1.5s; }
.game.message-entering .message-form { animation: message-form-in .4s ease-in-out 2.5s both; }
.game.message-entering .send-button { animation: send-in .4s ease-in-out 2.5s both; }
@keyframes phone-in { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes message-bubble-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes message-form-in { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
@keyframes send-in { from { transform: scale(0); } to { transform: scale(1); } }
/* On-screen keyboards may shrink either the layout or just the visual viewport.
   Keep the conversation in normal flow while editing so it remains scrollable. */
.game.keyboard-open .message-content { position: relative; left: auto; right: auto; bottom: auto; width: 64.5%; margin-left: 20.5%; padding-top: 95px; padding-bottom: 28px; }
.game.keyboard-open, .game.keyboard-open .message-screen { min-height: var(--keyboard-height, 100svh); }
.game.keyboard-open .message-phone { display: none; }
.game.keyboard-open .message-screen::before { content: ""; position: absolute; inset: 70px 12% 0 17%; border: 10px solid #dcdcdc; border-bottom: 0; border-radius: 30px 30px 0 0; background: #f7f7f7; }
.content-page .site-header { position: fixed; background: #00346f; }
.legal-content { max-width: 1180px; margin: 0 auto; padding: 115px 20px 60px; font-size: 15px; line-height: 1.66; overflow-wrap: break-word; }
.legal-content h1 { margin: 25px 0 30px; font-size: 28px; line-height: 1.3; font-weight: 600; }
.legal-content h2 { margin: 30px 0 16px; font-size: 24px; }
.legal-content h3 { font-size: 16px; line-height: 1.3; margin: 25px 0 15px; }
.legal-content p, .legal-content li { color: #ffffffe0; }
.legal-content ul { padding-left: 24px; }
.legal-content li { font-size: 14px; }
.back-link { display: inline-block; margin-top: 20px; }
@keyframes landscape { from { transform: translateX(10px); } to { transform: translateX(-10px); } }
@keyframes driving { from { transform: rotate(-15deg); } to { transform: rotate(-5deg); } }
@keyframes result-in { from { opacity: 0; width: 0; } to { opacity: 1; width: 100%; } }
@media (max-width: 349px) {
  .site-header { padding-left: 15px; }
  .brand { gap: 8px; }
  .brand-game { width: 128px; }
  .game-screen:not(.message-screen) { padding-top: 90px; font-size: 16px; line-height: 1.5; }
  .start-screen { padding-top: 114px !important; }
  .pill { padding-inline: 14px; }
  .result-actions { gap: 12px; }
  .game[data-state="message"], .message-screen { min-height: max(100svh, calc(155vw + 145px)); }
}
@media (max-width: 767px) and (max-height: 500px) {
  .game[data-state="message"], .message-screen { min-height: 100svh; }
  .message-phone { display: none; }
  .message-content { position: relative; left: auto; right: auto; bottom: auto; width: 64.5%; margin-left: 20.5%; padding-top: 95px; padding-bottom: 28px; }
  .message-screen::before { content: ""; position: absolute; inset: 70px 12% 0 17%; border: 10px solid #dcdcdc; border-bottom: 0; border-radius: 30px 30px 0 0; background: #f7f7f7; }
  .message-content > p { margin-bottom: 16px; }
}
@media (min-width: 768px) {
  .home .brand, .game { display: none; }
  .site-header { padding: 20px 30px; }
  .menu-toggle, .menu-close { right: 25px; top: 25px; }
  .desktop-notice { min-height: 100svh; display: flex; align-items: flex-start; justify-content: center; gap: 40px; padding: max(100px, calc(42svh - 125px)) 40px 60px; }
  .desktop-brand { width: 240px; flex-shrink: 0; padding-top: 30px; }
  .desktop-copy { width: 400px; min-height: 250px; padding: 10px 45px; border-left: 2px solid #fff; }
  .desktop-copy img { display: block; width: 308px; margin-bottom: 50px; }
  .desktop-copy p { font-size: 18px; line-height: 1.66; text-transform: uppercase; }
  .menu-content { width: min(650px, 80%); text-align: center; }
  .menu-brand { margin: 0 auto 45px; }
  .menu-kfv { margin: 0 auto 12px; }
  .menu-game { width: 300px; }
  .site-menu li a { padding: 14px 20px; font-size: 25px; }
  .site-menu li a::before { content: none; }
  .site-menu li:first-child a { max-width: 350px; margin: 0 auto 15px; border-radius: 100px; background: #fff; color: #262f3c; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}