:root {
  --ink: #f2ece0;
  --dim: #9aa3ad;
  --line: #2b3440;
  --card: #161d26;
  --glass: rgba(12, 17, 23, .72);
  --page: #0c1117;
  --warm: #ffb443;
  --love: #ff6b8b;
  --good: #3fbd6b;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.5 "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* the town fills the window */
canvas#view {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: block;
  touch-action: none;
  outline: none;
  background: #1d2229;
}

.hidden { display: none !important; }
.dim { color: var(--dim); font-size: .82rem; }

/* ---- the numbers on top ---- */

#hud {
  position: fixed;
  top: 10px;
  left: 10px;
  max-width: min(420px, calc(100vw - 150px));
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  font-size: .8rem;
  letter-spacing: .02em;
}

.chips { display: flex; gap: 5px; flex-wrap: wrap; }

.chip {
  background: var(--glass);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  padding: .14rem .6rem;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.chip.meter { background: linear-gradient(90deg, rgba(46, 158, 87, .55) var(--fill, 100%), var(--glass) var(--fill, 100%)); }
.chip.food { background: linear-gradient(90deg, rgba(210, 120, 40, .6) var(--fill, 0%), var(--glass) var(--fill, 0%)); }
.chip.gold { color: var(--warm); }
.chip.love { color: var(--love); }

#stagecard {
  align-self: flex-start;
  min-width: 190px;
  background: var(--glass);
  border: 1px solid rgba(255, 180, 67, .35);
  border-radius: 10px;
  padding: .3rem .6rem .35rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

#stagecard b { display: block; color: var(--warm); font-size: .88rem; text-transform: uppercase; letter-spacing: .06em; }
#stagecard span { color: var(--dim); font-size: .72rem; }

.bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; margin: .2rem 0 .1rem; }
.bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff8a3a, var(--warm)); border-radius: 3px; transition: width .6s; }

#todo {
  list-style: none;
  margin: 0;
  padding: .3rem .6rem .35rem;
  align-self: flex-start;
  background: var(--glass);
  border-radius: 10px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#todo li { font-size: .8rem; padding: .05rem 0 .05rem 1.2rem; position: relative; }
#todo li::before { content: "○"; position: absolute; left: .1rem; color: var(--dim); }
#todo li.done { color: var(--dim); text-decoration: line-through; }
#todo li.done::before { content: "●"; color: var(--good); }
#todo li.info { padding-left: 0; color: #ff9a8a; font-size: .72rem; }
#todo li.info::before { content: none; }
#todo #t-split { color: var(--warm); }
#todo #rosa-where { display: block; color: var(--dim); font-size: .7rem; text-decoration: none; }

/* ---- the round buttons ---- */

#tools {
  position: fixed;
  left: 10px;
  bottom: calc(10px + var(--safe-b));
  display: flex;
  gap: 8px;
}

#tools button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--glass);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
  font-weight: normal;
}

#tools button i { font-style: normal; font-size: 1.3rem; line-height: 1.1; }
#tools button span { font-size: .6rem; color: var(--dim); letter-spacing: .04em; text-transform: uppercase; }
#tools button:hover { border-color: var(--warm); }
#tools button.on { background: rgba(255, 180, 67, .85); border-color: var(--warm); }
#tools button.on span { color: #221403; }

body:not(.playing) #hud,
body:not(.playing) #tools { display: none; }

/* ---- messages ---- */

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(80px + var(--safe-b));
  transform: translate(-50%, 8px);
  background: rgba(12, 17, 23, .9);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .5rem .9rem;
  font-size: .9rem;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  width: max-content;
  max-width: min(40rem, 92vw);
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  z-index: 5;
}

#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---- the drawer ---- */

#drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 88vw);
  background: rgba(22, 29, 38, .96);
  border-left: 1px solid var(--line);
  padding: 1rem 1.1rem 2rem;
  overflow-y: auto;
  transform: translateX(105%);
  transition: transform .25s ease;
  z-index: 8;
  box-shadow: -12px 0 30px rgba(0, 0, 0, .4);
}

#drawer.open { transform: none; }

#drawer .x {
  position: absolute;
  top: .5rem;
  right: .6rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--line);
  font-size: 1.2rem;
  line-height: 1;
}

#drawer h3 { margin: 1rem 0 .4rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
#drawer h3:first-of-type { margin-top: .2rem; }

#quests, #lifts { list-style: none; margin: 0; padding: 0; }
#quests li { font-size: .86rem; margin-bottom: .45rem; }
#quests b { color: var(--warm); }
#lifts li { display: flex; justify-content: space-between; font-size: .86rem; border-bottom: 1px dashed var(--line); padding: .12rem 0; }
#lifts b { color: var(--warm); }

.line { margin: .25rem 0; font-size: .88rem; }
.line b { color: var(--ink); }
.keys { color: var(--dim); font-size: .82rem !important; }
.keys b { color: var(--ink); }

#board { margin: 0; padding-left: 1.2rem; font-size: .86rem; }
#board li { margin-bottom: .3rem; }
#board b { color: var(--warm); }
#board .me { color: #7fd6ff; }

/* ---- panels over the town ---- */

#overlay, #title {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 10;
}

#overlay { background: rgba(6, 10, 15, .8); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

#overlay.bottom {
  align-items: flex-end;
  background: linear-gradient(rgba(6, 10, 15, 0) 45%, rgba(6, 10, 15, .7));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: .8rem .8rem calc(.8rem + var(--safe-b));
  pointer-events: none;
}

#overlay.top {
  align-items: flex-start;
  background: linear-gradient(rgba(6, 10, 15, .7), rgba(6, 10, 15, 0) 55%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: .8rem;
  pointer-events: none;
}

#overlay.bottom #panel, #overlay.top #panel { pointer-events: auto; }

#overlay.full { overflow: auto; align-items: flex-start; }

#panel, .card {
  background: rgba(22, 29, 38, .97);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .9rem 1.1rem;
  width: min(40rem, 100%);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
}

#overlay.full #panel { width: min(54rem, 100%); margin: auto; }

#panel h2 { margin: 0 0 .4rem; font-size: 1.15rem; color: var(--warm); }
#panel h2 .dim { font-weight: normal; margin-left: .4rem; }
#panel p { margin: .35rem 0; font-size: .93rem; }

.tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: .4rem;
  padding: .05rem .5rem;
  border-radius: 999px;
  background: rgba(255, 180, 67, .18);
  border: 1px solid rgba(255, 180, 67, .5);
  color: var(--warm);
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

#panel canvas#mini { display: block; width: 100%; height: auto; margin: .5rem 0; border-radius: 8px; background: #0f1620; }

.talk { display: flex; gap: .9rem; align-items: flex-start; }
.talk .face { width: 72px; height: 72px; flex: none; border-radius: 50%; background: radial-gradient(#26313e, #0f1620); border: 2px solid var(--line); }
.talk > div { flex: 1; min-width: 0; }

.pad { display: flex; gap: .5rem; flex-wrap: wrap; }
.pad button { flex: 1; min-width: 3.4rem; padding: .8rem .5rem; font-size: 1.05rem; background: #243040; color: var(--ink); border: 1px solid var(--line); touch-action: none; user-select: none; -webkit-user-select: none; }
.pad button:active { background: var(--warm); color: #221403; }

.choices { list-style: none; margin: .6rem 0 0; padding: 0; }
.choices li { border: 1px solid var(--line); border-radius: 8px; padding: .45rem .6rem; margin-bottom: .4rem; font-size: .9rem; cursor: pointer; }
.choices li:hover, .choices li.pick { border-color: var(--warm); background: #1d2632; }

/* the morning and the contest */
.stageup {
  font-size: 1.25rem !important;
  font-weight: bold;
  color: var(--warm);
  letter-spacing: .05em;
  text-shadow: 0 0 18px rgba(255, 180, 67, .45);
}

.gain {
  display: inline-block;
  margin: .1rem .15rem;
  padding: .02rem .45rem;
  border-radius: 999px;
  background: rgba(63, 189, 107, .18);
  color: #8ff0a8;
  font-size: .82rem;
}

.results { margin: .4rem 0; padding-left: 1.6rem; }
.results li { font-size: .92rem; padding: .1rem .3rem; border-radius: 6px; }
.results li span { display: inline-block; min-width: 14rem; }
.results li b { color: var(--dim); }
.results li.me { background: rgba(255, 180, 67, .16); color: var(--warm); }
.results li.me b { color: var(--warm); }

/* Dave's body */
.compare { display: flex; gap: .8rem; justify-content: center; margin: .4rem 0 .6rem; }
.compare canvas { width: 150px; height: 190px; border-radius: 10px; border: 1px solid var(--line); }

.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; margin: .6rem 0; }
.stats div { background: #0f1620; border: 1px solid var(--line); border-radius: 8px; padding: .35rem; text-align: center; }
.stats b { display: block; font-size: 1.05rem; color: var(--ink); }
.stats span { font-size: .7rem; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }

.muscles, .prs { list-style: none; margin: .5rem 0; padding: 0; }
.muscles li { display: grid; grid-template-columns: 5.5rem 1fr 2rem; gap: .5rem; align-items: center; font-size: .86rem; margin: .18rem 0; }
.muscles i { position: relative; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.muscles em { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #c0392b, #ff8a3a); border-radius: 5px; }
.muscles u { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, rgba(255, 180, 67, .8) 0 4px, rgba(255, 180, 67, .45) 4px 8px); }
.muscles b { text-align: right; color: var(--warm); }

.prs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .4rem; }
.prs li { background: #0f1620; border: 1px solid var(--line); border-radius: 8px; padding: .3rem .5rem; font-size: .8rem; }
.prs span { display: block; color: var(--dim); }
.prs b { color: var(--warm); font-size: 1rem; margin-right: .3rem; }
.prs em { color: var(--dim); font-size: .7rem; font-style: normal; }

/* the critter book */
.book { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: .45rem; margin: .6rem 0; }
.book .card {
  width: auto; padding: .35rem; border-radius: 8px; box-shadow: none; display: flex; flex-direction: column; align-items: center;
  background: #0f1620; color: var(--dim); font: inherit; font-size: .72rem; cursor: pointer;
}
.book .card canvas { width: 64px; height: 56px; }
.book .card b { font-size: .74rem; color: var(--dim); }
.book .card span { color: var(--warm); font-size: .68rem; }
.book .card.caught { border-color: #2e9e57; }
.book .card.caught b { color: var(--ink); }
.book .card.seen { border-color: #4a5563; }

/* ---- the title, over the town ---- */

#title {
  background: radial-gradient(ellipse at center, rgba(6, 10, 15, .35), rgba(6, 10, 15, .85));
  overflow: auto;
}

#title .card { width: min(38rem, 100%); margin: auto; background: rgba(22, 29, 38, .9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

#title h1 {
  margin: 0;
  font-size: 2.3rem;
  line-height: 1.1;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--warm);
  text-shadow: 0 3px 0 #7a4a06, 0 0 24px rgba(255, 180, 67, .35);
}

#title .sub { margin: .1rem 0 .7rem; color: var(--dim); font-size: .9rem; }
#title p { margin: .45rem 0; font-size: .93rem; }

#start { display: flex; gap: .5rem; margin: .9rem 0 .4rem; }

#start input {
  flex: 1;
  min-width: 0;
  padding: .6rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0d131b;
  color: inherit;
  font: inherit;
}

button {
  padding: .5rem .9rem;
  border: 0;
  border-radius: 8px;
  background: var(--warm);
  color: #221403;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}

button:disabled { opacity: .5; cursor: default; }

/* ---- phones ---- */

@media (max-width: 700px) {
  body { font-size: 14px; }
  #hud { top: 6px; left: 6px; gap: 4px; font-size: .7rem; max-width: calc(100vw - 132px); }
  .chips { gap: 3px; }
  .chip { padding: .08rem .42rem; }
  #stagecard { min-width: 0; padding: .2rem .5rem .25rem; }
  #stagecard b { font-size: .74rem; }
  #todo { padding: .2rem .5rem .25rem; }
  #todo li { font-size: .7rem; }
  #todo #rosa-where, #todo li.info:not(.tonight) { display: none; }
  #tools { left: 50%; transform: translateX(-50%); gap: 6px; }
  #tools button { width: 50px; height: 50px; }
  #tools button i { font-size: 1.15rem; }
  #toast { bottom: calc(70px + var(--safe-b)); font-size: .82rem; }
  .talk .face { width: 52px; height: 52px; }
  #panel { padding: .7rem .8rem; }
  #panel p { font-size: .88rem; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .compare canvas { width: 120px; height: 152px; }
  .results li span { min-width: 0; margin-right: .5rem; }
  #title h1 { font-size: 1.7rem; }
}

@media (max-height: 520px) {
  #stagecard, #todo { display: none; }
}

/* ---- the day's list is also a way to get there ---- */

#todo li:not(.info) { pointer-events: auto; cursor: pointer; border-radius: 6px; padding-right: 1.1rem; }
#todo li:not(.info):hover { background: rgba(255, 180, 67, .14); }
#todo li:not(.info)::after { content: "›"; position: absolute; right: .3rem; top: .02rem; color: var(--warm); opacity: .8; text-decoration: none; }

/* ---- critter fights ---- */

#overlay.fight { background: rgba(6, 10, 15, .78); backdrop-filter: none; -webkit-backdrop-filter: none; overflow: auto; }
#overlay.fight #panel { width: min(46rem, 100%); padding: .7rem .8rem .8rem; margin: auto; }

.fight canvas#fightcv { display: block; width: 100%; aspect-ratio: 2 / 1; border-radius: 10px; background: #1d2229; }

.fight .log { min-height: 2.9em; margin: .5rem 0 .1rem !important; font-size: .93rem !important; }
.fight .log span { display: block; }
.fight .log .old { color: var(--dim); font-size: .84rem; }
.fight .hint { min-height: 1.3em; margin: 0 0 .45rem !important; color: #ffd08a; font-size: .8rem !important; }

.fightpad { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; }
.fightpad.fp-pose { grid-template-columns: repeat(4, 1fr); }
.fightpad.fp-bar, .fightpad.fp-react, .fightpad.fp-wait { grid-template-columns: 1fr; }
.fightpad canvas#skillcv { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 600 / 56; border-radius: 8px; display: block; }
.fightpad button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 3.6rem; padding: .45rem .3rem; line-height: 1.2; }
.fightpad button b { font-size: .95rem; white-space: nowrap; }
.fightpad button small { font-size: .68rem; color: var(--dim); font-weight: normal; margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fightpad button.pick { border-color: var(--warm); box-shadow: 0 0 0 1px var(--warm) inset; }
.fightpad button:disabled { opacity: .35; }
.fightpad button.run { background: #2a2230; }
.fightpad button.go { background: var(--warm); color: #221403; min-height: 4.2rem; }
.fightpad button.go b { font-size: 1.3rem; }
.fightpad button.go small { color: #5a3a06; }

/* ---- what a catch brings ---- */

.stars { color: var(--warm); font-size: .9rem; letter-spacing: .05em; }
.tag.shiny { background: rgba(255, 216, 74, .2); border-color: #ffd84a; color: #ffd84a; }
.stageup.small { font-size: 1rem !important; }

.spoils { display: flex; gap: 1rem; align-items: flex-start; }
.spoils canvas { width: 150px; height: 130px; flex: none; border-radius: 10px; border: 1px solid var(--line); }
.spoils > div { flex: 1; min-width: 0; }
.xpline b { color: #7fd6ff; font-size: 1.15rem; }
.bar.xp { height: 8px; margin: .3rem 0; }
.bar.xp span { background: linear-gradient(90deg, #2f8fd8, #7fd6ff); }
.perk { background: rgba(127, 214, 255, .1); border: 1px solid rgba(127, 214, 255, .35); border-radius: 8px; padding: .3rem .5rem; }
.loot { list-style: none; margin: .4rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.loot li { background: #0f1620; border: 1px solid var(--line); border-radius: 999px; padding: .15rem .6rem; font-size: .86rem; }
.loot i { font-style: normal; }

/* ---- the bag ---- */

.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .45rem; margin: .6rem 0; }
.item { display: flex; gap: .55rem; align-items: center; background: #0f1620; border: 1px solid var(--line); border-radius: 10px; padding: .45rem .55rem; }
.item > i { font-style: normal; font-size: 1.6rem; }
.item > div { flex: 1; min-width: 0; font-size: .88rem; line-height: 1.3; }
.item .n { color: var(--warm); }
.item .dim { font-size: .75rem; }
.item button { padding: .35rem .7rem; }
.item.gift { border-color: rgba(255, 107, 139, .4); }
.item.bait { border-color: rgba(255, 180, 67, .3); }

#panel h3 { margin: .8rem 0 .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .3rem; }
.perks li { font-size: .82rem; color: var(--dim); border: 1px dashed var(--line); border-radius: 8px; padding: .3rem .5rem; }
.perks li span { display: inline-block; min-width: 2.6rem; color: #4a5563; font-weight: bold; }
.perks li b { color: #6a7480; }
.perks li.on { color: var(--ink); border-style: solid; border-color: rgba(127, 214, 255, .4); background: rgba(127, 214, 255, .06); }
.perks li.on span { color: #7fd6ff; }
.perks li.on b { color: #7fd6ff; }

#catcher .bar { display: block; height: 5px; margin-top: .25rem; }
#catcher .bar span { background: linear-gradient(90deg, #2f8fd8, #7fd6ff); }

@media (max-width: 700px) {
  .fightpad { grid-template-columns: repeat(3, 1fr); }
  .fightpad button { min-height: 3.2rem; }
  .fight .log { font-size: .84rem !important; min-height: 2.6em; }
  .spoils { flex-direction: column; align-items: center; }
  #tools button { width: 46px; height: 46px; }
  #tools { gap: 5px; }
}