/* Pig Merge — the chrome around the cup. The cup itself is drawn on the canvas. */
:root {
  --sky-0: #3b1f45;
  --sky-1: #1a0e21;
  --ink: #fff2fb;
  --muted: rgba(255, 236, 249, 0.68);
  --pink: #ff8fc0;
  --pink-deep: #d8467f;
  --panel: rgba(30, 14, 36, 0.94);
  --edge: rgba(255, 255, 255, 0.16);
  --gold: #ffd75e;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: radial-gradient(120% 90% at 50% 0%, var(--sky-0), var(--sky-1) 70%);
  color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 30;
  background: var(--gold); color: #2a1630; padding: .5rem .8rem;
  border-radius: 0 0 .6rem 0; font-weight: 900; text-decoration: none;
}
.skip-link:focus { left: 0; }

.wrap {
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---- screens ---- */
.screen { display: none; width: 100%; }
.screen.show { display: flex; flex-direction: column; align-items: center; }

.panel {
  width: min(94vw, 30rem);
  margin: 1.2rem auto;
  padding: 1.3rem 1.2rem 1.1rem;
  background: var(--panel);
  border: 2px solid var(--edge);
  border-radius: 1.1rem;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .45);
  text-align: center;
}
.panel.wide { width: min(94vw, 40rem); }

h1 { margin: 0 0 .5rem; font-size: 2.1rem; letter-spacing: .02em; }
h2 { margin: 0 0 .5rem; font-size: 1.45rem; }
.lede { margin: 0 0 .8rem; color: var(--muted); line-height: 1.5; font-size: .95rem; }
.lede b { color: var(--ink); }
.gold { color: var(--gold); }
.warn {
  margin: 0 0 1rem; padding: .5rem .7rem;
  background: rgba(255, 120, 120, .12);
  border: 2px solid rgba(255, 140, 140, .4);
  border-radius: .7rem;
  font-size: .86rem; font-weight: 700;
}
.hint { margin: .6rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }

.btn {
  display: block; width: 100%; margin: 0 0 .5rem;
  padding: .8rem 1rem; font: inherit; font-weight: 800; font-size: 1rem;
  color: var(--ink); background: rgba(255, 255, 255, .08);
  border: 2px solid var(--edge); border-radius: .8rem; cursor: pointer;
}
.btn.primary { background: var(--pink-deep); border-color: var(--pink); }
.btn.ghost { background: transparent; font-weight: 700; font-size: .9rem; }
.btn:active { transform: translateY(1px); }
.back { display: inline-block; margin-top: .7rem; color: var(--muted); font-size: .82rem; }

/* ---- the ladder of pigs ---- */
.ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.6rem, 1fr)); gap: .5rem; margin: .8rem 0 1rem; }
.rung {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .55rem .3rem; border-radius: .8rem;
  background: rgba(255, 255, 255, .06); border: 2px solid var(--edge);
}
.rung canvas { display: block; }
.rung .rname { font-weight: 800; font-size: .74rem; text-align: center; line-height: 1.2; }
.rung .rno { font-size: .66rem; color: var(--muted); font-weight: 700; }
.rung.first { border-color: rgba(255, 215, 94, .55); background: rgba(255, 215, 94, .1); }

/* ---- the play screen ----
   One column that is exactly as tall as the window, with the cup taking
   whatever height is left over. Sizing the canvas by hand instead left the
   controls hanging off the bottom of a phone. */
#s-play.show {
  justify-content: flex-start;
  gap: .4rem;
  padding: .4rem 0 .5rem;
  height: 100vh;
  height: 100dvh;
}

.hud {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  width: min(94vw, 30rem);
}
.stat { display: flex; flex-direction: column; align-items: center; min-width: 4.5rem; }
.stat b { font-size: 1.5rem; line-height: 1.1; }
.lab { font-size: .64rem; letter-spacing: .12em; color: var(--muted); font-weight: 800; }
/* 🤲🔮 The tray: what you have stashed, and what is coming. */
.tray { display: flex; gap: .5rem; width: min(94vw, 30rem); align-items: stretch; }
.holdbox, .nextbox {
  display: flex; flex-direction: column; align-items: center; gap: .12rem;
  padding: .3rem .5rem; border-radius: .8rem;
  background: rgba(255, 255, 255, .07); border: 2px solid var(--edge);
  color: inherit; font: inherit;
}
.holdbox { cursor: pointer; flex: 0 0 auto; min-width: 4.6rem; }
.holdbox:active { transform: translateY(1px); }
.holdbox[data-used="1"] { opacity: .5; cursor: not-allowed; }
.holdbox canvas { width: 2.5rem; height: 2.5rem; display: block; }
.nextbox { flex: 1; }
.nextrow { display: flex; align-items: center; gap: .3rem; }
.nextrow canvas { width: 1.9rem; height: 1.9rem; display: block; opacity: .72; }
.nextrow canvas.n1 { width: 2.7rem; height: 2.7rem; opacity: 1; }
.traytag { font-size: .64rem; font-weight: 800; color: var(--muted); }

/* ✨ the specials, on the ladder screen */
.specials { display: grid; gap: .45rem; margin: .6rem 0 1rem; }
.spec {
  display: flex; align-items: center; gap: .6rem; text-align: left;
  padding: .5rem .65rem; border-radius: .8rem;
  background: rgba(255, 255, 255, .06); border: 2px solid var(--edge);
}
.spec canvas { flex: none; }
.spec .sname { display: block; font-weight: 800; font-size: .88rem; }
.spec .sblurb { display: block; font-size: .74rem; color: var(--muted); line-height: 1.35; }

#cup {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: 480 / 680;
  width: auto;
  height: auto;
  max-width: min(94vw, 30rem);
  margin: 0 auto;
  touch-action: none;
  border-radius: .9rem;
}
/* 👥 Two cups side by side: twice as wide, and the whole play screen gives up
   its furniture so the pair of them get the room. */
#cup.versus { aspect-ratio: 960 / 680; max-width: min(97vw, 60rem); }

/* ---- ⛶ fullscreen ----
   The cup is capped at 30rem so it sits nicely on a page with everything else
   around it. Given the whole screen there is no reason for that cap: lift it
   and let the aspect ratio and the available HEIGHT decide how big the cup
   gets, which on most screens is a great deal bigger. Nothing is redrawn —
   the canvas is 480x680 whatever size it is shown at. */
:fullscreen .wrap, :-webkit-full-screen .wrap { height: 100vh; min-height: 100vh; }
:fullscreen #s-play, :-webkit-full-screen #s-play {
  height: 100vh; justify-content: center; gap: .35rem; padding: .3rem 0;
}
:fullscreen #cup { max-width: min(96vw, 52rem); }
:-webkit-full-screen #cup { max-width: min(96vw, 52rem); }
:fullscreen #cup.versus { max-width: min(98vw, 96rem); }
:-webkit-full-screen #cup.versus { max-width: min(98vw, 96rem); }
/* the tips line is for learning, not for playing: it only costs height here */
:fullscreen #tips, :-webkit-full-screen #tips { display: none; }
.tbtn.on { background: rgba(255, 255, 255, .22); }
body.two-cups #s-play { justify-content: center; gap: .4rem; }

/* 🔨 power-ups, the meter that earns them, and this round's conditions */
.powerbar { display: flex; align-items: center; gap: .5rem; width: min(94vw, 30rem); }
.pmeter {
  flex: 1; height: .5rem; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .12);
}
.pmeter span { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #6fe08f, var(--gold)); transition: width .18s; }
.pslots { display: flex; gap: .3rem; }
.pslot {
  font: inherit; font-size: 1.05rem; line-height: 1; cursor: pointer;
  padding: .32rem .5rem; border-radius: .6rem;
  background: rgba(255, 255, 255, .1); border: 2px solid var(--edge); color: inherit;
}
.pslot[data-armed="1"] { border-color: var(--gold); background: rgba(255, 215, 94, .22); }
.pslot:active { transform: translateY(1px); }
.cond { font-size: .74rem; font-weight: 800; color: var(--muted); white-space: nowrap; }

.pad { display: flex; gap: .5rem; width: min(94vw, 30rem); }
.pbtn {
  flex: 1; padding: .85rem .4rem; font: inherit; font-weight: 900; font-size: 1.05rem;
  color: var(--ink); background: rgba(255, 255, 255, .09);
  border: 2px solid var(--edge); border-radius: .8rem; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.pbtn.drop { flex: 2; background: var(--pink-deep); border-color: var(--pink); letter-spacing: .08em; }
.pbtn:active { transform: translateY(1px); }

.tools { display: flex; gap: .5rem; width: min(94vw, 30rem); justify-content: center; }
.tbtn {
  padding: .4rem .8rem; font: inherit; font-weight: 700; font-size: .8rem;
  color: var(--muted); background: rgba(255, 255, 255, .06);
  border: 2px solid var(--edge); border-radius: .7rem; cursor: pointer;
}
.tips { width: min(94vw, 30rem); text-align: center; margin: 0; }

/* 🏆 the online board */
.lb-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .35rem; margin: 0 0 .6rem; }
.lb-tab {
  font: inherit; font-weight: 800; font-size: .78rem; cursor: pointer;
  padding: .4rem .3rem; border-radius: .6rem; color: inherit;
  background: rgba(255, 255, 255, .06); border: 2px solid var(--edge);
}
.lb-tab[aria-pressed="true"] { border-color: var(--gold); background: rgba(255, 215, 94, .16); }
.lb-list { display: grid; gap: .3rem; margin: 0 0 .8rem; min-height: 4rem; }
.lb-row {
  display: grid; grid-template-columns: 1.6rem 3rem 1fr auto; align-items: center; gap: .5rem;
  padding: .4rem .55rem; border-radius: .6rem; text-align: left;
  background: rgba(255, 255, 255, .05); border: 2px solid var(--edge);
}
.lb-row.top { border-color: rgba(255, 215, 94, .55); background: rgba(255, 215, 94, .1); }
.lb-rank { color: var(--muted); font-weight: 900; font-size: .8rem; }
.lb-who { font-weight: 900; letter-spacing: .06em; }
.lb-score { font-weight: 900; color: var(--gold); text-align: right; }
.lb-note { font-size: .68rem; color: var(--muted); font-weight: 700; text-align: right; }
.lb-empty { padding: .9rem; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.lb-form { margin: 0 0 .8rem; }
.lb-offer { margin: 0 0 .5rem; font-weight: 800; font-size: .88rem; }
.lb-entry { display: flex; gap: .4rem; align-items: stretch; }
.lb-entry input {
  width: 5rem; font: inherit; font-weight: 900; font-size: 1.3rem; text-align: center;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .4rem; border-radius: .6rem; color: var(--ink);
  background: rgba(255, 255, 255, .1); border: 2px solid var(--edge);
}
.lb-entry .btn { margin: 0; flex: 1; }
.hint.bad { color: #ffb3b3; }

/* 🎮 the mode picker */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: 0 0 .7rem; }
.mode {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  padding: .5rem .6rem; border-radius: .8rem; cursor: pointer; text-align: left;
  background: rgba(255, 255, 255, .06); border: 2px solid var(--edge);
  color: inherit; font: inherit;
}
.mode[aria-pressed="true"] { border-color: var(--pink); background: rgba(216, 70, 127, .22); }
.mode .mname { font-weight: 800; font-size: .9rem; }
.mode .mbest { font-size: .68rem; color: var(--muted); font-weight: 700; }
.mode-blurb { margin: 0 0 .8rem; font-size: .78rem; color: var(--muted); line-height: 1.4; min-height: 2.2em; }

/* 🪙 the shop and 🏅 the cabinet */
.coins {
  display: inline-block; margin-left: .35rem; padding: .1rem .45rem;
  border-radius: 999px; background: rgba(255, 215, 94, .18);
  color: var(--gold); font-size: .78rem; font-weight: 900;
}
.coinline { margin: .2rem 0 .8rem; font-weight: 800; color: var(--gold); }
.coinline b { font-size: 1.3rem; }
.shop { display: grid; gap: .5rem; margin: 0 0 1rem; }
.buy {
  display: flex; align-items: center; gap: .6rem; text-align: left;
  padding: .55rem .65rem; border-radius: .8rem;
  background: rgba(255, 255, 255, .06); border: 2px solid var(--edge);
}
.buy .bicon { font-size: 1.5rem; flex: none; }
.buy .bbody { flex: 1; min-width: 0; }
.buy .bname { display: block; font-weight: 800; font-size: .92rem; }
.buy .bblurb { display: block; font-size: .74rem; color: var(--muted); line-height: 1.35; }
.buy .bpips { display: flex; gap: .18rem; margin-top: .25rem; }
.buy .bpip { width: .55rem; height: .55rem; border-radius: 999px; background: rgba(255, 255, 255, .18); }
.buy .bpip.on { background: var(--gold); }
.buy button {
  flex: none; font: inherit; font-weight: 900; font-size: .8rem; cursor: pointer;
  padding: .45rem .6rem; border-radius: .6rem; border: 0;
  color: #2a1630; background: var(--gold); white-space: nowrap;
}
.buy button[disabled] { background: rgba(255, 255, 255, .14); color: var(--muted); cursor: not-allowed; }
.buy.maxed { border-color: rgba(255, 215, 94, .5); }

.trophies { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.2rem, 1fr)); gap: .45rem; margin: .6rem 0 1rem; }
.trophy {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .55rem .3rem; border-radius: .8rem;
  background: rgba(255, 255, 255, .05); border: 2px solid var(--edge);
  opacity: .55;
}
.trophy.got { opacity: 1; border-color: rgba(255, 215, 94, .5); background: rgba(255, 215, 94, .1); }
.trophy .ticon { font-size: 1.5rem; line-height: 1; }
.trophy .tname { font-weight: 800; font-size: .7rem; text-align: center; line-height: 1.2; }
.trophy .tneed { font-size: .62rem; color: var(--muted); font-weight: 700; }

.bigscore { margin: .3rem 0 .2rem; font-size: 3rem; font-weight: 900; color: var(--gold); line-height: 1; }

/* On a short screen the words give way before the cup does. */
@media (max-height: 780px) { .tips { display: none; } }
@media (max-height: 620px) {
  .hud .stat b { font-size: 1.2rem; }
  .nextbox canvas { width: 2.4rem; height: 2.4rem; }
  .pbtn { padding: .6rem .4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:active, .pbtn:active { transform: none; }
}


/* 🧩 The puzzle list */
.puzzles { display: grid; gap: .45rem; margin: .5rem 0 .8rem; }
.puzzle {
  display: flex; align-items: flex-start; gap: .55rem; cursor: pointer;
  font: inherit; text-align: left; color: inherit;
  padding: .6rem .7rem; border-radius: .8rem;
  background: rgba(255, 255, 255, .06); border: 2px solid var(--edge);
}
.puzzle .qicon { font-size: 1.4rem; flex: none; line-height: 1.1; }
.puzzle .qbody { flex: 1; min-width: 0; }
.puzzle .qname { display: block; font-weight: 800; font-size: .92rem; }
.puzzle .qgoal { display: block; font-size: .76rem; font-weight: 700; color: #ffd75e; }
.puzzle .qblurb { display: block; font-size: .74rem; color: var(--muted); line-height: 1.32; }
.puzzle .qtick { flex: none; font-size: 1.1rem; }
.puzzle.done { border-color: rgba(111, 224, 143, .55); background: rgba(111, 224, 143, .12); }


/* 🏆 The Cup of the Round picture */
.cupshot { margin: .5rem 0 .3rem; text-align: center; }
.cupshot canvas {
  display: block; margin: 0 auto;
  width: auto; height: auto;
  max-width: min(70vw, 15rem); max-height: 42vh;
  border-radius: .7rem;
  background: rgba(0, 0, 0, .28);
  border: 2px solid var(--edge);
}
.cupshot.big canvas { max-width: min(84vw, 21rem); max-height: 54vh; }
.cupshot .hint { margin: .35rem 0 0; }