@font-face { font-family: "Special Elite"; src: url(/fonts/special-elite.woff) format("woff"); font-display: swap; }
.page-game--last-meal { background: var(--paper); }
.game--last-meal {
--lm-paper: #ebe3cf;
--lm-paper-2: #ddd2b8;
--lm-ink: #241f1b;
--amber: #c9a35e;
--stamp: #b5271f;
--type: "Special Elite", "Courier New", Courier, monospace;
}
.game--last-meal .section-title { font-family: var(--type); font-weight: 400; letter-spacing: -.01em; line-height: 1.12; }
.game--last-meal .eyebrow, .game--last-meal .label { color: var(--amber); }
.game--last-meal .game-hero__tagline { font-family: var(--type); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); line-height: 1.15; }
.game--last-meal .feature h3 { font-family: var(--type); font-weight: 400; font-size: 1.35rem; }
.game--last-meal .pull-quote p { font-family: var(--type); font-weight: 400; }
.game--last-meal .btn--primary:hover { background: var(--amber); border-color: var(--amber); }
.game-hero--split { position: relative; min-height: min(90vh, 940px); background: var(--bg); overflow: hidden; }
@supports (height: 100svh) { .game-hero--split { min-height: min(90svh, 940px); } }
.game-hero--split .game-hero__art {
position: absolute; top: 0; right: max(0px, calc((100vw - 1600px) / 2)); bottom: 0; width: auto; height: 100%; aspect-ratio: 920 / 1080; background: var(--bg);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 26%); mask-image: linear-gradient(90deg, transparent, #000 26%);
}
.game-hero--split .game-hero__art::after { display: none; }
.game-hero--split .game-hero__art img { object-position: 50% 0; }
.game-hero--split .game-hero__info { position: relative; z-index: 1; padding-top: 22px; padding-bottom: clamp(48px, 7vw, 88px); }
.game-hero--split .game-hero__info > * { max-width: 540px; }
.game-hero__logo-title { margin: clamp(24px, 6vh, 72px) 0 22px; line-height: 0; }
.game-hero__logo-title img { width: min(100%, 460px); height: auto; }
.game-hero--split .game-hero__side { margin-top: 28px; }
.lm-bulb {
position: absolute; left: 45.6%; top: 9.7%; width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, rgb(255 205 120 / .42), rgb(255 170 80 / .1) 38%, transparent 66%); mix-blend-mode: screen;
animation: lm-flicker 9s infinite;
}
@keyframes lm-flicker {
0%, 17%, 23%, 61%, 100% { opacity: 1; }
18% { opacity: .2; } 19% { opacity: .9; } 20% { opacity: .15; } 21%, 22% { opacity: .95; }
62% { opacity: .55; } 63% { opacity: 1; }
}
.lm-rain {
position: absolute; inset: 0; pointer-events: none; opacity: .45;
background-image:
repeating-linear-gradient(104deg, transparent 0 34px, rgb(170 190 230 / .09) 34px 35px),
repeating-linear-gradient(101deg, transparent 0 57px, rgb(170 190 230 / .06) 57px 58px);
background-size: 260px 260px, 340px 340px;
animation: lm-rain .55s linear infinite;
}
@keyframes lm-rain { to { background-position: -64px 260px, -70px 340px; } }
@media (max-width: 899px) {
.game-hero--split { min-height: 0; }
.game-hero--split .game-hero__art {
position: relative; right: auto; width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: 72vh;
-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent);
}
.game-hero--split .game-hero__art img { object-position: 50% 18%; }
.lm-bulb { top: 8%; }
.game-hero--split .game-hero__info { margin-top: -10vw; }
.game-hero__logo-title { margin-top: 18px; }
}
.lm-plaque { background: #0b0a09; }
.game-section.lm-plaque { padding: clamp(64px, 9vw, 120px) 0; }
.lm-plaque__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.lm-plaque__img { width: 100%; height: auto; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .9); }
.lm-typed { margin: 0; font: 400 clamp(1.55rem, 1.05rem + 2vw, 2.6rem)/1.25 var(--type); color: var(--lm-paper); }
.lm-typed::after { content: "▍"; margin-left: .1em; color: var(--amber); animation: lm-caret 1s steps(2, start) infinite; }
@keyframes lm-caret { to { visibility: hidden; } }
.lm-cite { margin-top: 18px; font: 400 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 760px) { .lm-plaque__inner { grid-template-columns: 1fr; } }
.lm-orders { background: var(--bg); }
.tickets { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 300px)); gap: clamp(16px, 2vw, 24px); }
.ticket {
position: relative; display: grid; gap: 12px; align-content: start; padding: 18px 18px 26px; color: var(--lm-ink);
background:
repeating-linear-gradient(180deg, transparent 0 25px, rgb(60 80 140 / .1) 25px 26px),
linear-gradient(180deg, var(--lm-paper), var(--lm-paper-2));
box-shadow: 0 18px 30px -16px rgb(0 0 0 / .9);
rotate: calc((var(--i) - 3) * .35deg);
-webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, transparent, #000 1deg 89deg, transparent 90deg) bottom / 14px 10px repeat-x;
mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, transparent, #000 1deg 89deg, transparent 90deg) bottom / 14px 10px repeat-x;
transition: rotate .4s var(--ease), translate .4s var(--ease);
}
.ticket:hover { rotate: 0deg; translate: 0 -4px; }
.ticket::before { content: ""; position: absolute; left: 50%; top: -6px; width: 44px; height: 14px; translate: -50% 0; border-radius: 3px; background: linear-gradient(#9a9aa4, #6c6c76); box-shadow: 0 2px 3px rgb(0 0 0 / .4); }
.ticket__top { display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px dashed rgb(36 31 27 / .35); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6d6252; }
.ticket__who { display: flex; align-items: center; gap: 12px; }
.ticket__portrait { width: 72px; height: 72px; flex: none; image-rendering: pixelated; box-shadow: 0 0 0 2px var(--lm-ink); background: #222; }
.ticket__name { font: 400 1.2rem/1.15 var(--type); color: var(--lm-ink); letter-spacing: 0; }
.ticket__line { margin: 0; font: 400 1.18rem/1.3 var(--type); color: #8a1f17; }
.ticket__meal { width: 128px; height: 96px; image-rendering: pixelated; justify-self: center; filter: drop-shadow(0 6px 6px rgb(0 0 0 / .25)); }
.ticket__dish { margin: 0; font-size: .92rem; line-height: 1.45; color: #4a4038; }
.ticket--sealed {
align-content: center; justify-items: start; min-height: 320px;
background: repeating-linear-gradient(135deg, rgb(36 31 27 / .07) 0 6px, transparent 6px 14px), linear-gradient(180deg, #d6ccb2, #c4b99c);
}
.ticket__count { margin: 18px 0 0; font: 400 4.2rem/1 var(--type); color: var(--lm-ink); }
.ticket__sealed { margin: 0; font: 400 1.05rem/1.35 var(--type); color: #4a4038; max-width: 22ch; }
.ticket .stamp--small { margin-top: 18px; padding: 6px 12px; border-width: 2px; font-size: 1rem; rotate: -6deg; }
.ticket--redacted { background: repeating-linear-gradient(180deg, transparent 0 25px, rgb(60 80 140 / .08) 25px 26px), linear-gradient(180deg, #cfc6ae, #bdb39a); }
.ticket--redacted .ticket__portrait { filter: brightness(.18) contrast(1.4); }
.ticket--redacted .ticket__meal { filter: brightness(0) opacity(.5); }
.redact { background: #121012; color: transparent; border-radius: 1px; padding: 0 .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: color .6s .2s, background .6s .2s; cursor: help; }
.redact:hover, .redact:focus-visible { color: #121012; background: rgb(18 16 18 / .12); outline: none; }
.lm-stamps { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 40px; margin-top: clamp(48px, 7vw, 80px); }
.stamp {
display: inline-block; padding: 10px 20px; border: 3px solid var(--stamp); border-radius: 4px; color: var(--stamp);
font: 400 clamp(1.2rem, 1rem + 1.2vw, 1.9rem)/1 var(--type); letter-spacing: .08em; text-transform: uppercase; rotate: -5deg;
opacity: .88;
}
.stamp--tilt { rotate: 3deg; }
.lm-clock {
position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 3px;
background: #0f0e0c; border: 1px solid rgb(233 227 214 / .2);
font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--amber);
opacity: 0; translate: 0 10px; transition: opacity .4s, translate .4s var(--ease); pointer-events: none;
}
.lm-clock.is-visible { opacity: 1; translate: 0 0; }
.lm-clock__face { position: relative; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 2px #e9e3d6; background: #1a1714; }
.lm-clock__h, .lm-clock__m { position: absolute; left: 50%; bottom: 50%; width: 2px; margin-left: -1px; border-radius: 2px; background: #e9e3d6; transform-origin: 50% 100%; }
.lm-clock__h { height: 7px; rotate: var(--hour, 330deg); }
.lm-clock__m { height: 11px; rotate: var(--min, 0deg); background: var(--amber); }
.page-game--last-meal::after {
content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
background: radial-gradient(80% 70% at 50% 50%, transparent 40%, rgb(0 0 0 / .6) 100%);
opacity: var(--dread, 0);
}
.page-game--last-meal.is-midnight::after { animation: lm-dip 1.4s ease-out; }
@keyframes lm-dip { 0% { opacity: var(--dread, 0); } 18% { opacity: 1; background-color: rgb(0 0 0 / .55); } 100% { opacity: var(--dread, 0); } }
@media (prefers-reduced-motion: reduce) {
.lm-rain, .lm-bulb { animation: none; }
.lm-rain { display: none; }
}