/* tokens, sampled straight off assets/avatar.png (PIL pixel probe) */
:root{
  --gold: #ffc658;
  --gold-rim: #fdcd51;
  --cream: #fff7e0;
  --door: #bc691e;
  --door-dark: #6b3a0f;
  --ink: #211104;
  --ink-soft: rgba(33,17,4,0.62);
}

*{ box-sizing: border-box; }

@font-face{
  font-family: "Baloo 2";
  src: url("fonts/baloo2-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Baloo 2";
  src: url("fonts/baloo2-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Baloo 2";
  src: url("fonts/baloo2-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Spline Sans Mono";
  src: url("fonts/splinemono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Spline Sans Mono";
  src: url("fonts/splinemono-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

html, body{
  height: 100%;
  margin: 0;
  background: var(--gold);
  overflow: hidden;
}

body{
  font-family: "Baloo 2", ui-rounded, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
}

.hall{
  min-height: 100dvh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 3vh, 28px) clamp(14px, 5vw, 32px);
  position: relative;
}

.frame{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vh, 14px);
  width: 100%;
  max-width: 460px;
}

.scene{
  position: relative;
  width: min(64vw, 58vh, 360px);
}

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

/* extra motion-trail flash on top of the art's own trail, fires on RUN */
.whoosh{
  position: absolute;
  left: -4%;
  top: 40%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  opacity: 0;
}
.whoosh span{
  display: block;
  width: 34px;
  height: 5px;
  background: var(--ink);
  opacity: 0.55;
}
.whoosh span:nth-child(2){ width: 24px; }
.whoosh span:nth-child(3){ width: 16px; }

.scene.running .clock{
  animation: lurch 480ms cubic-bezier(.3,.6,.3,1);
}
.scene.running .whoosh{
  animation: whoosh-flash 480ms ease-out;
}

@keyframes lurch{
  0%{ transform: translateX(0) rotate(0deg); }
  35%{ transform: translateX(14px) rotate(-2deg); }
  60%{ transform: translateX(-3px) rotate(1deg); }
  100%{ transform: translateX(0) rotate(0deg); }
}
@keyframes whoosh-flash{
  0%{ opacity: 0; transform: translateX(0); }
  30%{ opacity: 1; transform: translateX(-10px); }
  100%{ opacity: 0; transform: translateX(-22px); }
}

.line{
  margin: 0;
  font-size: clamp(14px, 3.4vw, 17px);
  font-weight: 600;
  text-align: center;
  color: var(--ink);
}

.run{
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--cream);
  background: var(--door);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 11px 26px;
  cursor: pointer;
  box-shadow: 3px 4px 0 var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.run:hover{ background: var(--door-dark); }
.run:active{
  transform: translate(2px, 3px);
  box-shadow: 1px 1px 0 var(--ink);
}

.board{
  display: flex;
  gap: 10px;
}

.board-cell{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: var(--ink);
  border: 2px solid var(--ink);
  padding: 6px 14px;
  min-width: 84px;
}

.board-label{
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--gold-rim);
  text-transform: uppercase;
}

.board-num{
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 20px;
  color: var(--cream);
  letter-spacing: 0.06em;
  display: inline-block;
}
.board-num.frozen{ color: rgba(255,247,224,0.4); }

.board-num.flip{
  animation: flip 260ms ease;
}
@keyframes flip{
  0%{ transform: translateY(0); opacity: 1; }
  40%{ transform: translateY(-10px); opacity: 0; }
  41%{ transform: translateY(10px); }
  100%{ transform: translateY(0); opacity: 1; }
}

.plate{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--door);
  border: 3px solid var(--ink);
  padding: 8px 14px;
}

.tk{
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 12px;
  color: var(--cream);
  letter-spacing: 0.03em;
}

.sep{ color: rgba(255,247,224,0.5); }

.ca{
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--cream);
  background: var(--door-dark);
  border: 1px solid var(--ink);
  padding: 5px 9px;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.ca:hover{ background: var(--ink); }

.waiting{
  position: fixed;
  top: clamp(10px, 2.4vh, 18px);
  right: clamp(12px, 3vw, 22px);
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.links{
  position: fixed;
  left: 0;
  right: 0;
  bottom: clamp(10px, 2.2vh, 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

.links a{
  color: var(--ink);
  text-decoration: none;
  padding: 4px 6px;
  opacity: 0.75;
}
.links a:hover{ opacity: 1; }

@media (prefers-reduced-motion: reduce){
  .scene.running .clock,
  .scene.running .whoosh{
    animation: none !important;
  }
  .board-num.flip{
    animation: none !important;
  }
}

@media (max-width: 420px){
  .scene{ width: min(70vw, 300px); }
  .board-cell{ min-width: 72px; padding: 6px 10px; }
  .board-num{ font-size: 17px; }
}

@media (max-height: 620px){
  .hall{ padding-top: 8px; padding-bottom: 8px; }
  .scene{ width: min(48vh, 56vw, 280px); }
}