/* ------------------------------------------------------------------ Break
   Three silly games for the gap between rounds (Rick, 25 Oct: "a take a break
   silly game, so my kids can just click and play something silly").

   Rules this stylesheet is built to:
   - ONE SCREEN. Nothing in a round scrolls. The playfield takes the height
     that is left after the top bar and sits still.
   - THUMBS. Every target is at least 56px and nothing live is within 12px of
     the screen edge, because a bonked thumb is a sad thumb.
   - The creatures keep their own bright colours on every skin - they are
     stickers on the page, not part of the furniture - but the page, the
     holes and the type come from the skin variables like everything else.
   - No layout shift when a creature pops: the hole is a fixed box and the
     creature is positioned inside it. A grid that resizes mid-round makes
     a game unplayable and looks broken. */

body.brk {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--body); overscroll-behavior: none;
}
.brk-wrap {
  max-width: 760px; margin: 0 auto; min-height: 100svh;
  display: flex; flex-direction: column;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}

/* ---- top bar: same chrome, same corners as Names and Numbers ---- */
.brk-top {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 2px 6px; flex: 0 0 auto;
}
.brk-crumbs { font-size: 13px; color: var(--muted); flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brk-crumbs a { color: inherit; text-decoration: none; }
.brk-crumbs a:hover { text-decoration: underline; }
.brk-crumbs b { color: var(--ink); }
.brk-tools { display: flex; gap: 6px; align-items: center; }
.brk-btn {
  appearance: none; font: inherit; font-size: 15px; line-height: 1;
  min-width: 40px; min-height: 40px; padding: 0 9px; cursor: pointer;
  border: 2px solid var(--line); border-radius: 11px;
  background: var(--bg-2); color: var(--ink);
}
.brk-btn:active { transform: translateY(1px); }
.brk-score {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 56px; min-height: 40px; padding: 2px 10px;
  border: 2px solid var(--line); border-radius: 11px;
  background: var(--accent); color: var(--on-ink);
}
.brk-score i { font-style: normal; font-size: 9px; letter-spacing: .09em;
  text-transform: uppercase; opacity: .8; }
.brk-score b { font-family: var(--display); font-size: 19px; line-height: 1; }

/* ---- the clock: a bar, not a number. A number is a thing to read; a bar
        draining is a thing you feel out of the corner of your eye. ---- */
.brk-clock { height: 9px; border-radius: 99px; background: var(--bg-3);
  border: 2px solid var(--line); overflow: hidden; flex: 0 0 auto; margin: 0 2px 8px; }
.brk-clock i { display: block; height: 100%; width: 100%; background: var(--accent);
  transform-origin: left center; }
.brk-clock.low i { background: var(--g1, #C2341F); }

/* The script's mount. It takes whatever height is left so a game fills the
   screen; on the hub it just holds the tiles. */
.brk-mount { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* ---- the hub ------------------------------------------------------- */
.brk-hero { text-align: center; padding: 14px 6px 4px; flex: 0 0 auto; }
.brk-h1 { font-family: var(--display); font-size: clamp(27px, 8vw, 40px);
  margin: 14px 0 6px; line-height: 1.05; text-align: center; }
.brk-lead { margin: 0 auto 2px; max-width: 42ch; color: var(--muted); font-size: 15px;
  line-height: 1.5; text-align: center; }
.brk-hero p { margin: 0 auto; max-width: 42ch; color: var(--muted); font-size: 15px; line-height: 1.5; }
.brk-tiles { list-style: none; margin: 16px 0 0; padding: 0; flex: 0 0 auto;
  display: grid; gap: 12px; grid-template-columns: 1fr; }
/* auto-fit, not a fixed count: the day a sixth game lands this does not need
   touching (the hard-coded three needed touching the day the fourth did). */
@media (min-width: 560px) { .brk-tiles { grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); } }
.brk-tile {
  display: flex; gap: 14px; align-items: center; text-decoration: none; color: inherit;
  border: 3px solid var(--line); border-radius: 18px; background: var(--bg-2);
  padding: 14px; box-shadow: 4px 4px 0 var(--line); min-height: 96px;
}
@media (min-width: 560px) { .brk-tile { flex-direction: column; text-align: center; gap: 8px; } }
.brk-tile:active { transform: translate(4px, 4px); box-shadow: none; }
.brk-tile svg { width: 74px; height: 74px; flex: 0 0 auto; }
.brk-tile b { font-family: var(--display); font-size: 19px; display: block; margin-bottom: 3px; }
.brk-tile small { color: var(--muted); font-size: 13.5px; line-height: 1.45; display: block; }

/* ---- a game not earned yet (Rick, 25 Oct) --------------------------------
   The drawing and the name stay. Greyed and faded, not hidden and not a
   question mark: a child has to be able to see what they are playing for.
   It is a <button>, so it needs the font and alignment a link got free. */
.brk-locked {
  font: inherit; text-align: left; width: 100%; cursor: default;
  border-style: dashed; background: var(--bg-3, var(--bg-2));
  box-shadow: none; opacity: .72;
}
@media (min-width: 560px) { .brk-locked { text-align: center; } }
.brk-locked:active { transform: none; box-shadow: none; }
.brk-locked svg { filter: grayscale(1); opacity: .55; }
.brk-lk { font-style: normal; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: 11px; color: var(--line); }
.brk-locked.shake { animation: brkNope .32s ease; }
@keyframes brkNope {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-5px); } 50% { transform: translateX(5px); }
  80% { transform: translateX(-3px); }
}
@media (prefers-reduced-motion: reduce) { .brk-locked.shake { animation: none; } }
/* How many are left, and what opens them. */
.brk-ladder { margin: 14px 2px 0; font-size: 13.5px; line-height: 1.5;
  color: var(--muted); text-align: center; }
/* A locked game named in the prose at the foot of the page: still readable,
   no longer a door. */
.brk-copy-lk { color: var(--muted); }

.brk-foot { margin-top: auto; padding: 18px 4px 14px; text-align: center;
  font-size: 13px; color: var(--muted); }
.brk-foot a { color: inherit; }

/* ---- the playfield: whatever height is left, never more ------------- */
.brk-field {
  flex: 1 1 auto; position: relative; min-height: 0;
  border: 3px solid var(--line); border-radius: 18px;
  background: var(--bg-2); overflow: hidden; margin-bottom: 10px;
  /* none, not manipulation: a finger that starts on the playfield is playing,
     not scrolling. The copy below the game is still reachable by starting the
     swipe anywhere else. */
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---- Whack-a-Wobble ------------------------------------------------- */
.holes { position: absolute; inset: 0; display: grid; gap: 2%;
  grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 3%; }
/* overflow:hidden is what makes it a HOLE. Without it the creature slides up
   across the row below on its way out, which reads as a bug rather than a pop. */
.hole { position: relative; display: flex; align-items: flex-end; justify-content: center;
  cursor: pointer; overflow: hidden; }
/* the mound the creature comes out of, drawn in the page's own colours */
.hole::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 4%; height: 26%;
  background: var(--bg-3); border: 3px solid var(--line); border-radius: 50%;
  z-index: 2; pointer-events: none;
}
.hole svg { position: relative; z-index: 1; width: 96%; height: 92%;
  transform: translateY(115%); transition: transform .16s cubic-bezier(.3,1.6,.5,1);
  pointer-events: none; }
.hole.up svg { transform: translateY(8%); }
.hole.up svg .wob { animation: wob 1.1s ease-in-out infinite; transform-origin: 50px 100px; }
@keyframes wob { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.hole.hit svg { transform: translateY(34%) scaleY(.6) scaleX(1.2); transition: transform .09s ease-out; }
.hole.hit svg .wob { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .hole svg, .hole.hit svg { transition: none; }
  .hole.up svg .wob { animation: none; }
}
/* the little number that flies up off a bonk */
.pow { position: absolute; z-index: 5; font-family: var(--display); font-size: 20px;
  color: var(--accent); pointer-events: none; animation: pow .6s ease-out forwards;
  text-shadow: 0 2px 0 var(--bg-2); }
@keyframes pow { to { transform: translateY(-46px) scale(1.5); opacity: 0; } }
/* a penalty reads as a penalty: it falls instead of rising, and it is the one
   place in the break that uses a colour the rest of the page does not */
.pow.bad { color: #C2341F; }
.pow.bad { animation: powbad .6s ease-out forwards; }
@keyframes powbad { to { transform: translateY(26px) scale(1.25); opacity: 0; } }
/* the score chip is at the top of the screen and nobody looking at a balloon is
   looking at it, so it flinches when something is taken away */
.brk-score.ding { animation: ding .34s ease-out; }
@keyframes ding {
  0%,100% { transform: translateX(0) } 25% { transform: translateX(-5px) rotate(-3deg) }
  60% { transform: translateX(5px) rotate(3deg) }
}
@media (prefers-reduced-motion: reduce) {
  .pow, .pow.bad { animation: none; opacity: 0; }
  .brk-score.ding { animation: none; }
}

/* ---- Balloon Pop ---------------------------------------------------- */
.balloon { position: absolute; width: 74px; cursor: pointer; will-change: transform;
  z-index: 1; }
.balloon svg { width: 100%; height: auto; display: block; pointer-events: none; }
.bits { position: absolute; z-index: 6; pointer-events: none; }
.bits i { position: absolute; width: 9px; height: 13px; border-radius: 2px;
  animation: bit .7s ease-out forwards; }
@keyframes bit { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }

/* ---- Mixed-Up Monster ----------------------------------------------- */
.mon-stage { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; padding: 10px; }
.mon { width: min(62vw, 260px); max-height: 56%; cursor: pointer; }
.mon svg { width: 100%; height: 100%; display: block; }
.mon.dance svg { animation: dance .5s ease-in-out 3; transform-origin: 50% 90%; }
@keyframes dance {
  0%,100% { transform: rotate(0) translateY(0); }
  25% { transform: rotate(-7deg) translateY(-9px); }
  75% { transform: rotate(7deg) translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) { .mon.dance svg { animation: none; } }
.mon-name { font-family: var(--display); font-size: clamp(19px, 5.4vw, 27px);
  text-align: center; line-height: 1.1; margin: 0; }
.mon-hint { font-size: 13px; color: var(--muted); margin: 0; text-align: center; }
.mon-bands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  flex: 0 0 auto; margin-bottom: 10px; }
.mon-band {
  appearance: none; font: inherit; cursor: pointer; min-height: 56px;
  border: 3px solid var(--line); border-radius: 14px; background: var(--bg-2);
  color: var(--ink); box-shadow: 3px 3px 0 var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.mon-band:active { transform: translate(3px, 3px); box-shadow: none; }
.mon-band b { font-family: var(--display); font-size: 15px; }
.mon-band small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }

/* ---- Hot Potato ----------------------------------------------------- */
.spud { position: absolute; width: min(44vw, 176px); cursor: pointer; z-index: 2;
  transition: left .13s ease-out, top .13s ease-out; will-change: left, top; }
.spud svg { width: 100%; height: auto; display: block; pointer-events: none; }
/* the shake is driven from the script: --shake grows with the heat */
.spud.hot { animation: shake var(--shk, .09s) linear infinite; }
@keyframes shake {
  0%,100% { transform: translate(0,0) rotate(0); }
  25% { transform: translate(var(--shake), calc(var(--shake) * -1)) rotate(1.5deg); }
  75% { transform: translate(calc(var(--shake) * -1), var(--shake)) rotate(-1.5deg); }
}
@media (prefers-reduced-motion: reduce) { .spud.hot { animation: none; } }
.spud-n { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; text-align: center;
  font-family: var(--display); font-size: 16px; color: var(--muted); pointer-events: none; }

/* ---- Don't Wake the Dragon ------------------------------------------- */
.den { position: absolute; inset: 0; display: flex; flex-direction: column; }
.drg { flex: 0 0 auto; padding: 10px 8px 0; }
.drg svg { width: 100%; height: auto; max-height: 34svh; display: block; }
.pile { flex: 1 1 auto; min-height: 0; margin: 0 6px 34px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2%;
  align-content: center; justify-items: center; }
.cookie {
  appearance: none; border: none; background: none; padding: 0;
  width: 100%; max-width: 68px; cursor: pointer; transition: transform .18s, opacity .18s;
}
.cookie svg { width: 100%; height: auto; display: block; pointer-events: none; }
.cookie:active { transform: scale(.88) !important; }
.cookie.gone { opacity: 0; transform: scale(.4) translateY(-22px) !important; pointer-events: none; }
.drg-n { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0; text-align: center;
  font-family: var(--display); font-size: 16px; color: var(--muted); pointer-events: none; }

/* ---- Odd One Out ------------------------------------------------------ */
.grid { position: absolute; inset: 0; display: grid; gap: 2.5%; padding: 3.5%;
  align-content: center; justify-content: center; }
.face { appearance: none; border: none; background: none; padding: 0; cursor: pointer;
  min-width: 0; display: flex; align-items: center; justify-content: center; }
.face svg { width: 100%; height: auto; max-height: 100%; display: block; pointer-events: none; }
.face:active { transform: scale(.94); }
.face.got svg { animation: gotit .25s ease-out; }
@keyframes gotit { 50% { transform: scale(1.22) rotate(8deg); } }
.face.no svg { animation: nope .3s ease-out; }
@keyframes nope { 0%,100%{transform:translateX(0)} 30%{transform:translateX(-7px)} 70%{transform:translateX(7px)} }
@media (prefers-reduced-motion: reduce) { .face.got svg, .face.no svg { animation: none; } }

/* ---- the row of actions under every game ---------------------------- */
.brk-actions { display: flex; gap: 8px; flex: 0 0 auto; padding-bottom: 12px; }
.brk-go {
  appearance: none; font: inherit; font-family: var(--display); font-size: 17px;
  cursor: pointer; flex: 1 1 auto; min-height: 56px; padding: 0 14px;
  border: 3px solid var(--line); border-radius: 14px;
  background: var(--accent); color: var(--on-ink); box-shadow: 4px 4px 0 var(--line);
}
.brk-go.quiet { background: var(--bg-2); color: var(--ink); }
/* the link version of the button: it has to sit on the same line as the real one */
a.brk-go { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.brk-go:active { transform: translate(4px, 4px); box-shadow: none; }

/* ---- start and end cards, over the field ---------------------------- */
.brk-card {
  position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 20px;
  background: var(--bg-2); text-align: center;
}
.brk-card h2 { font-family: var(--display); font-size: clamp(24px, 7vw, 34px); margin: 0; line-height: 1.08; }
.brk-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 34ch; }
.brk-card .big { font-family: var(--display); font-size: clamp(44px, 15vw, 72px);
  color: var(--accent); line-height: 1; margin: 2px 0; }
.brk-card svg { width: 88px; height: 88px; }
.brk-card .brk-go { flex: 0 0 auto; width: min(100%, 280px); }

/* ---- the page copy under the hub (search engines, and first-timers) -- */
.brk-copy { padding: 22px 4px 8px; max-width: 760px; margin: 0 auto;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px)); }
.brk-copy h1 { font-family: var(--display); font-size: 23px; margin: 4px 0 10px; }
.brk-copy h2 { font-family: var(--display); font-size: 19px; margin: 18px 0 6px; }
.brk-copy p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* ------------------------------------------------------- the challenge link
   The banner sits under the crumbs so the target is in sight the whole way
   through, not just on the end card - the number you are chasing is the
   reason you came. The win state turns green and says to send it back,
   because the loop only works if it goes both ways. */
.brk-beat { margin:8px 0 0; text-align:center; font-weight:700; font-size:.95rem;
  color:var(--muted,#6b6b6b); }
.brk-beat b { color:var(--accent,#d4396a); font-size:1.08em; }
.brk-beat.win { color:var(--good,#1d8a5d); }
.brk-share { background:var(--good,#1d8a5d); color:#fff; border-color:var(--good,#1d8a5d); }
.brk-share:disabled { opacity:1; font-size:.86rem; font-weight:600; }