/* WC: vessan laattojen ja bajamajan vihreän henkinen käyttöliittymä. Pystykuva puhelimella. */
:root {
  --card: #FFFDF6;
  --ink: #2A2320;
  --green: #2E8B57;
  --green-dark: #22693F;
  --brown: #6B4423;
  --cream: #F3E7CF;
  --warn: #E2553C;
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #9CCBF0;
  font-family: var(--font);
  font-weight: 800;
  color: var(--ink);
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

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

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  padding: calc(env(safe-area-inset-top) + 10px) 14px calc(env(safe-area-inset-bottom) + 10px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.outline {
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.45), 0 0 6px rgba(0,0,0,.35);
}

#topbar { display: flex; justify-content: space-between; align-items: baseline; }
#clock, #score { color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.45), 0 0 6px rgba(0,0,0,.35); }
#clock { font-size: clamp(30px, 9vw, 44px); font-variant-numeric: tabular-nums; }
#score { font-size: clamp(20px, 6vw, 28px); font-variant-numeric: tabular-nums; }

#lives { color: #fff; font-size: clamp(13px, 3.8vw, 16px); text-shadow: 0 1px 0 rgba(0,0,0,.5); }
/* Tehtävät HUDissa: kolme tiivistä riviä. */
#missions-hud {
  align-self: flex-start;
  background: rgba(255, 253, 246, .88);
  border-radius: 10px;
  padding: 4px 8px;
  font-size: clamp(10px, 2.9vw, 12px);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mission { display: flex; gap: 5px; align-items: baseline; }
.mission.done { opacity: .55; text-decoration: line-through; }
.mission small { display: block; opacity: .7; font-size: 11px; text-decoration: none; }
.mprog { font-weight: 700; color: #2E8B57; }
.tutorial-step { font-size: clamp(12px, 3.5vw, 14px); font-weight: 700; }
.tut-kicker { display: block; font-size: 10px; letter-spacing: .06em; opacity: .6; text-decoration: none; }
.goal-line { color: #1F7A3A; font-weight: 700; }
.missions-box { background: var(--cream); border-radius: 12px; padding: 8px 10px; font-size: 13px; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.missions-head { font-size: 11px; font-weight: 700; letter-spacing: .04em; opacity: .7; text-align: center; }

#meters { display: flex; flex-direction: column; gap: 6px; width: min(62vw, 260px); }
.meter { display: flex; align-items: center; gap: 8px; }
.meter .label { width: 54px; font-size: 12px; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.bar { flex: 1; height: 14px; border-radius: 7px; background: rgba(0,0,0,.35); overflow: hidden; border: 2px solid rgba(255,255,255,.75); }
.bar > div { height: 100%; width: 0; border-radius: 5px; transition: width .15s linear; }
/* Puolivälin merkki: WC:hen pääsee, kun jompikumpi mittari ylittää sen. */
#meters .bar { position: relative; }
#meters .bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.6); }
/* WC-raja: pönttömerkki puolivälin viivan päällä (mittarin yli → WC:hen pääsee). */
#meters .bar { overflow: visible; }
#meters .bar > div:first-child { border-radius: 5px; }
.wc-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 13px; line-height: 1; filter: drop-shadow(0 0 2px rgba(0,0,0,.5)); z-index: 2; pointer-events: none; }
#meters .label { width: 66px; white-space: nowrap; }
#wc-ok { align-self: flex-start; background: #2E8B57; color: #fff; border-radius: 8px; padding: 3px 8px; font-size: 13px; animation: boing .35s ease-out; }
#urgency { background: linear-gradient(90deg, #6CC24A, #F2C531 55%, #E2553C); background-size: 260px 100%; }
#urgency { position: relative; }
#pee-text.miss { color: #FF6B5B; }
#urgency.panic { animation: pulse .4s infinite alternate; }
#hydration { background: #4AA8E8; }
@keyframes pulse { from { filter: brightness(1); } to { filter: brightness(1.6); } }

/* Ruoan kuvake syöntiponnahduksessa. */
.toast img { width: 34px; height: 34px; vertical-align: middle; margin: -8px 4px -8px -4px; }
#toasts {
  position: fixed;
  left: 0; right: 0;
  top: 38%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.toast {
  color: #fff;
  font-size: clamp(16px, 5vw, 22px);
  text-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 8px rgba(0,0,0,.4);
  animation: rise 1.2s ease-out forwards;
}
@keyframes rise { from { transform: translateY(10px); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-40px); opacity: 0; } }

#big {
  position: fixed;
  left: 0; right: 0; top: 24%;
  text-align: center;
  font-size: clamp(36px, 12vw, 64px);
  color: #fff;
  text-shadow: 0 3px 0 rgba(0,0,0,.5), 0 0 12px rgba(0,0,0,.4);
  animation: boing .35s ease-out;
}
#big.bad { color: #FFD2C8; }
@keyframes boing { from { transform: scale(.4); } 70% { transform: scale(1.15); } to { transform: scale(1); } }

#hint {
  position: fixed;
  left: 16px; right: 16px; bottom: 22%;
  text-align: center;
  color: #fff;
  font-size: clamp(16px, 5vw, 22px);
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}
#hint small { font-size: .7em; }

#push {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(env(safe-area-inset-bottom) + 24px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
#push-text { text-align: center; color: #fff; font-size: clamp(22px, 7vw, 32px); text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.bar.wide { height: 18px; }
#pee {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(env(safe-area-inset-bottom) + 20px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
#pee-text { text-align: center; color: #fff; font-size: clamp(22px, 7vw, 30px); text-shadow: 0 2px 0 rgba(0,0,0,.5); }
#pee .label { width: 70px; }
#pee-hint { text-align: center; color: #fff; font-size: 13px; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
#bladder-bar { background: #F5D63D; width: 100%; }
#clean-bar { background: #6CC24A; }
.btn.pee { background: #D9B21F; box-shadow: 0 4px 0 #A8870F; color: #2A2320; }

#push-bar { background: linear-gradient(90deg, #F2C531, #E2553C); }

.card {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 420px);
  max-height: calc(100% - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto;
  background: var(--card);
  border-radius: 22px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.card h1 { margin: 0; text-align: center; font-size: clamp(22px, 7vw, 30px); text-wrap: balance; }
.card p { margin: 0; }
.center { text-align: center; }
.small { font-size: 13px; font-weight: 700; opacity: .8; }
.kicker { text-align: center; font-size: 12px; letter-spacing: .08em; color: var(--green-dark); }
.logo { margin: -6px 0 -4px !important; line-height: 0; }
.logo img { height: min(24vh, 230px); width: auto; max-width: 100%; }
.sub { text-align: center; font-weight: 700; }
.order-box { background: var(--cream); border-radius: 12px; padding: 10px 12px; text-align: center; font-size: 14px; }

.btn {
  font: inherit;
  font-size: 18px;
  color: #fff;
  background: var(--green);
  border: 0;
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 4px 0 var(--green-dark);
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--green-dark); }
.link-btn { background: none; border: 0; padding: 4px; color: var(--green); font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.card h2 { margin: 6px 0 0; font-size: 17px; text-align: center; }
.card .info { font-size: 14px; line-height: 1.4; font-weight: 500; }
.bristol-list { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.45; font-weight: 500; display: flex; flex-direction: column; gap: 3px; }
.bristol-list b { font-weight: 800; }
/* Pissakartta: sävyt kokoelmassa, tulosrivissä ja ohjeessa. */
#urine-chart { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.ucell { aspect-ratio: 1; border-radius: 50%; background: #ECE6D8; display: grid; place-items: center; font-size: 10px; color: rgba(0,0,0,.55); }
.ucell.have { box-shadow: inset 0 0 0 2px rgba(0,0,0,.15); }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; margin-right: 6px; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.2); }
.pee-list { list-style: none; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.5; font-weight: 500; }
.pee-list b { font-weight: 800; }
.urine-line { font-weight: 600; }
.btn.ghost { background: #E9E2D2; color: var(--ink); box-shadow: 0 4px 0 #C9C0AD; }
.btn.big { font-size: 22px; padding: 22px; background: var(--brown); box-shadow: 0 5px 0 #4A2E17; }
.btn.big .key { font-size: 12px; opacity: .75; display: block; }
@media (hover: none) { .btn.big .key { display: none; } }
.btn.big.holding { background: #8A5A2E; transform: translateY(3px); box-shadow: 0 2px 0 #4A2E17; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.chip { background: var(--cream); border-radius: 999px; padding: 5px 10px; font-size: 13px; }
.chip .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.points { text-align: center; font-size: 15px; line-height: 1.5; }
.points b { font-size: 22px; }
.new { text-align: center; color: #B07A00; font-size: 15px; animation: boing .4s ease-out; }

#collection-grid { display: grid; grid-template-columns: auto repeat(7, 1fr); gap: 4px; font-size: 11px; align-items: center; }
#collection-grid .cell { aspect-ratio: 1; border-radius: 6px; background: #ECE6D8; display: grid; place-items: center; font-size: 10px; color: #fff; }
#collection-grid .cell.have { box-shadow: inset 0 0 0 2px rgba(0,0,0,.15); }
#collection-grid .head { text-align: center; font-size: 8px; opacity: .7; }

/* Tuloskortti ruudun alaosaan, jotta pönttö näkyy sen yläpuolella. */
#result {
  top: auto;
  bottom: calc(env(safe-area-inset-bottom) + 14px);
  transform: translateX(-50%);
  max-height: 58%;
  gap: 8px;
  padding: 16px;
}

#end-list { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; }
.end-row { display: flex; justify-content: space-between; gap: 8px; background: #F5F0E4; border-radius: 10px; padding: 7px 10px; }
.end-row.bad { background: #F8D9D2; }
.end-row span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

#boot { position: fixed; inset: 0; display: grid; place-items: center; background: #9CCBF0; font-size: 20px; }