* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --yellow: #f7d117;
  --blue: #1b6db3;
  --green: #12a03a;
  --orange: #f07c0b;
  --purple: #5b2a86;
  --red: #e3001b;
  --dark: #111;
  --glow: #ffe600;
}

html, body { margin: 0; background: #8f8f8f; }

body {
  font-family: "Arial Rounded MT Bold", "Nunito", "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  color: #222;
  font-size: clamp(10px, 3.3vw, 17px);
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}
button:disabled { cursor: default; opacity: 1; }

.sheet {
  max-width: 520px;
  min-height: 100vh;
  margin: 0 auto;
  padding: .5em .5em calc(.8em + env(safe-area-inset-bottom));
  background: #cfcfcf;
  display: flex;
  flex-direction: column;
  gap: .5em;
  user-select: none;
  -webkit-user-select: none;
}

.title { text-align: center; color: #777; letter-spacing: .15em; font-size: 1.1em; }

/* ---------- generic cell + cross ---------- */
.cell {
  position: relative;
  background: #fff;
  border-radius: .35em;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: 100%;
  font-size: 1.3em;
  line-height: 1;
}

.x::before, .x::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 44%;
  height: 12%;
  background: var(--dark);
  border-radius: 99px;
  transform: rotate(45deg);
  z-index: 2;
}
.x::after { transform: rotate(-45deg); }

/* ---------- top ---------- */
.top { display: grid; grid-template-columns: 19% 1fr; gap: .5em; }

.controls { display: flex; flex-direction: column; gap: .4em; }

.ctrl {
  flex: 1;
  min-height: 3.6em;
  background: #fff;
  border: .35em solid var(--dark);
  border-radius: .9em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15em;
  font-size: .8em;
}
.ctrl svg { width: 1.9em; height: 1.9em; }
.ctrl-icon { font-size: 1.9em; line-height: 1; }
.ctrl:active { background: #eee; }

.top-right { display: flex; flex-direction: column; gap: .4em; }

.rounds { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3em; }

.round {
  background: #444;
  border-radius: .3em;
  padding: .35em .3em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3em;
  cursor: pointer;
}
.round.dark { background: #1a1a1a; }
.round.disabled { opacity: .3; cursor: not-allowed; }
.round .cell { font-size: 1.4em; }
.round-bonus { height: 1.8em; display: flex; align-items: center; justify-content: center; }
.round-bonus .badge { font-size: .85em; }

.people { display: flex; align-items: center; gap: 1px; }
.people svg { width: .75em; height: .9em; fill: #fff; }
.people .sep { width: 1px; height: 1em; background: #fff; margin: 0 2px; }

.track {
  background: #9a9a9a;
  border-radius: .3em;
  padding: .4em;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: .3em;
  align-items: center;
  justify-items: center;
}
.track .badge { font-size: 1.15em; }

.circle {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #c8c8c8;
  border: .25em solid #eee;
}
.circle.avail {
  border-color: var(--glow);
  box-shadow: 0 0 0 .12em #333, 0 0 .6em .1em var(--glow);
  background: #fff;
}
.circle.x { background: #eee; }

/* ---------- badges ---------- */
.badge {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  border: .12em solid #fff;
  color: #fff;
  font-size: .8em;
  line-height: 1;
}
.badge svg { width: 72%; height: 72%; }
.c-k { background: var(--dark); }
.c-y { background: var(--yellow); color: var(--dark); }
.c-b { background: var(--blue); }
.c-g { background: var(--green); }
.c-o { background: var(--orange); }
.c-p { background: var(--purple); }
.c-fox { background: transparent; border-color: transparent; }
.c-fox svg { width: 100%; height: 100%; }
.badge.small { font-size: .6em; width: 3em; height: 3em; }

.badge.earned { box-shadow: 0 0 0 .18em var(--glow), 0 0 .7em .25em var(--glow); }
.badge.clickable { cursor: pointer; }
.badge.clickable.earned:not(.used) { animation: pulse 1.2s ease-in-out infinite; }
.badge.used { opacity: .5; }
.badge.used::before, .badge.used::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  top: 44%;
  height: 12%;
  background: var(--red);
  border-radius: 99px;
  transform: rotate(45deg);
}
.badge.used::after { transform: rotate(-45deg); }

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ---------- yellow & blue ---------- */
.areas { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.area { border-radius: .3em; padding: .4em; }
.area.pending { outline: .25em dashed #fff; outline-offset: -.2em; animation: blink 1s infinite; }
@keyframes blink { 50% { outline-color: var(--dark); } }

.yellow { background: var(--yellow); }
.blue { background: var(--blue); }

.ygrid, .bgrid {
  --gap: .3em;
  --bar: .3em;
  display: grid;
  grid-template-columns: repeat(4, 1fr) .8em 2em;
  gap: var(--gap);
  align-items: center;
}
.ygrid { grid-template-rows: repeat(4, auto) .8em auto; }
.bgrid { grid-template-rows: repeat(3, auto) .8em auto; }
.bslot { position: relative; display: flex; align-items: center; justify-content: center; min-height: 2.2em; }

.shade { align-self: stretch; border-radius: .5em; background: rgba(255, 255, 255, .45); }
.blue .shade { background: rgba(255, 255, 255, .5); }
/* darker than the yellow glow so active bonuses stand out */
.yellow .shade { background: rgba(110, 70, 0, .3); }

.node { position: relative; }
.node .cell { z-index: 1; }
.node.cr::before, .node.cd::after, .dbar {
  content: "";
  position: absolute;
  background: var(--dark);
}
.node.cr::before { left: 100%; top: 50%; width: calc(var(--gap) + .1em); height: var(--bar); transform: translateY(-50%); }
.node.cd::after { top: 100%; left: 50%; height: calc(var(--gap) + .1em); width: var(--bar); transform: translateX(-50%); }
.dbar { left: 100%; top: 100%; width: 1.4em; height: var(--bar); transform: translate(-50%, -50%) rotate(45deg); }

.arrow { display: block; background: var(--dark); }
.arrow.r {
  width: 100%;
  height: .8em;
  clip-path: polygon(0 31%, 45% 31%, 45% 0, 100% 50%, 45% 100%, 45% 69%, 0 69%);
}
.arrow.d {
  justify-self: center;
  width: .8em;
  height: 100%;
  clip-path: polygon(31% 0, 69% 0, 69% 45%, 100% 45%, 50% 100%, 0 45%, 31% 45%);
}
.arrow.dr {
  justify-self: center;
  width: 1.1em;
  height: .8em;
  transform: rotate(45deg);
  clip-path: polygon(0 31%, 55% 31%, 55% 0, 100% 50%, 55% 100%, 55% 69%, 0 69%);
}

.cell.y {
  color: #f5b800;
  text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;
}
.cell.y.diag { box-shadow: inset 0 0 0 .12em rgba(0, 0, 0, .25); }
.cell.pre { color: var(--dark); background: #fff; }

.pts {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: #fff3a6;
  border: .12em dashed #c9a400;
  font-size: .75em;
}
.pts.earned { background: var(--glow); box-shadow: 0 0 .6em .2em #fff; border-style: solid; }

.btrack {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 1px;
  padding: .25em;
  margin-bottom: .4em;
  background: #0d3d66;
  border-radius: .4em;
}
.bt { display: flex; flex-direction: column; align-items: center; color: #fff; font-size: .5em; gap: .15em; }
.bt-pts {
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  border: 1px dashed #fff;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bt.reached .bt-pts { background: #5aa0dc; }
.bt.current .bt-pts { background: var(--glow); color: var(--dark); border-style: solid; }

.cell.b { color: var(--blue); }

.sum-ind {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .15em;
  color: #fff;
  font-size: .8em;
  background: #0d3d66;
  border-radius: .3em;
  height: 100%;
}
.die { display: inline-block; width: .9em; height: .9em; border-radius: .15em; border: 1px solid #fff; }
.die.db { background: var(--blue); }
.die.dw { background: #fff; }

/* ---------- rows ---------- */
.row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: .25em;
  padding: .3em .3em .2em 1.3em;
  border-radius: .2em;
}
.row::before {
  content: "";
  position: absolute;
  left: .2em;
  top: 50%;
  transform: translateY(-50%);
  border-left: .8em solid var(--dark);
  border-top: .6em solid transparent;
  border-bottom: .6em solid transparent;
}
.green { background: var(--green); }
.orange { background: var(--orange); }
.purple { background: var(--purple); }

.col { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2em; }
.col .cell { font-size: 1em; }
.slot { height: 1.6em; display: flex; align-items: center; justify-content: center; }
.slot .badge { font-size: .75em; }

.rshade { position: absolute; left: 1.3em; right: .3em; height: 1.6em; border-radius: .4em; background: rgba(255, 255, 255, .35); }
.rshade.upper { top: .3em; }
.rshade.lower { bottom: .2em; }

.cell.next { box-shadow: inset 0 0 0 .22em var(--dark), 0 0 0 .18em var(--glow), 0 0 .5em .15em var(--glow); }

.gpts {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: #0b7a2b;
  border: .1em dashed #fff;
  color: #fff;
  font-size: .65em;
}
.gpts.reached { background: var(--glow); color: var(--dark); border-style: solid; }
.cell.g { color: #9fd8ae; font-size: .85em; }

.cell.o { color: var(--dark); }
.cell sub { font-size: .5em; color: var(--orange); position: absolute; right: .2em; bottom: .15em; }
.faint { color: #f8c9a0; font-size: .8em; }

.cell.p { overflow: visible; color: var(--dark); }
.chev {
  position: absolute;
  left: -.8em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--purple);
  background: #fff;
  border: .14em solid var(--purple);
  box-shadow: 0 0 0 .1em #fff, 0 .1em .3em rgba(0, 0, 0, .5);
  border-radius: 50%;
  width: 1.35em;
  height: 1.35em;
  font-size: 1em;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

/* ---------- score tally ---------- */
.scores { display: flex; align-items: center; gap: .15em; margin-top: .2em; }
.score {
  position: relative;
  flex: 1;
  aspect-ratio: 1 / 1.4;
  background: #fff;
  border: .25em solid;
  border-radius: .6em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
}
.score small { font-size: .5em; color: #666; }
.s-yellow { border-color: var(--yellow); }
.s-blue { border-color: var(--blue); }
.s-green { border-color: var(--green); }
.s-orange { border-color: var(--orange); }
.s-purple { border-color: var(--purple); }
.s-fox { border-color: var(--red); }
.s-total { flex: 1.4; aspect-ratio: auto; align-self: stretch; border-color: var(--dark); border-width: .3em; font-size: 1.3em; gap: .2em; }
.s-total .lbl { background: var(--dark); color: #fff; padding: .1em .5em; border-radius: .4em; font-size: .45em; }
.op { color: #666; font-size: 1.2em; }

/* ---------- modal & toast ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  background: rgba(0, 0, 0, .55);
}
.modal-box {
  width: 100%;
  max-width: 340px;
  background: #fff;
  border-radius: .8em;
  padding: 1.2em;
  text-align: center;
  font-size: 1.1em;
}
.modal-box h2 { margin: 0 0 .4em; font-size: 1.3em; }
.modal-box p { margin: 0 0 1em; font-weight: 600; color: #444; }
.modal-box p:empty { display: none; }
.modal-buttons { display: flex; flex-wrap: wrap; gap: .5em; justify-content: center; }
.mcheck { display: flex; align-items: center; justify-content: center; gap: .5em; margin: 0 0 1em; cursor: pointer; }
.mcheck input { width: 1.3em; height: 1.3em; accent-color: var(--green); }
.modal-buttons.grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.mbtn {
  flex: 1;
  min-height: 2.8em;
  padding: .5em .8em;
  border-radius: .5em;
  background: #e4e4e4;
  font-size: 1.1em;
}
.mbtn:disabled { opacity: .3; }
.mbtn.primary { background: var(--green); color: #fff; }
.mbtn.danger { background: var(--red); color: #fff; }
.mbtn.selected { background: var(--glow); }
.mbtn.wide { grid-column: span 3; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.2em + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 20;
  max-width: 90vw;
  padding: .7em 1.1em;
  border-radius: .6em;
  background: var(--dark);
  color: #fff;
  text-align: center;
}
.hidden { display: none !important; }