/* Voice Kata website. The home page is one living coast with the game's own setup card in the middle.
   Palette from the painted backdrop (site/assets/coast.webp); the game page uses the same tokens. */
@font-face{font-family:Outfit;font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/outfit-latin.woff2') format('woff2')}
@font-face{font-family:'Rubik Wet Paint';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/rubik-wet-paint-latin.woff2') format('woff2')}
:root{
  color-scheme:dark;
  --ink:#0c1a2b;      /* night ink: the sea's deepest shadow */
  --ink-2:#13263b;    /* card and plate surface */
  --zombie:#9ccf6b;   /* zombie green */
  --tomato:#ff5a3d;   /* tomato red */
  --note:#ffc94a;     /* golden note glow */
  --sea:#3cc8d4;      /* turquoise sea */
  --sand:#f0d7a1;     /* warm sand */
  --paper:#fbf1dc;    /* text on ink */
  --muted:#c3cdd2;
  --line:#fbf1dc24;
  --display:'Rubik Wet Paint',Outfit,system-ui,sans-serif;
  font-family:Outfit,system-ui,sans-serif;color:var(--paper);background:var(--ink);font-synthesis:none;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0}   /* the ink lives on <html>: a body background would paint over the coast layer */
a{color:inherit}button{font:inherit;color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--note);outline-offset:4px;border-radius:4px}
img{max-width:100%;height:auto;display:block}
h1,h2,p{margin:0}
[hidden]{display:none!important}
.skip{position:fixed;left:16px;top:-100px;z-index:60;padding:12px 16px;border-radius:12px;background:var(--note);color:var(--ink);font-weight:700;text-decoration:none}.skip:focus{top:16px}
.motion-toggle{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}

/* Home ------------------------------------------------------------------------------------------ */
.home{
  --card-w:688px;                                   /* the game's 640 px card plus its own 24 px padding */
  min-height:100svh;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:max(6px,env(safe-area-inset-top)) 16px max(10px,env(safe-area-inset-bottom))
}

/* The coast: painted still at once over solid ink, a looping video on wide screens, slow drift and pointer parallax. */
.coast{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--ink)}
.coast-pan{position:absolute;inset:-28px;translate:calc(var(--px,0) * -16px) calc(var(--py,0) * -10px);transition:translate 1.2s cubic-bezier(.2,.7,.2,1)}
.coast-pan>img,.coast-pan>video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 72%}
.coast-video{opacity:0;transition:opacity .9s}
.coast-video.on{opacity:1}
/* A veil at the top and bottom so text stays readable on bright sky and road. */
.coast::after{content:'';position:absolute;inset:0;background:linear-gradient(#0c1a2bb3,#0c1a2b00 24%,#0c1a2b00 76%,#0c1a2b8c)}
.gull{position:absolute;left:0;top:13%;width:34px;height:14px;z-index:1}
.gull i{display:block;width:100%;height:100%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 14'%3E%3Cpath d='M1 6c5-4 10-4 16 3 6-7 11-7 16-3-5-1-10 1-16 7C11 7 6 5 1 6z' fill='%23fbf1dc' stroke='%230c1a2b' stroke-width='.8'/%3E%3C/svg%3E") center/contain no-repeat;transform-origin:50% 70%}
.gull.g2{top:22%;width:24px;height:10px}
.gull{translate:-60px 0}

.cast{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}

/* No z-index on the content, so the mark's blend reaches the coast; the cast comes earlier in the DOM and stays behind. */
.masthead,.home main,.foot{position:relative}
.masthead{width:min(1100px,100%);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 24px;min-height:48px}
.title{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;font-weight:400}
.title-mark{width:40px;height:40px;object-fit:contain;mix-blend-mode:lighten}
.wordmark{font-family:var(--display);font-size:34px;line-height:1;color:var(--paper);text-shadow:0 2px 0 var(--ink),0 0 18px #0c1a2bb3}
.wordmark .dot{color:var(--note)}
.kicker{display:inline-block;padding:5px 12px 6px;border-radius:999px;background:var(--sand);color:var(--ink);font-size:15px;font-weight:700;letter-spacing:-.1px;rotate:-2deg;box-shadow:0 3px 0 #0c1a2b66}
.hook{font-family:var(--display);font-size:21px;color:var(--paper);text-shadow:0 2px 0 var(--ink),0 0 14px #0c1a2bb3}

/* The frame is exactly as tall as the game's setup card (landing.js measures it; 1000 px until then), so the page
   scrolls and the card never scrolls inside the frame. */
.home main{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;width:100%}
.stage{position:relative;width:min(var(--card-w),100%);height:1000px;user-select:none;-webkit-user-select:none}
#game{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:transparent;color-scheme:dark}
#game:focus-visible{outline:3px solid var(--note);outline-offset:-3px;border-radius:20px}
.plate{width:min(var(--card-w),100%);margin-top:6px;display:grid;gap:6px;padding:10px 18px 12px;border-radius:18px;background:#0c1a2be0;border:1px solid var(--line);box-shadow:0 18px 40px #0c1a2b66}
.free{font-family:var(--display);font-size:18px;line-height:1.25;color:var(--note);text-align:center;text-wrap:balance;margin:0 0 4px;padding:4px 16px;border-radius:999px;background:#0c1a2bc7;text-shadow:0 2px 0 var(--ink)}
.tools{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px}
.chip{padding:7px 14px;border:1px solid #fbf1dc40;border-radius:999px;background:var(--ink-2);font-size:14px;font-weight:600;text-decoration:none;cursor:pointer}
.chip:hover{border-color:var(--note)}
.tally{font-family:var(--display);font-size:17px;color:var(--zombie)}
.about{font-size:13px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px;padding:6px 16px;border-radius:999px;background:#0c1a2bc7;font-size:13px;color:var(--muted)}
.foot a{text-decoration:none}.foot a:hover,.motion-toggle:hover{color:var(--paper);text-decoration:underline}

/* The cast: painted zombie cutouts, a thrown tomato, its splat, golden notes and the zombies' replies. */
.actor{position:absolute;left:0;top:0;transform-origin:50% 100%;will-change:transform}
.actor img{width:100%;height:auto;filter:drop-shadow(0 10px 10px #0c1a2b59)}
.actor .body{transform-origin:50% 100%}
.actor.walking .body{animation:shuffle .62s ease-in-out infinite alternate}
@keyframes shuffle{from{transform:rotate(-3.5deg) translateY(0)}to{transform:rotate(3deg) translateY(-3%)}}
.bubble{position:absolute;translate:-50% -100%;margin-top:-6px;padding:6px 12px 7px;border-radius:14px;background:var(--paper);color:var(--ink);font-family:var(--display);font-size:17px;white-space:nowrap;box-shadow:0 3px 0 #0c1a2b66;transform-origin:50% 100%}
.bubble::after{content:'';position:absolute;left:calc(50% - 7px);top:100%;border:7px solid transparent;border-top-color:var(--paper)}
.thrown{position:absolute;left:0;top:0;width:46px;margin:-23px 0 0 -23px;filter:drop-shadow(0 6px 6px #0c1a2b73)}
.splat{position:absolute;left:0;top:0;width:96px;height:96px;margin:-48px 0 0 -48px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23e2402c'%3E%3Ccircle cx='50' cy='50' r='25'/%3E%3Cellipse cx='49' cy='23' rx='9' ry='13'/%3E%3Cellipse cx='77' cy='42' rx='13' ry='8' transform='rotate(-15 77 42)'/%3E%3Cellipse cx='69' cy='73' rx='10' ry='9'/%3E%3Cellipse cx='31' cy='75' rx='12' ry='8' transform='rotate(25 31 75)'/%3E%3Cellipse cx='23' cy='41' rx='10' ry='9'/%3E%3Ccircle cx='86' cy='20' r='4.5'/%3E%3Ccircle cx='13' cy='19' r='5'/%3E%3Ccircle cx='91' cy='69' r='3.5'/%3E%3Ccircle cx='54' cy='93' r='4'/%3E%3Ccircle cx='8' cy='64' r='3'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='15' fill='%23ff6a4a'/%3E%3Cg fill='%23f6d36b'%3E%3Ccircle cx='44' cy='45' r='2.4'/%3E%3Ccircle cx='56' cy='47' r='2.4'/%3E%3Ccircle cx='49' cy='56' r='2.4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.note{position:absolute;left:0;top:0;width:22px;height:30px;margin:-15px 0 0 -11px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32' fill='%23ffd877' stroke='%235a3a0c' stroke-width='1.3'%3E%3Cellipse cx='8' cy='25' rx='6.5' ry='4.8' transform='rotate(-22 8 25)'/%3E%3Cpath d='M12.6 25V2H15c.6 4 3.5 5.7 6.5 8.5-1.6-1.4-4.2-2.4-6.5-2.6V25z'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 7px #ffc94acc)}
.note.pair{width:28px;height:28px;margin:-14px 0 0 -14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffd877' stroke='%235a3a0c' stroke-width='1.3'%3E%3Cellipse cx='7' cy='26' rx='6' ry='4.5' transform='rotate(-22 7 26)'/%3E%3Cellipse cx='25' cy='22' rx='6' ry='4.5' transform='rotate(-22 25 22)'/%3E%3Cpath d='M11 26V4l19-4v22h-2.4V5.2L13.4 8.2V26z'/%3E%3C/svg%3E")}

/* Motion: the gulls glide and flap; everything else is driven by landing.js with transforms. */
:root:not([data-motion=off]) .coast-pan>img,:root:not([data-motion=off]) .coast-pan>video{animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.07) translate(-1%,.6%)}}
:root:not([data-motion=off]) .gull{animation:glide 34s linear infinite}
:root:not([data-motion=off]) .gull.g2{animation-duration:47s;animation-delay:-19s}
:root:not([data-motion=off]) .gull i{animation:flap .5s ease-in-out infinite alternate}
@keyframes glide{from{translate:-60px 0}50%{translate:50vw 18px}to{translate:calc(100vw + 60px) -6px}}
@keyframes flap{to{transform:scaleY(.45)}}
:root[data-motion=off] .gull{display:none}
@media(prefers-reduced-motion:reduce){:root:not([data-motion=on]) .gull{display:none}:root:not([data-motion=on]) .coast-pan>img{animation:none}.coast-pan{transition:none}}

/* Playing: the game takes the whole viewport; the landing rests. */
.is-playing body{overflow:hidden}
.is-playing .home main{z-index:20}
.is-playing #game{position:fixed;inset:0;width:100vw;height:100dvh;z-index:20;background:var(--ink);border-radius:0;outline:0}
.is-playing .cast,.is-playing .fx,.is-playing .gull{display:none}

@media(max-width:720px){
  .home{gap:6px}
  .masthead{justify-content:center;text-align:center;min-height:0;padding-top:4px}
  .title{justify-content:center}
  .wordmark{font-size:30px}.title-mark{width:34px;height:34px}
  .kicker{font-size:14px}
  .hook{display:none}
  /* The game page pads its own card by 16 px, so the frame spans the screen and the card keeps the gutter. */
  .stage{width:calc(100% + 32px);margin-inline:-16px}
  .plate{padding:12px 14px 14px}
  .free{font-size:16px}
  .foot{border-radius:16px}
}
@media(max-width:380px){.kicker{font-size:13px}.wordmark{font-size:27px}}

/* Privacy and Terms pages: header, legal text and footer, in the same coast palette. */
.brand{display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap}.brand-mark{mix-blend-mode:lighten;width:48px;height:43px;object-fit:contain;margin-right:12px}.brand-name{font-family:var(--display);font-size:30px;font-weight:400;line-height:1}.brand-name b{font-weight:400}.brand-period{color:var(--note)}
.wrap{max-width:1280px;width:calc(100% - 112px);margin-inline:auto}
.inner-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(var(--ink-2),var(--ink) 420px)}
.header{min-height:110px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}.header nav{display:flex;gap:30px;align-items:center}
.nav-how{text-decoration:none;font-size:14px;color:var(--muted);transition:color .2s}.nav-how:hover{color:var(--note)}
.button{display:inline-flex;align-items:center;gap:14px;padding:10px 18px;border-radius:14px;background:var(--note);color:var(--ink);text-decoration:none;font-family:var(--display);font-size:18px;line-height:1.3;box-shadow:0 4px 0 #b9862a;transition:background .18s}.button:hover{background:#ffd775}.button span{font-family:Outfit,system-ui,sans-serif;font-size:20px;line-height:1}
.eyebrow{font-size:14px;line-height:1.6;font-weight:600;color:var(--sea)}
.legal{max-width:720px;padding-block:56px 85px}.legal h1{font-family:var(--display);font-size:clamp(46px,5.7vw,72px);font-weight:400;line-height:1.08;margin:14px 0 14px}.legal h1 em{font-style:normal;color:var(--note)}.legal-updated{font-size:13px;color:var(--muted);margin-bottom:34px}.legal .lede{font-size:21px;line-height:1.55;color:var(--paper);padding:22px 0 26px;border-block:1px solid var(--line);margin-bottom:26px}.legal h2{font-family:var(--display);font-size:28px;font-weight:400;line-height:1.25;margin:48px 0 16px;color:var(--sand)}.legal p,.legal li,.legal address,.legal td,.legal th{font-size:16px;line-height:1.75;color:var(--muted)}.legal p{margin:0 0 16px}.legal strong,.legal b{color:var(--paper);font-weight:600}.legal ul{padding-left:22px;margin:0 0 16px}.legal li{margin-bottom:6px}.legal address{font-style:normal;margin:0 0 16px;padding-left:16px;border-left:2px solid var(--note)}.legal a{text-underline-offset:5px;text-decoration-thickness:1px}.legal table{width:100%;border-collapse:collapse;margin:0 0 18px}.legal th{text-align:left;color:var(--note);font-weight:600;font-size:13px}.legal th,.legal td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}.legal td{font-size:15px;line-height:1.6}.legal-foot{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:14px}
.footer{margin-top:auto;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:28px}.footer .brand-name{font-size:24px}.footer .brand-mark{width:34px;height:34px;margin-right:9px}.footer p{max-width:370px;text-align:center;font-size:13px;color:var(--muted)}.footer p a{text-decoration:none;color:var(--paper)}
.footer-links{display:flex;align-items:center;flex-wrap:wrap;gap:24px}.footer-links a{font-size:13px;text-decoration:none;color:var(--muted)}.footer-links [aria-current=page]{color:var(--note)}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}}
@media(max-width:800px){.wrap{width:calc(100% - 40px)}.header{min-height:88px;gap:15px}.header .brand-name{font-size:26px}.header .brand-mark{width:36px;height:36px;margin-right:8px}.nav-how{display:none}.footer{flex-wrap:wrap;gap:20px;padding-block:26px}.footer p{order:3;flex-basis:100%;text-align:left;max-width:none}.footer-links{margin-left:auto;gap:16px}}
@media(max-width:390px){.wrap{width:calc(100% - 32px)}.header .brand-name{font-size:23px}.header .brand-mark{width:30px;height:34px;margin-right:7px}.header .button{padding:9px 11px;font-size:16px}.header .button span{display:none}}