* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* variables */
  --perspective: 10000px;
  --rotate-x: 66deg;
  --rotate-z: -45deg;

  --block-l: 160px;
  --block-w: 160px;
  --block-h: 30px;

  --initial-score: 1;
  --initial-blocks: 2;

  --block-slide-speed: 2s;
  --snap-threshold: 0.08;

  --nb-haptic-feedback-place: 1;
  --nb-haptic-feedback-snap: 2;
  --nb-haptic-feedback-lose: 10;
  --haptic-feedback-duration-ms: 50;
  --haptic-feedback-delay-ms: 80;
  --lose-animation-ms: 400;

  --text-letter-gap: 4px;
  --text-letter-thickness: 2px;
  --text-letter-width: 40px;
  --text-letter-height: 40px;

  --favicon-digit-width: 22;
  --favicon-digit-height: 40;
  --favicon-digit-gap: 6;
  --favicon-padding: 4;

  --bg: #000;
  --fg: #fff;

  --top-block-color-top: #585858d5;
  --top-block-color-left: #585858d5;
  --top-block-color-right: #585858d5;
  --top-block-border-color: #fff;

  --block-color-top: #000000d5;
  --block-color-left: #000000d5;
  --block-color-right: #000000d5;
  --block-border-color: #fff;

  --snapped-color-top: #ffffffd5;
  --snapped-color-left: #ffffffd5;
  --snapped-color-right: #ffffffd5;
  --snapped-border-color: #000000;

  --string-block: <div class= "block" style=
    "--i: {nextTopBlockI}; --bw: {nextWidth}px; --bh: {nextHeight}px; --ox: {newOx}px; --oy: {newOy}px"
    ><div class= "top" ></div><div class= "front-right" ></div><div class=
    "front-left" ></div></div>;
  --string-initial-blocks: <div class= "block" style= "--i: 2" > <div class=
    "top" ></div> <div class= "front-right" ></div> <div class= "front-left"
    ></div> </div> <div class= "block snapped" style= "--i: 1" > <div class=
    "top" ></div> <div class= "front-right" ></div> <div class= "front-left"
    ></div> </div>;
  --string-favicon-svg: <?xml version= "1.0" encoding= "UTF-8" ?><svg xmlns=
    "http://www.w3.org/2000/svg" viewBox= "0 0 {width} {height}" ><rect width=
    "{width}" height= "{height}" fill= "{bg}" / >{content}</svg>;
  --string-favicon-svg-rectangle: <rect x= "{x}" y= "{y}" width= "{width}"
    height= "{height}" fill= "{fg}" / >;
}

/* properties */

@property --slide-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --slide-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --i {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  perspective: var(--perspective);

  background: var(--bg);
  transition: --i 500ms ease;
}

header {
  width: 100%;
  padding-top: 16px;
  opacity: calc(1 - var(--lost));
  transition: opacity calc(var(--lose-animation-ms) * 1ms) ease;
}

.scene {
  position: fixed;
  inset: 0;
  opacity: calc(1 - var(--lost));
  transition: opacity calc(var(--lose-animation-ms) * 1ms) ease;

  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 65%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 65%,
    rgba(0, 0, 0, 0) 100%
  );
}

.tower {
  --stack-step: calc((var(--block-h) - 0.5px) * -1);
  --top-color: var(--block-color-top);
  --left-color: var(--block-color-left);
  --right-color: var(--block-color-right);
  --border-color: var(--block-border-color);

  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--block-l);
  height: var(--block-w);
  transform-style: preserve-3d;
  transform: translate(-50%, -50%);
}

.grid {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--block-l) * 9);
  height: calc(var(--block-w) * 9);
  transform-origin: center center;

  transform: translate(-50%, -50%) rotateX(var(--rotate-x))
    rotateZ(var(--rotate-z))
    translateZ(calc(var(--i) * calc((var(--block-h) - 0.5px) * -1)));

  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.4) 2px, transparent 0px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 2px, transparent 0px);
  background-size: var(--block-l) var(--block-w);
  background-position: center center;

  border-right: 2px solid rgba(255, 255, 255, 0.4);
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  mask-image: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 1) 55%,
    rgba(0, 0, 0, 0.4) 60%,
    rgba(0, 0, 0, 0) 100%
  );
}

.block {
  --bw: var(--block-l);
  --bh: var(--block-w);
  --ox: 0px;
  --oy: 0px;

  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--bw);
  height: var(--bh);

  --z: calc(var(--i) * var(--stack-step));
  transform-style: preserve-3d;
  transform: rotateX(var(--rotate-x)) rotateZ(var(--rotate-z))
    translateX(calc(var(--ox) + var(--slide-x)))
    translateY(calc(var(--oy) + var(--slide-y))) translateZ(var(--z));

  transition: transform 500ms ease;
}

.tower .block:first-child {
  --top-color: var(--top-block-color-top);
  --left-color: var(--top-block-color-left);
  --right-color: var(--top-block-color-right);
  --border-color: var(--top-block-border-color);
  --z: 0px;
}

.tower:has(.block:last-child:nth-child(odd)) .block:first-child {
  animation: first-block-y var(--block-slide-speed) ease-in-out infinite
    alternate;
}

.tower:has(.block:last-child:nth-child(even)) .block:first-child {
  animation: first-block-x var(--block-slide-speed) ease-in-out infinite
    alternate;
}

.block .top,
.block .front-right,
.block .front-left {
  position: absolute;
  box-shadow: 0 0 0 0.5px var(--border-color) inset;
}

.block .top {
  inset: 0;
  background: var(--top-color);
}

.block .front-right {
  left: 0;
  top: 100%;
  width: 100%;
  height: var(--block-h);
  background: var(--right-color);
  transform-origin: top;
  transform: rotateX(-90deg);
}

.block .front-left {
  left: 0;
  top: 0;
  width: var(--block-h);
  height: var(--bh);
  background: var(--left-color);
  transform-origin: left;
  transform: rotateY(90deg);
}

.block:first-child .top {
  backdrop-filter: blur(10px);
}

.block.snapped {
  --top-color: var(--snapped-color-top);
  --left-color: var(--snapped-color-left);
  --right-color: var(--snapped-color-right);
  --border-color: var(--snapped-border-color);
}

/* logo and letters */
.text {
  display: flex;
  justify-content: center;
  gap: var(--text-letter-gap);
  padding: 20px;
}

.score {
  position: absolute;
  font-size: 2em;
  color: #fff;
  margin: 0;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.github {
  position: absolute;
  color: #fff;
  text-decoration: none;
  font-size: 1.5em;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scale(0.5);
}

.letter {
  position: relative;
  width: var(--text-letter-width);
  height: var(--text-letter-height);
}

.letter .bar {
  position: absolute;
  background: #fff;
}
.T .top {
  top: 0;
  left: 0;
  width: 100%;
  height: var(--text-letter-thickness);
}

.T .stem {
  top: 0;
  left: 50%;
  width: var(--text-letter-thickness);
  height: 100%;
  transform: translateX(-50%);
}

.O .top {
  top: 0;
  left: 0;
  width: 100%;
  height: var(--text-letter-thickness);
}

.O .bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--text-letter-thickness);
}

.O .left {
  top: 0;
  left: 0;
  width: var(--text-letter-thickness);
  height: 100%;
}

.O .right {
  top: 0;
  right: 0;
  width: var(--text-letter-thickness);
  height: 100%;
}

.W .left {
  top: 0;
  left: 0;
  width: var(--text-letter-thickness);
  height: 100%;
}

.W .right {
  top: 0;
  right: 0;
  width: var(--text-letter-thickness);
  height: 100%;
}

.W .midL {
  bottom: 0;
  left: 35%;
  width: var(--text-letter-thickness);
  height: 60%;
  transform: translateX(-50%);
}

.W .midR {
  bottom: 0;
  left: 65%;
  width: var(--text-letter-thickness);
  height: 60%;
  transform: translateX(-50%);
}

.R .left {
  top: 0;
  left: 0;
  width: var(--text-letter-thickness);
  height: 100%;
}

.R .top {
  top: 0;
  left: 0;
  width: 100%;
  height: var(--text-letter-thickness);
}

.R .rightTop {
  top: 0;
  right: 0;
  width: var(--text-letter-thickness);
  height: 50%;
}

.R .mid {
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--text-letter-thickness);
}

.R .leg {
  bottom: 0;
  left: 55%;
  width: var(--text-letter-thickness);
  height: 50%;
  transform: translateX(-50%);
}

.G .top {
  top: 0;
  left: 0;
  width: 100%;
  height: var(--text-letter-thickness);
}
.G .bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--text-letter-thickness);
}
.G .left {
  top: 0;
  left: 0;
  width: var(--text-letter-thickness);
  height: 100%;
}
.G .rightBottom {
  bottom: 0;
  right: 0;
  width: var(--text-letter-thickness);
  height: 50%;
}
.G .mid {
  top: 50%;
  left: 50%;
  width: 50%;
  height: var(--text-letter-thickness);
  transform: translateY(-50%);
}

.H .left {
  top: 0;
  left: 0;
  width: var(--text-letter-thickness);
  height: 100%;
}
.H .right {
  top: 0;
  right: 0;
  width: var(--text-letter-thickness);
  height: 100%;
}
.H .mid {
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--text-letter-thickness);
  transform: translateY(-50%);
}

.I .top {
  top: 0;
  left: 0;
  width: 100%;
  height: var(--text-letter-thickness);
}
.I .bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--text-letter-thickness);
}
.I .stem {
  top: 0;
  left: 50%;
  width: var(--text-letter-thickness);
  height: 100%;
  transform: translateX(-50%);
}

.U .left {
  top: 0;
  left: 0;
  width: var(--text-letter-thickness);
  height: 100%;
}
.U .right {
  top: 0;
  right: 0;
  width: var(--text-letter-thickness);
  height: 100%;
}
.U .bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--text-letter-thickness);
}

.B .left {
  top: 0;
  left: 0;
  width: var(--text-letter-thickness);
  height: 100%;
}
.B .top {
  top: 0;
  left: 0;
  width: 85%;
  height: var(--text-letter-thickness);
}
.B .mid {
  top: 50%;
  left: 0;
  width: 85%;
  height: var(--text-letter-thickness);
  transform: translateY(-50%);
}
.B .bottom {
  bottom: 0;
  left: 0;
  width: 85%;
  height: var(--text-letter-thickness);
}
.B .rightTop {
  top: 10%;
  right: 10%;
  width: var(--text-letter-thickness);
  height: 30%;
}
.B .rightBottom {
  bottom: 10%;
  right: 10%;
  width: var(--text-letter-thickness);
  height: 30%;
}

.number .top {
  top: 0;
  left: 0;
  width: 100%;
  height: var(--text-letter-thickness);
}

.number .mid {
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--text-letter-thickness);
  transform: translateY(-50%);
}

.number .bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--text-letter-thickness);
}

.number .leftTop {
  top: 0;
  left: 0;
  width: var(--text-letter-thickness);
  height: 50%;
}

.number .leftBottom {
  bottom: 0;
  left: 0;
  width: var(--text-letter-thickness);
  height: 50%;
}

.number .rightTop {
  top: 0;
  right: 0;
  width: var(--text-letter-thickness);
  height: 50%;
}

.number .rightBottom {
  bottom: 0;
  right: 0;
  width: var(--text-letter-thickness);
  height: 50%;
}

.hidden {
  display: none;
}

/* animations */

@keyframes first-block-x {
  from {
    --slide-x: 200px;
  }
  to {
    --slide-x: -200px;
  }
}

@keyframes first-block-y {
  from {
    --slide-y: -200px;
  }
  to {
    --slide-y: 200px;
  }
}