@font-face {
  font-family: 'Unbounded';
  src: url('fonts/unbounded.woff2') format('woff2');
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --red: #d71942;
  --red-2: #bf1743;
  --red-3: #a4123f;
  --ink: #111111;
  --paper: #fbf8f2;
  --s: 1; /* CSS px per game unit, set from game.js */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #0c0c0c;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  font-family: 'Unbounded', system-ui, -apple-system, sans-serif;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: none;
}

#app {
  position: fixed;
  top: env(safe-area-inset-top);
  bottom: env(safe-area-inset-bottom);
  left: env(safe-area-inset-left);
  right: env(safe-area-inset-right);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 60% at 50% 0%, #2a1a14 0%, rgba(12, 12, 12, 0) 70%),
    #0c0c0c;
}

#game {
  position: relative;
  overflow: hidden;
  background: #1a1411;
  box-shadow: 0 0 calc(60px * var(--s)) rgba(0, 0, 0, .6);
}

#stage {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

button {
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(46px * var(--s));
  padding: 0 calc(12px * var(--s));
  display: flex;
  align-items: center;
  gap: calc(10px * var(--s));
  background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 5;
}
.hud-logo { height: calc(17px * var(--s)); width: auto; display: block; }
#progress {
  flex: 1;
  display: flex;
  gap: calc(3px * var(--s));
  padding: 0 calc(4px * var(--s));
}
#progress i {
  flex: 1;
  height: calc(5px * var(--s));
  border-radius: calc(3px * var(--s));
  background: rgba(255, 255, 255, .22);
  transition: background .3s;
}
#progress i.done { background: #fff; }
#progress i.cur { background: var(--red); box-shadow: 0 0 calc(8px * var(--s)) rgba(215, 25, 66, .8); }
.hud-score {
  display: flex;
  align-items: baseline;
  gap: calc(3px * var(--s));
  font-weight: 800;
  font-size: calc(15px * var(--s));
  font-variant-numeric: tabular-nums;
  min-width: calc(54px * var(--s));
  justify-content: flex-end;
}
.hud-score small { font-size: calc(6.5px * var(--s)); font-weight: 600; opacity: .7; letter-spacing: .08em; }
.icon-btn {
  pointer-events: auto;
  width: calc(30px * var(--s));
  height: calc(30px * var(--s));
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0;
}
.icon-btn svg { width: 60%; height: 60%; fill: currentColor; }
.icon-btn .snd-off { display: none; }
.icon-btn.muted .snd-on { display: none; }
.icon-btn.muted .snd-off { display: block; }

/* ---------- order ticket ---------- */
.ticket {
  position: absolute;
  left: 50%;
  top: calc(55px * var(--s));
  width: calc(292px * var(--s));
  padding: calc(9px * var(--s)) calc(13px * var(--s)) calc(13px * var(--s));
  color: var(--ink);
  background: var(--paper);
  transform: translateX(-50%) rotate(-1.2deg);
  transform-origin: 50% 0;
  box-shadow: 0 calc(6px * var(--s)) calc(14px * var(--s)) rgba(0, 0, 0, .35);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity .25s;
  /* zig-zag bottom edge */
  --z: calc(6px * var(--s));
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--z) * 2) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--z) * 2) 100%;
}
.ticket.show { opacity: 1; }
.ticket.mini .ticket-hint { max-height: 0; opacity: 0; margin-top: 0; }
.ticket.swap { animation: ticketIn .55s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes ticketIn {
  0% { transform: translateX(-50%) translateY(calc(-30px * var(--s))) rotate(-6deg); opacity: 0; }
  100% { transform: translateX(-50%) rotate(-1.2deg); opacity: 1; }
}
.ticket::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(34px * var(--s));
  height: calc(8px * var(--s));
  transform: translateX(-50%);
  background: linear-gradient(#3a3a3a, #111);
  border-radius: 0 0 calc(3px * var(--s)) calc(3px * var(--s));
}
.ticket-head {
  display: flex;
  justify-content: space-between;
  font-size: calc(7.5px * var(--s));
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--red);
  padding-top: calc(3px * var(--s));
  border-bottom: calc(1px * var(--s)) dashed rgba(0, 0, 0, .25);
  padding-bottom: calc(4px * var(--s));
  margin-bottom: calc(5px * var(--s));
}
.ticket-title {
  font-size: calc(14.5px * var(--s));
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.ticket-hint {
  max-height: calc(40px * var(--s));
  overflow: hidden;
  transition: max-height .35s, opacity .35s, margin .35s;
  margin-top: calc(4px * var(--s));
  font-size: calc(8.6px * var(--s));
  font-weight: 400;
  line-height: 1.4;
  color: #3a3a3a;
}

/* ---------- meter pill ---------- */
.pill {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%) scale(.9);
  display: flex;
  align-items: center;
  gap: calc(8px * var(--s));
  padding: calc(6px * var(--s)) calc(12px * var(--s));
  background: rgba(17, 17, 17, .88);
  border-radius: 999px;
  font-size: calc(8px * var(--s));
  font-weight: 700;
  letter-spacing: .06em;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  z-index: 3;
  white-space: nowrap;
}
.pill.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pill.shake { animation: shake .35s; }
@keyframes shake {
  0%, 100% { transform: translate(-50%, -50%); }
  25% { transform: translate(-46%, -50%); }
  75% { transform: translate(-54%, -50%); }
}
.pill-bar {
  position: relative;
  width: calc(110px * var(--s));
  height: calc(8px * var(--s));
  border-radius: 99px;
  background: rgba(255, 255, 255, .15);
  overflow: hidden;
}
.pill-bar i {
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(70, 200, 110, .45);
}
.pill-bar b {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: #fff;
  border-radius: 99px;
  transition: width .12s;
}
.pill-bar b.over { background: var(--red); }
.pill-bar b.good { background: #4bd27a; }
.pill-val { min-width: calc(26px * var(--s)); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- action button ---------- */
#actions {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}
#actions .btn {
  pointer-events: auto;
  opacity: 0;
  transform: translateY(calc(10px * var(--s))) scale(.9);
  transition: opacity .2s, transform .25s cubic-bezier(.2, .9, .3, 1.3);
}
#actions.show .btn { opacity: 1; transform: none; }
#actions:not(.show) .btn { pointer-events: none; }

.btn {
  font-weight: 800;
  font-size: calc(12px * var(--s));
  letter-spacing: .06em;
  color: #fff;
  padding: calc(13px * var(--s)) calc(26px * var(--s));
  border-radius: 999px;
  min-width: calc(150px * var(--s));
  box-shadow: 0 calc(5px * var(--s)) 0 rgba(0, 0, 0, .35);
  transition: transform .08s;
}
.btn:active { transform: translateY(calc(3px * var(--s))); box-shadow: 0 calc(2px * var(--s)) 0 rgba(0, 0, 0, .35); }
.btn-red { background: var(--red); box-shadow: 0 calc(5px * var(--s)) 0 var(--red-3); }
.btn-red:active { box-shadow: 0 calc(2px * var(--s)) 0 var(--red-3); }
.btn-ink { background: var(--ink); }
.btn-big { font-size: calc(15px * var(--s)); padding: calc(16px * var(--s)) calc(40px * var(--s)); }

/* ---------- rating toast ---------- */
.toast {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(10px * var(--s)) calc(18px * var(--s));
  background: var(--red);
  color: #fff;
  border-radius: calc(6px * var(--s));
  box-shadow: 0 calc(8px * var(--s)) calc(24px * var(--s)) rgba(0, 0, 0, .4);
  pointer-events: none;
  opacity: 0;
  z-index: 6;
  transform: translate(-50%, -50%) scale(.4) rotate(-6deg);
}
.toast b { font-size: calc(20px * var(--s)); font-weight: 900; letter-spacing: -.01em; }
.toast span { font-size: calc(11px * var(--s)); font-weight: 700; opacity: .9; margin-top: calc(2px * var(--s)); }
.toast.ink { background: var(--ink); }
.toast.go { animation: toast 1.25s cubic-bezier(.2, .9, .3, 1.2) forwards; }
@keyframes toast {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-12deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(-4deg); }
  30% { transform: translate(-50%, -50%) scale(1) rotate(-4deg); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(.95) rotate(-4deg); }
}

/* ---------- screens ---------- */
.screen {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 8;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility 0s .35s;
}
.screen.show { opacity: 1; visibility: visible; transition: opacity .35s; }

#intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: linear-gradient(180deg, rgba(10, 8, 7, .35) 0%, rgba(10, 8, 7, .78) 48%, rgba(10, 8, 7, .92) 100%);
}
.intro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 calc(30px * var(--s));
  margin-top: calc(10px * var(--s));
}
.intro-logo { width: calc(120px * var(--s)); height: auto; margin-bottom: calc(26px * var(--s)); filter: drop-shadow(0 calc(6px * var(--s)) calc(14px * var(--s)) rgba(0, 0, 0, .5)); }
#intro h1 {
  margin: 0;
  font-size: calc(32px * var(--s));
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.02em;
}
#intro p {
  margin: calc(14px * var(--s)) 0 calc(26px * var(--s));
  font-size: calc(10px * var(--s));
  font-weight: 400;
  line-height: 1.55;
  opacity: .85;
  max-width: calc(280px * var(--s));
}
.best { margin-top: calc(16px * var(--s)); font-size: calc(8.5px * var(--s)); font-weight: 600; opacity: .7; letter-spacing: .05em; min-height: 1em; }
.intro-foot {
  position: absolute;
  bottom: calc(16px * var(--s));
  font-size: calc(7.5px * var(--s));
  font-weight: 600;
  letter-spacing: .12em;
  opacity: .55;
}

/* ---------- result receipt ---------- */
#result { pointer-events: none; }
#result.show { pointer-events: auto; }
.receipt {
  position: absolute;
  left: 50%;
  bottom: calc(10px * var(--s));
  width: calc(340px * var(--s));
  transform: translateX(-50%);
  background: var(--paper);
  color: var(--ink);
  padding: calc(16px * var(--s)) calc(16px * var(--s)) calc(14px * var(--s));
  box-shadow: 0 calc(-6px * var(--s)) calc(30px * var(--s)) rgba(0, 0, 0, .45);
  --z: calc(6px * var(--s));
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--z) * 2) 100%;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--z) * 2) 100%;
}
#result.show .receipt { animation: receiptIn .6s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes receiptIn { from { transform: translate(-50%, 60%); } to { transform: translateX(-50%); } }
.r-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: calc(4px * var(--s));
  padding-bottom: calc(8px * var(--s));
  border-bottom: calc(1px * var(--s)) dashed rgba(0, 0, 0, .3);
}
.r-head img { height: calc(16px * var(--s)); }
.r-meta { display: flex; flex-direction: column; align-items: flex-end; font-size: calc(6.5px * var(--s)); font-weight: 600; letter-spacing: .08em; opacity: .6; gap: calc(2px * var(--s)); }
.r-title { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: end; padding: calc(10px * var(--s)) 0 calc(8px * var(--s)); }
.stars { display: flex; gap: calc(3px * var(--s)); grid-column: 1; }
.stars svg { width: calc(15px * var(--s)); height: calc(15px * var(--s)); }
.rank { grid-column: 1; font-size: calc(17px * var(--s)); font-weight: 900; color: var(--red); letter-spacing: -.01em; margin-top: calc(4px * var(--s)); line-height: 1.05; }
.r-total { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-variant-numeric: tabular-nums; }
.r-total b { font-size: calc(30px * var(--s)); font-weight: 900; letter-spacing: -.03em; }
.r-total span { font-size: calc(9px * var(--s)); font-weight: 600; opacity: .55; }
.r-lines {
  list-style: none;
  margin: 0;
  padding: calc(8px * var(--s)) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(14px * var(--s));
  row-gap: calc(6px * var(--s));
  border-top: calc(1px * var(--s)) dashed rgba(0, 0, 0, .3);
  border-bottom: calc(1px * var(--s)) dashed rgba(0, 0, 0, .3);
}
.r-lines li { font-size: calc(7.2px * var(--s)); font-weight: 600; }
.r-lines li div { display: flex; justify-content: space-between; margin-bottom: calc(3px * var(--s)); }
.r-lines li b { font-weight: 800; font-variant-numeric: tabular-nums; }
.r-lines li i { display: block; height: calc(3px * var(--s)); border-radius: 9px; background: rgba(0, 0, 0, .1); overflow: hidden; }
.r-lines li i::after { content: ''; display: block; height: 100%; width: var(--w, 0%); background: var(--c, var(--red)); border-radius: 9px; }
.r-foot { display: flex; flex-direction: column; gap: calc(3px * var(--s)); padding: calc(8px * var(--s)) 0 calc(10px * var(--s)); font-size: calc(7.5px * var(--s)); font-weight: 500; text-align: center; color: #444; }
.r-foot #rBest { font-weight: 700; color: var(--ink); }
.r-btns { display: flex; gap: calc(10px * var(--s)); }
.r-btns .btn { flex: 1; min-width: 0; padding: calc(12px * var(--s)) calc(10px * var(--s)); font-size: calc(10.5px * var(--s)); }

/* ---------- rotate notice ---------- */
.rotate {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 20;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #111;
  font-size: 14px;
  font-weight: 700;
}
.rotate svg { width: 48px; height: 48px; animation: rot 1.6s ease-in-out infinite; }
@keyframes rot { 0%, 30% { transform: rotate(90deg); } 60%, 100% { transform: rotate(0); } }
.rotate.show { display: flex; }

@media (prefers-reduced-motion: reduce) {
  .ticket.swap, .toast.go, #result.show .receipt { animation-duration: .01s; }
}