@font-face { font-family: "Bureau"; src: url(assets/fonts/bureau-compressed-bold.woff2) format("woff2"); font-display: block; }
@font-face { font-family: "BureauSmall"; src: url(assets/fonts/bureau-wide-black.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "NeueBit"; src: url(assets/fonts/neuebit-bold.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Mondwest"; src: url(assets/fonts/mondwest.woff2) format("woff2"); font-display: swap; }

:root {
  --yellow: #FFEB00;
  --orange: #FF4200;
  --blue: #009BDD;
  --pink: #F3A1B8;
  --green: #0BD415;
  --black: #000;
  --white: #fff;
  --u: 1px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg, var(--blue));
  color: var(--fg, var(--black));
  font-family: "NeueBit", ui-monospace, monospace;
  font-weight: 700;
  overflow-x: hidden;
}
img { display: block; user-select: none; -webkit-user-drag: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.noscript { padding: 24px; font-size: 24px; }

/* ---------- Screen ---------- */
.screen {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
}
.screen:focus { outline: none; }
/* fade the content, never the background: no flash of the previous colour */
.screen.enter > * { animation: fadeIn .35s ease-out both; }
.screen.enter-soft > :not(.poster) { animation: fadeIn .4s .35s ease-out both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* impact flash on hits */
.flash { position: fixed; inset: 0; z-index: 30; pointer-events: none; background: var(--fg); animation: flash .24s steps(1) both; }
@keyframes flash { 0% { opacity: 1; } 34% { opacity: 0; } 67% { opacity: .85; } 100% { opacity: 0; } }

/* word-by-word reveal of the question texts */
.rev .w { opacity: 0; }
.rev .w.on, .rev.done .w { opacity: 1; }
/* lines rise from a clipped box; the clip is generous (huge titles, tight leading) and removed once done */
.title .ln { display: block; overflow: hidden; padding: .25em 0 .12em; margin: -.25em 0 -.12em; }
.title.done .ln { overflow: visible; }
.title .ln > span { display: inline-block; }
.lineup .ln > span { animation: lineUp .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--l) * 110ms + 120ms); }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }
.choice.pop { opacity: 0; }
.choice.pop.on { animation: popIn .5s steps(1) both; animation-delay: var(--d); }
@keyframes popIn { 0% { opacity: 1; } 20% { opacity: 0; } 40% { opacity: 1; } 60% { opacity: 0; } 80%, 100% { opacity: 1; } }

/* hourglass: transparent sprite used as a mask, takes the text colour */
.hourglass {
  width: calc(80 * var(--u)); aspect-ratio: 259 / 272;
  background: currentColor;
  -webkit-mask: url(assets/icons/clessidra-sprite.png) 0 0 / 1500% 100% no-repeat;
  mask: url(assets/icons/clessidra-sprite.png) 0 0 / 1500% 100% no-repeat;
  animation: hourglass 4.6s infinite;
}
@keyframes hourglass {
  0% { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
  7.609% { -webkit-mask-position: 7.1429% 0; mask-position: 7.1429% 0; }
  15.217% { -webkit-mask-position: 14.2857% 0; mask-position: 14.2857% 0; }
  22.826% { -webkit-mask-position: 21.4286% 0; mask-position: 21.4286% 0; }
  30.435% { -webkit-mask-position: 28.5714% 0; mask-position: 28.5714% 0; }
  38.043% { -webkit-mask-position: 35.7143% 0; mask-position: 35.7143% 0; }
  45.652% { -webkit-mask-position: 42.8571% 0; mask-position: 42.8571% 0; }
  53.261% { -webkit-mask-position: 50% 0; mask-position: 50% 0; }
  60.870% { -webkit-mask-position: 57.1429% 0; mask-position: 57.1429% 0; }
  68.478% { -webkit-mask-position: 64.2857% 0; mask-position: 64.2857% 0; }
  76.087% { -webkit-mask-position: 71.4286% 0; mask-position: 71.4286% 0; }
  83.696% { -webkit-mask-position: 78.5714% 0; mask-position: 78.5714% 0; }
  93.478% { -webkit-mask-position: 85.7143% 0; mask-position: 85.7143% 0; }
  95.652% { -webkit-mask-position: 92.8571% 0; mask-position: 92.8571% 0; }
  97.826%, 100% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
.hourglass { animation-timing-function: steps(1, end); }

/* energy HUD (levels, stories) */
#hud {
  position: fixed; top: 12px; left: 12px; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  font-size: 18px; line-height: 1; color: var(--fg); text-transform: uppercase;
  transition: opacity .3s;
}
#hud[hidden] { display: flex; opacity: 0; pointer-events: none; }
#hud .hs { width: 14px; height: 14px; }
#hud.hurt { animation: blink .25s steps(1) 4; }

/* Coordinates are in Figma artboard units (1728 wide). */
.a {
  position: absolute;
  left: calc((var(--x, 0) - var(--ox, 0)) * var(--uu, var(--u)));
  top: calc((var(--y, 0) - var(--oy, 0)) * var(--uu, var(--u)));
  width: calc(var(--w) * var(--uu, var(--u)));
}
.a.c { left: 0; right: 0; width: auto; text-align: center; }
.fs { font-size: calc(var(--fs) * var(--uu, var(--u))); line-height: var(--lh, .8); }

.title {
  font-family: "Bureau", Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  word-spacing: -.16em;
  white-space: nowrap;
}
.caps { text-transform: uppercase; }
.mond { font-family: "Mondwest", serif; font-weight: 400; }
.pic { pointer-events: none; will-change: transform; }
.pic img { width: 100%; height: auto; }
.icon { display: inline-block; width: 1em; height: 1em; vertical-align: middle; }
.icon svg { width: 100%; height: 100%; display: block; }

/* footer */
.foot { display: flex; justify-content: space-between; align-items: center; }
.foot .logo { width: calc(105 * var(--u)); color: inherit; }
.foot .logo svg { width: 100%; height: auto; display: block; }
.foot span { font-family: "BureauSmall", sans-serif; font-weight: 400; font-size: calc(14 * var(--u)); letter-spacing: .02em; }
.foot a, .foot .home { color: inherit; text-decoration: none; cursor: pointer; }
.foot a:hover, .foot .home:hover span { animation: blink .5s steps(1) 2; }

/* blinking pixel arrow */
.arrow { display: inline-flex; align-items: center; justify-content: center; }
.arrow .icon { width: calc(45 * var(--u)); height: calc(50 * var(--u)); }
.arrow.right .icon { transform: rotate(-90deg); }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Cover ---------- */
.press { display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; }
.press .icon { width: .45em; height: .7em; }
.press:hover .icon, .press:focus-visible .icon { animation: blink .5s steps(1) infinite; }

/* ---------- Level ---------- */
.label { display: flex; justify-content: center; align-items: center; gap: .25em; text-transform: uppercase; }
.label .icon { width: .42em; height: .6em; }
.choice { text-align: left; display: block; }
.choice .letter { font-family: "Mondwest", serif; font-weight: 400; display: block; font-size: calc(140 * var(--u)); line-height: .75; margin-bottom: calc(33 * var(--u)); }
.choice .ctext { display: block; font-size: calc(64 * var(--u)); line-height: .75; }
.choice:hover .letter, .choice:focus-visible .letter { animation: blink .5s steps(1) infinite; }
.vline { position: absolute; width: 1px; background: currentColor; opacity: .9; }

/* ---------- Hit ---------- */
.stat { font-size: calc(72 * var(--u)); line-height: .8; text-transform: uppercase; }
.row { display: flex; gap: calc(15 * var(--u)); margin-top: calc(40 * var(--u)); min-height: calc(52 * var(--u)); align-items: flex-end; }
.row .icon { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
/* hearts: faint outline underneath, the full heart on top, clipped to half when 10% is left in it */
.hs { position: relative; display: inline-block; width: calc(44 * var(--u)); height: calc(44 * var(--u)); flex: none; }
.hs > .icon { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }
.hs > .base { opacity: .22; }
.hs[data-v="1"] > .fill { clip-path: inset(0 50% 0 0); }
.hs[data-v="0"] > .fill { opacity: 0; }
.hs.hit { animation: hsBlink .6s steps(1); }
@keyframes hsBlink { 0%, 33%, 67% { opacity: 0; transform: translateY(-12%); } 17%, 50%, 83%, 100% { opacity: 1; transform: none; } }
/* damage amount on its own line, big */
.dmgnum { font-size: calc(150 * var(--u)); line-height: .8; margin-top: calc(24 * var(--u)); }
.num.ticking { animation: blink .18s steps(1) infinite; }
.dmgtext.hit { animation: blink .2s steps(1) 4; }
.pic img.hurt { animation: hurt .5s steps(2) 1; }
@keyframes hurt { 0% { transform: translate(10px,-6px); filter: brightness(1.8); } 50% { transform: translate(-10px,6px); filter: none; } 100% { transform: none; } }
.pic img.slide { transition: transform .75s cubic-bezier(.65,0,.25,1); }
.drop { animation: drop .45s cubic-bezier(.2,.9,.3,1.2) both; }
.rise { animation: rise .55s cubic-bezier(.2,.9,.3,1) both; }
@keyframes drop { from { transform: translateY(-120%); } to { transform: none; } }
@keyframes rise { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } }
.shake { animation: shake .4s steps(2) 2; }
@keyframes shake { 0% { transform: translate(6px,-4px); } 50% { transform: translate(-6px,4px); } 100% { transform: none; } }

/* ---------- Story ---------- */
.story p + p { margin-top: .8em; }
.next { display: inline-flex; flex-direction: column; align-items: flex-end; gap: calc(20 * var(--u)); }
.next .mond { font-size: calc(82 * var(--u)); line-height: .8; white-space: nowrap; }
.next .icon { width: calc(45 * var(--u)); height: calc(50 * var(--u)); transform: rotate(-90deg); animation: blink 1s steps(1) infinite; }

/* ---------- Ending ---------- */
.ctas { display: flex; justify-content: center; gap: calc(24 * var(--u)); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(40 * var(--u)); line-height: 1; text-transform: uppercase;
  padding: calc(22 * var(--u)) calc(36 * var(--u));
  border: 2px solid currentColor; text-decoration: none; color: inherit;
}
.btn.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn:hover { animation: blink .5s steps(1) 2; }

/* ---------- Wait ---------- */
.wait { display: grid; place-items: center; }
.wait img { width: calc(80 * var(--u)); image-rendering: pixelated; }

/* ---------- Mute ---------- */
#mute {
  position: fixed; top: 12px; right: 12px; z-index: 20;
  font-size: 18px; line-height: 1; padding: 8px 10px;
  color: var(--fg); text-transform: uppercase;
}

.logo { display: block; }
.logo svg { width: 100%; height: auto; display: block; }

/* ================= DESKTOP ================= */
body.desk #app { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
body.desk .screen { width: 100%; flex: none; }
body.desk .poster { position: absolute; inset: 0; }
body.desk .foot { left: calc(74 * var(--u)); right: calc(74 * var(--u)); width: auto; top: auto; bottom: calc(53 * var(--u)); }

/* ================= MOBILE =================
   From the "Mobile" page of the Figma file (390px frames).
   --m = 1px on a 390px-wide phone, scales up to 480px wide. */
body.mob #hud { display: none; }
body.mob #mute { top: auto; bottom: calc(10 * var(--m)); right: calc(12 * var(--m)); font-size: calc(13 * var(--m)); padding: 6px 8px; }
.screen.m { min-height: 100svh; max-width: calc(390 * var(--m)); margin: 0 auto; padding: calc(64 * var(--m)) calc(20 * var(--m)) calc(44 * var(--m)); display: flex; flex-direction: column; align-items: center; text-align: center; }
.m .mh { position: absolute; top: calc(18 * var(--m)); left: calc(20 * var(--m)); right: calc(20 * var(--m)); display: flex; justify-content: space-between; align-items: center; z-index: 6; }
.m .mh .logo { width: calc(80 * var(--m)); color: inherit; }
.m .mh .home { font-family: "BureauSmall", sans-serif; font-weight: 400; font-size: calc(11 * var(--m)); letter-spacing: .02em; }
.m .mh a:hover, .m .mh .home:hover { animation: blink .5s steps(1) 2; }
.m .m-title { font-family: "Bureau", Impact, sans-serif; font-weight: 400; text-transform: uppercase; word-spacing: -.16em; position: relative; }
.m .m-big { font-size: calc(40 * var(--m)); line-height: .8; text-align: left; align-self: stretch; }
.m .m-big p + p { margin-top: .8em; }
.m .m-pic { position: relative; display: flex; justify-content: center; }
.m .m-arrow .icon, .m .m-next .icon { width: calc(31 * var(--m)); height: calc(34 * var(--m)); }
.m .press { font-size: calc(36 * var(--m)); justify-content: center; }

/* cover: logo splash, then the cover */
.type-cover.m { padding: 0; display: block; }
.m .m-splash { height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(10 * var(--m)); }
.m .m-splash .logo { width: calc(260 * var(--m)); }
.m .m-presents { color: #fff; font-size: calc(29.5 * var(--m)); line-height: .8; }
.m .m-cover { position: relative; height: max(100svh, calc(844 * var(--m))); overflow: hidden; padding-top: calc(64 * var(--m)); }
.m .m-sub { font-size: calc(26.4 * var(--m)); line-height: 1; margin-top: calc(10 * var(--m)); text-transform: uppercase; }
.m .m-manager { position: absolute; left: calc(-91 * var(--m)); top: calc(360 * var(--m)); width: calc(562 * var(--m)); }
.m .m-manager img { width: 100%; }
.m .m-cover .m-press { position: absolute; left: 0; right: 0; top: calc(748 * var(--m)); z-index: 2; color: #fff; }

/* intro */
.type-intro.m { padding-top: calc(46 * var(--m)); }
.type-intro.m .m-pic { margin-top: calc(24 * var(--m)); }
.type-intro.m .m-press { margin-top: auto; padding-top: calc(16 * var(--m)); }

/* level */
.type-level.m { padding-top: calc(94 * var(--m)); }
.m .m-label { font-size: calc(33.5 * var(--m)); line-height: .8; display: flex; gap: .26em; justify-content: center; align-items: center; text-transform: uppercase; }
.m .m-label .icon { width: .42em; height: .6em; }
.m .poster { position: relative; flex: none; overflow: visible; height: calc(var(--ph) * var(--uu)); width: calc(100% + 40 * var(--m)); margin: 0 calc(-20 * var(--m)); }
/* images may rise above the title (cards, ruler): the screen clips the sides, label and arrow stay on top */
.screen.m { overflow: hidden; }
.m .m-label, .m .m-down { position: relative; z-index: 4; }
.m .m-down { margin-top: calc(6 * var(--m)); }
.m .m-down .icon { width: calc(28 * var(--m)); height: calc(31 * var(--m)); }
.type-level.m .m-text { margin-top: calc(48 * var(--m)); }
.m .m-choices { align-self: stretch; display: grid; gap: calc(32 * var(--m)); margin-top: calc(54 * var(--m)); }
.m .m-choice { text-align: left; border: 2px dashed currentColor; padding: calc(14 * var(--m)) calc(16 * var(--m)) calc(20 * var(--m)); }
.m .m-choice .letter { font-size: calc(75 * var(--m)); line-height: .75; margin-bottom: calc(12 * var(--m)); }
.m .m-choice .ctext { font-size: calc(36 * var(--m)); line-height: .75; }
.m .m-choice:active { background: var(--fg); color: var(--bg); }

/* wait */
.m .m-wait { flex: 1; display: grid; place-items: center; }
.m .hourglass { width: calc(64 * var(--m)); }

/* hit and imprevisto */
.type-hit.m { padding-top: calc(91 * var(--m)); }
.m .m-hit { display: flex; flex-direction: column; align-items: center; width: 100%; }
.m .m-hit .m-pic { margin-top: calc(-96 * var(--m)); z-index: 2; }
.m .m-cross .m-title { margin-top: calc(27 * var(--m)); }
.m .m-cross .m-pic { margin-top: calc(-44 * var(--m)); }
.m .m-stats { display: flex; flex-direction: column; align-items: center; margin-top: calc(32 * var(--m)); }
.m .m-stat { font-size: calc(26.4 * var(--m)); line-height: .8; text-transform: uppercase; max-width: calc(300 * var(--m)); }
.m .m-num { font-size: calc(48 * var(--m)); line-height: .8; margin-top: calc(6 * var(--m)); }
.m .m-energy { margin-top: calc(20 * var(--m)); max-width: calc(220 * var(--m)); }
.m .row.hearts { justify-content: center; gap: calc(9.8 * var(--m)); margin-top: calc(10 * var(--m)); min-height: 0; }
.m .row .hs { width: calc(27 * var(--m)); height: calc(27 * var(--m)); }
.m .m-arrow { margin-top: calc(54 * var(--m)); }

/* story */
.type-story.m { padding-top: calc(72 * var(--m)); }
.m .m-story-pic { flex: 1; display: flex; align-items: center; justify-content: center; margin-top: calc(12 * var(--m)); min-height: calc(160 * var(--m)); }
.m .m-story-pic img { max-height: calc(300 * var(--m)); object-fit: contain; }
.m .m-next { flex-direction: column; align-items: center; gap: calc(14 * var(--m)); margin-top: calc(10 * var(--m)); }
.m .m-next .mond { font-size: calc(36.9 * var(--m)); }

/* "Hai vinto / Hai perso" */
.type-final.m { padding-top: calc(142 * var(--m)); }
.m .m-final { display: flex; flex-direction: column; align-items: center; }
.m .m-theend { color: #fff; font-size: calc(45.7 * var(--m)); line-height: .8; margin-bottom: calc(28 * var(--m)); }
.m .m-agency { font-size: calc(36 * var(--m)); line-height: .8; text-transform: uppercase; margin-top: calc(4 * var(--m)); }
.m .m-skulls { display: flex; gap: calc(9 * var(--m)); margin-top: calc(20 * var(--m)); }
.m .m-skulls .icon { width: calc(26 * var(--m)); height: calc(33 * var(--m)); }

/* game over */
.type-end.m { padding-top: calc(104 * var(--m)); }
.m .m-end { display: flex; flex-direction: column; align-items: center; }
.m .m-gameover { color: #fff; font-size: calc(96.8 * var(--m)); line-height: .8; }
.m .m-end .m-pic { margin-top: calc(-28 * var(--m)); z-index: 1; }
.m .m-youwin { font-size: calc(88.5 * var(--m)); line-height: .8; margin-top: calc(-27 * var(--m)); position: relative; z-index: 2; }
.m .m-endtext { font-size: calc(26 * var(--m)); line-height: .8; margin-top: calc(12 * var(--m)); max-width: calc(305 * var(--m)); }
.m .ctas { display: flex; flex-direction: column; gap: calc(12 * var(--m)); margin-top: calc(28 * var(--m)); width: 100%; }
.m .btn { font-size: calc(24 * var(--m)); padding: calc(16 * var(--m)) calc(20 * var(--m)); }

@media (prefers-reduced-motion: reduce) {
  .blink, .drop, .rise, .shake, .screen.enter, .heart.lost, .heart.gain,
  .choice:hover .letter, .press:hover .icon, .btn:hover { animation: none !important; }
  .heart.lost { opacity: 0; }
  .pic { transform: none !important; }
  .next .icon, .hourglass, .flash, .lineup .ln > span, .screen.enter > *, .screen.enter-soft > *,
  .num.ticking, .dmgtext.hit, .pic img.hurt, #hud.hurt { animation: none !important; }
  .rev .w, .choice.pop { opacity: 1 !important; animation: none !important; }
  .hs.hit { animation: none; }
  .heart.lost { opacity: .22; animation: none; }
  .heart.gain { opacity: 1; animation: none; }
  .pic img.slide { transition: none; }
}