/* A COPY, never a source (landing/test/sheetCopy.test.mjs): the tokens are the app's (frontend/src/index.css),
   the torn strip is the look sheet's (docs/research/2026-09-30-look-and-moments/look-sheet/home.css). Change the
   source first, then copy. */
:root {
  --ev-bg: #0b0e30;
  --ev-surface: #161732;
  --ev-panel: #1d183f;
  --ev-panel-2: #2e2443;
  --ev-line: #d4a94f;
  --ev-line-soft: #5a4a4b;
  --ev-text: #eff0e5;
  --ev-text-muted: #8f93ab;
  --ev-el-fire: #ff7a3d;
  --ev-el-wind: #b8f1ff;
  --ev-el-sun: #ffcf4a;
  --ev-el-water: #1fb5c8;
  --ev-el-shadow: #a77bff;
  --ev-el-venom: #8fe04a;
  --ev-font-display: 'Cinzel', Georgia, serif;
  --ev-font-card: 'Alegreya', Georgia, serif;
  --ev-font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --ev-ink: #16111f;
  --ev-paper: #f1e8d2;
  --ev-ink-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .46 0 0 0 0 .4 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --ev-ink-torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0.0 2.0 L3.9 3.1 L7.3 2.6 L12.5 0.7 L18.6 0.6 L24.2 0.8 L27.7 2.2 L35.7 1.0 L40.0 3.0 L48.7 2.8 L54.1 4.4 L57.4 3.9 L62.1 1.1 L65.8 1.7 L73.7 1.2 L80.2 3.1 L85.4 2.7 L88.8 0.7 L93.0 3.2 L98.6 1.8 L105.1 2.3 L109.9 3.7 L117.1 1.5 L123.6 2.6 L131.8 3.4 L136.5 4.4 L140.3 2.2 L147.8 1.1 L153.7 0.7 L160.7 3.6 L167.2 4.0 L172.1 3.3 L178.6 2.8 L184.4 3.9 L193.0 2.4 L200.0 0.7 L198.9 15.0 L199.0 30.0 L198.5 45.0 L192.1 58.4 L186.8 56.8 L183.6 57.7 L179.6 59.0 L176.3 56.4 L172.5 58.5 L167.1 56.0 L163.7 57.7 L157.4 56.0 L149.4 56.0 L144.8 57.8 L139.6 56.0 L130.9 58.9 L126.8 58.6 L122.4 57.6 L115.9 58.4 L112.9 57.8 L107.6 57.2 L98.9 56.7 L92.8 57.0 L85.8 59.3 L77.4 56.4 L69.1 56.3 L63.8 57.9 L60.1 57.0 L56.8 59.2 L52.5 58.9 L47.5 59.3 L44.5 58.9 L40.9 58.0 L37.7 56.0 L31.0 58.9 L26.5 58.1 L21.3 59.0 L13.2 55.5 L7.4 57.6 L3.9 59.1 L0.0 58.4 L1.2 45.0 L0.2 30.0 L0.0 15.0Z'/%3E%3C/svg%3E");
  --ev-ink-torn-edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0.0 2.0 L3.9 3.1 L7.3 2.6 L12.5 0.7 L18.6 0.6 L24.2 0.8 L27.7 2.2 L35.7 1.0 L40.0 3.0 L48.7 2.8 L54.1 4.4 L57.4 3.9 L62.1 1.1 L65.8 1.7 L73.7 1.2 L80.2 3.1 L85.4 2.7 L88.8 0.7 L93.0 3.2 L98.6 1.8 L105.1 2.3 L109.9 3.7 L117.1 1.5 L123.6 2.6 L131.8 3.4 L136.5 4.4 L140.3 2.2 L147.8 1.1 L153.7 0.7 L160.7 3.6 L167.2 4.0 L172.1 3.3 L178.6 2.8 L184.4 3.9 L193.0 2.4 L200.0 0.7 L198.9 15.0 L199.0 30.0 L198.5 45.0 L192.1 58.4 L186.8 56.8 L183.6 57.7 L179.6 59.0 L176.3 56.4 L172.5 58.5 L167.1 56.0 L163.7 57.7 L157.4 56.0 L149.4 56.0 L144.8 57.8 L139.6 56.0 L130.9 58.9 L126.8 58.6 L122.4 57.6 L115.9 58.4 L112.9 57.8 L107.6 57.2 L98.9 56.7 L92.8 57.0 L85.8 59.3 L77.4 56.4 L69.1 56.3 L63.8 57.9 L60.1 57.0 L56.8 59.2 L52.5 58.9 L47.5 59.3 L44.5 58.9 L40.9 58.0 L37.7 56.0 L31.0 58.9 L26.5 58.1 L21.3 59.0 L13.2 55.5 L7.4 57.6 L3.9 59.1 L0.0 58.4 L1.2 45.0 L0.2 30.0 L0.0 15.0Z' fill='none' stroke='black' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.ev-ink {
  --wash: #221d4a; --label: var(--ev-paper); --line: var(--ev-ink);
  position: relative; border: none; border-radius: 0; color: var(--label);
  background:
    var(--ev-ink-grain),
    radial-gradient(120% 95% at 22% 12%, color-mix(in srgb, var(--wash) 72%, #fff8e6) 0, transparent 62%),
    radial-gradient(150% 140% at 50% 50%, transparent 52%, color-mix(in srgb, var(--wash) 72%, #000) 100%),
    var(--wash);
  background-blend-mode: soft-light, normal, normal, normal;
  -webkit-mask: var(--ev-ink-torn) 0 0 / 100% 100% no-repeat; mask: var(--ev-ink-torn) 0 0 / 100% 100% no-repeat;
}
.ev-ink.dark { --line: var(--ev-paper); }
/* the mask clips a focus outline, so the keyboard focus is drawn inside: a gold edge and a brighter wash */
.ev-ink:focus-visible { outline: none; --line: var(--ev-el-sun); filter: brightness(1.15); }
.ev-ink::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--line);
  -webkit-mask: var(--ev-ink-torn-edge) 0 0 / 100% 100% no-repeat; mask: var(--ev-ink-torn-edge) 0 0 / 100% 100% no-repeat;
}

/* The landing page, style A (Inked Night), ported from docs/research/2026-10-15-landing-page/styles/a-night.html.
   The build puts ink.css (the app's tokens and torn strip, a guarded copy) in front of this file. */

/* Fonts: Cinzel and Alegreya as the app declares them (frontend/src/index.css), DM Sans from @fontsource-variable/dm-sans
   (OFL) under the family name the app's --ev-font-body asks for. All self-hosted: no Google Fonts. */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('/fonts/cinzel-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('/fonts/cinzel-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Alegreya'; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url('/fonts/alegreya-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Alegreya'; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url('/fonts/alegreya-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('/fonts/alegreya-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('/fonts/alegreya-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url('/fonts/dm-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url('/fonts/dm-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--ev-bg); }
body { margin: 0; overflow-x: hidden; background: var(--ev-bg); color: var(--ev-text); font: 400 17px/1.6 var(--ev-font-body); }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
h1, h2, h3 { margin: 0; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--ev-el-sun); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.wrap.narrow { width: min(860px, 100% - 32px); }
.center { text-align: center; }
section { padding: clamp(64px, 9vw, 120px) 0; overflow-x: clip; }
section[id] { scroll-margin-top: 64px; }

/* the burned title, held at its smoulder (screens.css .ev-title's end state: the app writes it in with a fire front) */
.ember { font: 700 clamp(30px, 4.4vw, 52px)/1.1 var(--ev-font-display); letter-spacing: .02em; margin: 0 0 14px; color: #f26b21;
  text-shadow: .05em 0 0 #2b1108, -.05em 0 0 #2b1108, 0 .05em 0 #2b1108, 0 -.05em 0 #2b1108, 0 0 .35em rgba(255, 120, 40, .45); }
.kicker { font: 700 12px var(--ev-font-body); letter-spacing: .28em; text-transform: uppercase; color: var(--ev-line); margin: 0 0 10px; }
.lede { font: 400 clamp(18px, 1.6vw, 21px)/1.55 var(--ev-font-card); color: #d9d6e6; max-width: 60ch; margin: 0 auto; }

/* strips: Home's menu washes (Play solo violet-blue, Play online amber with dark text, the rest dark) */
.ev-ink { display: inline-grid; place-items: center; text-decoration: none; cursor: pointer; font: 800 16px var(--ev-font-body);
  letter-spacing: .06em; text-transform: uppercase; padding: 0 30px; height: 54px; white-space: nowrap; }
.ev-ink.play { --wash: #5b4bd6; height: 66px; padding: 0 44px; font-size: 19px; }
.ev-ink.amber { --wash: #ffcf4a; --label: var(--ev-ink); }
.ev-ink.small { height: 42px; padding: 0 20px; font-size: 13px; }
.textlink { font: 700 14px var(--ev-font-body); letter-spacing: .06em; color: var(--ev-el-sun); text-decoration: none; }
.textlink:hover { text-decoration: underline; }

/* top bar: over the hero transparent, then night, so Play is on screen at every scroll position */
.top { position: fixed; inset: 0 0 auto; z-index: 20; transition: background-color .3s, box-shadow .3s; }
.top.solid { background: rgba(11, 14, 48, .94); box-shadow: 0 1px 0 rgba(212, 169, 79, .18); }
.top .wrap { display: flex; align-items: center; gap: 22px; height: 64px; }
.top .mark img { width: 118px; height: auto; }
.top nav { display: flex; align-items: center; gap: 26px; margin-left: auto; font: 700 15px var(--ev-font-body); letter-spacing: .05em; }
.top nav a { text-decoration: none; color: var(--ev-paper); text-shadow: 0 1px 6px rgba(0,0,0,.6); padding: 6px 0; border-bottom: 2px solid transparent; }
.top nav a:hover { border-bottom-color: var(--ev-line); }
.top nav .in-menu { display: none; }
/* the phone's menu button: three ink lines that turn into a cross */
.menu-btn { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; border: 0; background: none; cursor: pointer; }
.menu-btn span { display: block; height: 2px; border-radius: 1px; background: var(--ev-paper); transition: transform .2s, opacity .2s; }
.top.menu-open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.top.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.top.menu-open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.lang { font: 700 12px var(--ev-font-body); letter-spacing: .12em; color: var(--ev-text-muted); }
.lang b { color: var(--ev-paper); font-weight: 700; }
.lang a { text-decoration: none; }
.lang a:hover { color: var(--ev-paper); }

/* hero: the picture, on a phone Home's loop over it, the scrim, the logo and the strips */
.hero { position: relative; min-height: min(100svh, 920px); display: grid; place-items: end center; padding: 120px 0 72px; isolation: isolate; }
.hero-pic, .hero-pic img, .hero-loop { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-pic { z-index: -2; }
.hero-pic img { object-fit: cover; object-position: center 30%; }
.hero-loop { z-index: -2; object-fit: cover; object-position: center top; opacity: 0; transition: opacity .8s; display: none; }
.hero-loop.on { opacity: 1; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,14,48,.55) 0, rgba(11,14,48,0) 22%, rgba(11,14,48,0) 45%, rgba(11,14,48,.88) 82%, var(--ev-bg) 100%); }
.hero .inner { text-align: center; display: grid; justify-items: center; gap: 18px; }
.hero .logo { width: min(620px, 88vw); height: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.55)); }
.hero .claim { font: italic 500 clamp(19px, 2vw, 24px)/1.45 var(--ev-font-card); color: var(--ev-paper); max-width: 34ch; margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.hero .ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.hero .fine { font: 500 13px var(--ev-font-body); color: #b9b6cc; margin: 0; }

/* the game */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; }
.pillar .pic { position: relative; height: 210px; display: grid; place-items: center; }
.pillar .pic::before { content: ''; position: absolute; width: 230px; height: 230px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 40%, transparent), transparent); }
.pic.hand img { position: absolute; left: 50%; top: 22px; width: 96px; height: auto; max-width: none; margin-left: -48px;
  transform-origin: 50% 140%; transform: rotate(calc(var(--i) * 9deg)) translateY(var(--y)); filter: drop-shadow(0 8px 12px rgba(0,0,0,.55)); }
.pic.ring .medal { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px;
  transform: rotate(var(--a)) translateY(-70px) rotate(calc(-1 * var(--a))); }
.pic.ring .medal::before { content: ''; position: absolute; inset: -16px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 60%, transparent), transparent); }
.pic.ring .medal img { position: relative; width: 100%; height: 100%; }
.pile { position: relative; width: 250px; height: 200px; }
.pile img { position: absolute; height: auto; max-width: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); }
.pile img:nth-child(1) { left: 0; top: 4px; width: 118px; }
.pile img:nth-child(2) { right: 0; top: 0; width: 122px; }
.pile img:nth-child(3) { left: 14px; bottom: 0; width: 128px; }
.pile img:nth-child(4) { right: 10px; bottom: 2px; width: 128px; }
.pile img:nth-child(5) { left: 50%; bottom: -8px; width: 150px; margin-left: -75px; }
.pillar h3 { font: 700 22px var(--ev-font-display); color: var(--ev-paper); margin: 12px 0 6px; }
.pillar p { margin: 0 auto; max-width: 30ch; color: #c5c3d6; font: 400 17px/1.5 var(--ev-font-card); }

/* how to play, on the camp backdrop */
.how { --scene: url('/img/screens-hunt.webp'); --dim: .35; }
.how::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,14,48,.95) 0, rgba(11,14,48,.7) 50%, rgba(11,14,48,0) 100%); }
.how .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.steps { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 22px; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.steps li::before { content: counter(s); font: 700 34px/1 var(--ev-font-display); color: var(--ev-line); text-align: center;
  padding-top: 4px; border-right: 1px solid var(--ev-line-soft); }
.steps h3 { margin: 0 0 4px; font: 700 19px var(--ev-font-display); color: var(--ev-paper); }
.steps p { margin: 0; color: #c5c3d6; font: 400 17px/1.5 var(--ev-font-card); }
.how .after { margin: 28px 0 0; }
.phones { position: relative; height: 620px; }
.phone { position: absolute; width: 228px; aspect-ratio: 390/844; border-radius: 34px; padding: 9px; background: #07081c;
  box-shadow: 0 0 0 1px #2e2443, 0 30px 60px rgba(0,0,0,.6); }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; }
.phone.a { left: 0; top: 64px; transform: rotate(-6deg); z-index: 1; }
.phone.b { left: 50%; margin-left: -114px; top: 0; z-index: 3; }
.phone.c { right: 0; top: 64px; transform: rotate(6deg); z-index: 2; }

/* trailer: the poster and a round play button; the film is chosen and loaded only on the press */
.film { position: relative; margin: 40px auto 0; width: min(1000px, 100%); aspect-ratio: 16/9; background: #000; isolation: isolate; }
.film::before { content: ''; position: absolute; inset: -40px -60px; z-index: -1;
  background: radial-gradient(closest-side, rgba(143,224,74,.18), transparent); }
.film video { width: 100%; height: 100%; object-fit: cover; }
.film-play { position: absolute; inset: 0; margin: auto; width: 96px; height: 96px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--ev-ink);
  background: var(--ev-ink-grain), radial-gradient(circle at 35% 30%, #fff8e6, var(--ev-paper) 55%, #cdbd97);
  background-blend-mode: soft-light, normal; box-shadow: 0 10px 30px rgba(0,0,0,.55); transition: transform .2s; }
.film-play svg { width: 40px; height: 40px; fill: currentColor; margin-left: 6px; }
.film-play:hover { transform: scale(1.06); }
.film.playing .film-play { display: none; }

/* the bestiary and the ways to play */
.row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 30px; }
.beast { position: relative; display: grid; justify-items: center; }
.beast::before { content: ''; position: absolute; top: 4%; width: 92%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 50%, transparent), transparent); }
.beast img { position: relative; width: 100%; max-width: 170px; height: auto; }
.beast span { font: 700 13px var(--ev-font-display); letter-spacing: .06em; color: var(--c); margin-top: 2px; }
.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; text-align: left; }
.mode { position: relative; padding: 0 0 26px; isolation: isolate; overflow: hidden; }
.mode .art { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 18px; }
.mode h3, .mode p { padding-inline: 22px; }
.mode::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ev-ink-grain), var(--ev-panel); background-blend-mode: soft-light; }
.mode h3 { margin: 0 0 6px; font: 700 21px var(--ev-font-display); color: var(--ev-paper); }
.mode p { margin: 0; color: #c5c3d6; font: 400 16px/1.5 var(--ev-font-card); }

/* news: the game's feed, text only, the section shown only when there is something to show */
.news { background: var(--ev-surface); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.card { position: relative; padding: 22px 22px 24px; isolation: isolate; }
.card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ev-ink-grain), var(--ev-panel); background-blend-mode: soft-light; }
.card time { font: 700 12px var(--ev-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ev-line); }
.card h3 { margin: 6px 0 8px; font: 700 19px/1.3 var(--ev-font-display); color: var(--ev-paper); }
.card .pic { display: block; width: calc(100% + 44px); max-width: none; margin: -22px -22px 16px; aspect-ratio: 16 / 9; object-fit: cover; }
.card .body { color: #b9b6cc; font: 400 16px/1.5 var(--ev-font-card); max-height: 6em; overflow: hidden; overflow-wrap: anywhere; }
.card.open .body { max-height: none; }
/* a gap of exactly one line between blocks keeps the four-line clamp on a line's edge, never through its letters */
.card .body > * { margin: 0 0 1.5em; }
.card .body > :last-child { margin-bottom: 0; }
.card .body ul, .card .body ol { padding-left: 1.25em; }
.card .body h4 { font: 700 16px/1.5 var(--ev-font-display); color: var(--ev-paper); }
.card .body a { color: var(--ev-el-sun); }
.card .more { margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer; font: 700 13px var(--ev-font-body);
  letter-spacing: .06em; color: var(--ev-el-sun); }

/* newsletter, on a torn sheet of paper */
.letter { padding-block: clamp(40px, 6vw, 80px); }
.paper { position: relative; color: var(--ev-ink); padding: clamp(40px, 6vw, 64px) clamp(22px, 6vw, 72px); text-align: center;
  background: var(--ev-ink-grain), radial-gradient(130% 100% at 30% 10%, #fbf4e2, var(--ev-paper) 60%, #d9cba8);
  background-blend-mode: soft-light, normal;
  -webkit-mask: var(--ev-ink-torn) 0 0 / 100% 100% no-repeat; mask: var(--ev-ink-torn) 0 0 / 100% 100% no-repeat; }
.paper h2 { font: 700 clamp(26px, 3.4vw, 38px) var(--ev-font-display); margin: 0 0 8px; color: #6a2410; }
.paper > p { font: 400 18px/1.5 var(--ev-font-card); margin: 0 auto 22px; max-width: 46ch; }
.form { position: relative; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.form input[type=email] { height: 54px; width: min(380px, 100%); padding: 0 18px; border: 2px solid var(--ev-ink); background: #fffaf0; color: var(--ev-ink); border-radius: 0; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form button[disabled] { opacity: .6; cursor: progress; }
.form-msg { flex-basis: 100%; margin: 4px 0 0; min-height: 1.5em; font: 600 15px/1.5 var(--ev-font-body); }
.form-msg.err { color: #a63a2a; }
.form.is-done input, .form.is-done button { display: none; }
.form.is-done .form-msg { font-size: 17px; }
.consent { font: 400 13px/1.5 var(--ev-font-body); color: #5a4a4b; margin: 14px auto 0; max-width: 52ch; }

/* the final call */
.final { padding: 140px 0; --scene: url('/img/cosmetics/tableskin-zimni-praha.webp'); --dim: .5; }
.final .lede { margin-bottom: 26px; }

/* Table magic (the owner's pick of three, 2026-10-15; docs/research/2026-10-15-landing-page/backgrounds/): the game
   table's runic circle turning slowly behind the game section with soft element light, the catch screen's clouds
   drifting behind the trailer and news. The scenes (the camp, the wolf at the stream behind the bestiary, the snow)
   are layers whose picture melts into the night over a long fade, never a hard edge (the owner's no to hard seams).
   Motion moves only transforms of pre-drawn layers (no repaint per frame); none under reduced motion. */
#game, .how, .trailer, .beasts, .news, .final { position: relative; isolation: isolate; }
/* the circle turns round the six element medallions, centred on them, a touch higher by eye (the owner, 2026-10-15) */
.pic.ring::after { content: ''; position: absolute; z-index: -1; left: 50%; top: calc(50% - 14px); width: min(640px, 105vw); aspect-ratio: 1;
  transform: translate(-50%, -50%); background: url('/img/table/table-circle.webp') center / contain no-repeat; opacity: .45;
  animation: runeSpin 240s linear infinite; will-change: transform; pointer-events: none; }
#game::after { content: ''; position: absolute; z-index: -2; inset: 0; pointer-events: none;
  background: radial-gradient(40% 50% at 15% 70%, rgba(255,122,61,.14), transparent 70%),
    radial-gradient(40% 50% at 85% 30%, rgba(31,181,200,.14), transparent 70%),
    radial-gradient(35% 45% at 50% 100%, rgba(143,224,74,.10), transparent 70%); }
.trailer::before, .news::before { content: ''; position: absolute; z-index: -1; inset: 0 -12%; opacity: .55; pointer-events: none;
  background: url('/img/fx/cloud-a-0.webp') 8% 18% / 560px auto no-repeat, url('/img/fx/cloud-c-0.webp') 92% 78% / 682px auto no-repeat,
    url('/img/fx/cloud-a-2.webp') 45% 100% / 520px auto no-repeat;
  animation: cloudDrift 90s ease-in-out infinite alternate; will-change: transform; }
.beasts { --scene: url('/img/intro-poster.webp'); --dim: .72; }
.how::after, .beasts::after, .final::after { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(rgba(11,14,48,var(--dim)), rgba(11,14,48,var(--dim))), var(--scene) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 clamp(90px, 22%, 240px), #000 calc(100% - clamp(90px, 22%, 240px)), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 clamp(90px, 22%, 240px), #000 calc(100% - clamp(90px, 22%, 240px)), transparent 100%); }
@keyframes runeSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes cloudDrift { to { transform: translateX(8%); } }

/* footer */
footer { background: #07081c; padding: 56px 0 28px; font: 400 14px/1.6 var(--ev-font-body); color: var(--ev-text-muted); }
footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
footer h2 { font: 700 12px var(--ev-font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--ev-paper); margin: 0 0 12px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ev-paper); }
footer .brand img { width: 150px; height: auto; margin-bottom: 10px; }
footer .brand p { margin: 0; }
.soc { display: flex; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.soc a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #161732; color: var(--ev-paper); }
.soc a:hover { background: #2e2443; }
.soc svg { width: 20px; height: 20px; fill: currentColor; }
footer .legal { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; margin-top: 40px; padding-top: 20px; border-top: 1px solid #1d183f; }
.mim { display: inline-flex; vertical-align: middle; margin-left: 6px; }
.mim img { display: block; width: 121px; height: auto; opacity: .9; transition: opacity .2s; }
.mim:hover img { opacity: 1; }
footer .legal span:first-child { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }

@media (max-width: 1100px) { .modes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  /* the menu folds under its button: a panel below the bar, the language switch inside it */
  .menu-btn { display: flex; }
  .top .wrap > .lang { display: none; }
  .top nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 4px 16px 18px; background: rgba(11, 14, 48, .97); box-shadow: 0 14px 30px rgba(0,0,0,.5); }
  .top.menu-open { background: rgba(11, 14, 48, .97); }
  .top.menu-open nav { display: flex; }
  .top nav a { padding: 13px 2px; font: 700 18px var(--ev-font-display); letter-spacing: .03em; border-bottom: 1px solid rgba(212,169,79,.18); text-shadow: none; }
  .top nav a:hover { border-bottom-color: rgba(212,169,79,.18); color: var(--ev-line); }
  .top nav .in-menu { display: block; padding: 16px 2px 0; font-size: 14px; }
  .top .wrap { gap: 10px; }
  .top .mark { margin-right: auto; }
  .top .mark img { width: 96px; }
  .hero-pic img { object-position: center top; }
  .hero-loop { display: block; }
  .pillars, .modes, .cards { grid-template-columns: 1fr; }
  .how .wrap { grid-template-columns: 1fr; gap: 32px; }
  .phones { height: 430px; order: -1; }
  .phone { width: 166px; }
  .phone.a { left: calc(50% - 190px); top: 40px; }
  .phone.b { margin-left: -83px; }
  .phone.c { right: calc(50% - 190px); top: 40px; }
  .modes { grid-template-columns: 1fr; }
  .row { grid-template-columns: repeat(3, 1fr); }
  footer .cols { grid-template-columns: 1fr 1fr; }
  footer .brand { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  .ev-ink.play { padding: 0 28px; font-size: 17px; }
  .top .ev-ink.small { padding: 0 14px; }
  .phone { width: 146px; }
  .phone.a { left: calc(50% - 162px); }
  .phone.b { margin-left: -73px; }
  .phone.c { right: calc(50% - 162px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pic.ring::after, .trailer::before, .news::before { animation: none; }
  .hero-loop { display: none; }
  .film-play { transition: none; }
}