/* Tokens mirror DESIGN.md. */
@font-face {
  font-family: "Lilita One";
  src: url("../assets/fonts/LilitaOne-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --ink: oklch(0.25 0.03 260);
  --paper: oklch(0.985 0.012 90);
  --sky-top: oklch(0.78 0.09 235);
  --grass: oklch(0.74 0.15 135);
  --cooler-lid: oklch(0.55 0.15 250);
  --pee: oklch(0.88 0.17 98);
  --alert: oklch(0.84 0.16 80);
  --danger: oklch(0.6 0.22 27);
  --ok: oklch(0.7 0.17 150);
  --display: "Lilita One", system-ui, sans-serif;
  --shadow: 0 4px 0 var(--ink);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--grass);
  color: var(--ink);
  font: 16px/1.45 system-ui, sans-serif;
  overscroll-behavior: none;
}

[hidden] { display: none !important; }

#app {
  position: fixed;
  inset: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ----- HUD ----- */

#hud { pointer-events: none; }

.tile {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  padding: 8px 12px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.tile--score {
  left: max(12px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 12px;
  align-items: center;
}

.tile__label { font-size: 14px; grid-column: 1 / -1; }
.tile__value { font: 44px/1 var(--display); font-variant-numeric: tabular-nums; }
.tile__sub { font: 20px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.tile__sub b { display: block; font-weight: 400; color: var(--danger); }

.tile--strikes {
  right: max(68px, calc(env(safe-area-inset-right) + 68px));
  display: flex;
  gap: 8px;
  padding: 12px;
}

/* An eye that opens (and turns red) for every strike. */
.eye {
  width: 26px;
  height: 16px;
  border: 3px solid var(--ink);
  border-radius: 50% / 100% 100% 0 0;
  border-bottom-width: 0;
  opacity: 0.35;
}
.eye.is-open {
  height: 20px;
  border-radius: 50%;
  border-bottom-width: 3px;
  background: radial-gradient(circle, var(--ink) 0 28%, var(--danger) 30% 100%);
  opacity: 1;
}

.bladder {
  position: absolute;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(360px, calc(100% - 32px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.bladder__label { font: 20px/1 var(--display); }
.bladder__track {
  flex: 1;
  height: 16px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  background: oklch(0.92 0.01 240);
}
.bladder__fill {
  height: 100%;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0.4);
  background: var(--pee);
}
.bladder.is-urgent .bladder__fill { background: var(--danger); }
.bladder.is-urgent { animation: shiver 0.12s linear infinite; }

@keyframes shiver {
  0%, 100% { translate: 0 0; }
  50% { translate: 2px 0; }
}

/* ----- banner ----- */

#banner {
  position: absolute;
  left: 50%;
  top: 22%;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 12px 20px;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--danger);
  color: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--shadow);
  font: 28px/1.15 var(--display);
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
  animation: pop 0.25s cubic-bezier(0.3, 1.6, 0.6, 1);
}
#banner.is-info { background: var(--alert); color: var(--ink); font-size: 20px; top: 16%; }

@keyframes pop {
  from { scale: 0.4; opacity: 0; }
}

/* ----- buttons ----- */

.btn, .icon-btn {
  font: 28px/1 var(--display);
  color: var(--ink);
  background: var(--pee);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow);
  cursor: pointer;
  touch-action: manipulation;
}
.btn { min-height: 56px; padding: 12px 32px; }
.btn:hover, .icon-btn:hover { filter: brightness(1.06); }
.btn:active, .icon-btn:active { translate: 0 4px; box-shadow: none; }
.btn:focus-visible, .icon-btn:focus-visible { outline: 4px solid var(--cooler-lid); outline-offset: 3px; }

.icon-btn {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 48px;
  height: 48px;
  padding: 0;
  font-size: 24px;
  background: var(--paper);
}
.icon-btn[aria-pressed="true"] { text-decoration: line-through; opacity: 0.6; }

/* ----- panels ----- */

.panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(440px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow: auto;
  transform: translate(-50%, -50%);
  padding: 24px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 6px 0 var(--ink);
  text-align: center;
  touch-action: pan-y;
}
.panel h1, .panel h2 {
  margin: 0 0 8px;
  font: 400 64px/1 var(--display);
  color: var(--cooler-lid);
  text-wrap: balance;
}
.panel h2 { font-size: 44px; }
.panel__lead { margin: 0 0 16px; font-size: 16px; }
.panel__note { margin: 16px 0 0; font-size: 14px; }
.panel .btn { margin-top: 8px; }

.rules {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  text-align: left;
  display: grid;
  gap: 8px;
}
.rules li {
  padding: 8px 12px;
  border-radius: 12px;
  background: oklch(0.95 0.03 95);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0;
}
.stats div { padding: 8px 4px; border-radius: 12px; background: oklch(0.95 0.03 95); }
.stats dt { font-size: 14px; }
.stats dd { margin: 0; font: 28px/1.1 var(--display); font-variant-numeric: tabular-nums; }

@media (max-width: 420px) {
  .panel { padding: 16px; }
  .panel h1 { font-size: 44px; }
  .panel h2 { font-size: 28px; }
  .tile__value { font-size: 28px; }
}

@media (max-height: 480px) {
  .panel h1 { font-size: 44px; }
  .rules { gap: 4px; }
  .rules li { padding: 4px 12px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .bladder.is-urgent, #banner { animation: none; }
}