@font-face {
  font-family: 'Big Shoulders';
  src: url('/fonts/big-shoulders.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --pared: #ffd400;
  --suelo: #f0be00;
  --tinta: #14110a;
  --tinta2: #5a4700;
  --ficha: #fffdf2;
  --sello: #e4143c;
  --c0: #2447ff;
  --c1: #00935c;
  --c2: #e0338f;
  --c3: #7a3cf0;
  --c4: #008fd6;
  --c5: #e8590c;
  --c6: #0b7a75;
  --c7: #a3452a;
  --cy: #12c6ff;
  --cy2: #5adaff;
  --mg: #ff2e88;
  --mgd: #b3165e;
  --gris: #3a4a57;
}

.plato {
  background: repeating-conic-gradient(from 0deg at 50% 42%, var(--cy) 0deg 6.43deg, var(--cy2) 6.43deg 12.86deg);
}

.logo {
  position: relative;
  width: calc(860px * var(--s, 1));
  height: calc(420px * var(--s, 1));
  transform: rotate(-3deg);
  flex: none;
}

.logo::before {
  content: '';
  position: absolute;
  left: calc(14px * var(--s, 1));
  top: calc(18px * var(--s, 1));
  width: calc(860px * var(--s, 1));
  height: calc(400px * var(--s, 1));
  border-radius: calc(48px * var(--s, 1));
  background: var(--tinta);
}

.logo-card {
  position: absolute;
  inset: 0 0 calc(20px * var(--s, 1)) 0;
  border: calc(10px * var(--s, 1)) solid var(--tinta);
  border-radius: calc(48px * var(--s, 1));
  background: var(--pared);
}

.logo-bulbs {
  position: absolute;
  left: calc(38px * var(--s, 1));
  right: calc(38px * var(--s, 1));
  height: calc(30px * var(--s, 1));
  background: radial-gradient(circle, #fff 0 calc(8px * var(--s, 1)), var(--tinta) calc(8px * var(--s, 1)) calc(11px * var(--s, 1)), transparent calc(12px * var(--s, 1))) 0 0 / calc(74px * var(--s, 1)) 100% repeat-x;
}

.logo-bulbs.top {
  top: calc(10px * var(--s, 1));
}

.logo-bulbs.bottom {
  bottom: calc(10px * var(--s, 1));
}

.logo-t {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(44px * var(--s, 1));
  text-align: center;
  font-family: 'Big Shoulders', 'Archivo', sans-serif;
  font-weight: 900;
  font-size: calc(190px * var(--s, 1));
  line-height: 0.9;
  color: var(--tinta);
}

.logo-r {
  position: absolute;
  left: calc(150px * var(--s, 1));
  top: calc(212px * var(--s, 1));
  width: calc(560px * var(--s, 1));
  height: calc(130px * var(--s, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(24px * var(--s, 1));
  background: var(--mg);
  transform: rotate(2deg);
  font-family: 'Big Shoulders', 'Archivo', sans-serif;
  font-weight: 900;
  font-size: calc(130px * var(--s, 1));
  letter-spacing: calc(18px * var(--s, 1));
  line-height: 1;
  color: #fff;
}

.mgbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 40px;
  background: var(--mg);
  box-shadow: 0 16px 0 var(--mgd);
  color: #fff;
  font-family: 'Big Shoulders', 'Archivo', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
}

.mgbtn:active {
  transform: translateY(10px);
  box-shadow: 0 6px 0 var(--mgd);
}

.mgbtn:disabled {
  opacity: 0.45;
  transform: none;
}

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--pared);
  color: var(--tinta);
  font-family: 'Archivo', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

.disp {
  font-family: 'Big Shoulders', 'Archivo', sans-serif;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0;
}

.disc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  color: #fff;
  font-family: 'Big Shoulders', 'Archivo', sans-serif;
  font-weight: 900;
  line-height: 1;
}

.disc.out {
  background: transparent !important;
  color: var(--tinta);
  border: 7px solid var(--tinta);
}

.disc.free {
  background: transparent !important;
  border: 6px solid rgba(20, 17, 10, 0.3);
}

.num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--pared);
  font-family: 'Big Shoulders', 'Archivo', sans-serif;
  font-weight: 900;
  line-height: 1;
}

.sheet {
  position: absolute;
  background: var(--ficha);
  border-radius: 48px;
  box-shadow: 0 18px 40px rgba(20, 17, 10, 0.2);
  overflow: hidden;
}

.sheet canvas {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}