/* Last Bend, practice edition. The look is lastbend.com's own (its tokens and type, the board
   drawn by its renderer), laid out like its /play screen; the start and result card is the
   shared toy chrome (assets/toy-chrome.css) tinted coral. Portrait first: at 390 x 844 the
   banner, HUD, wave strip, board, tray and buttons fit without scrolling. */

:root {
  /* lastbend.com's tokens; the kit's renderer reads these names */
  --ground: #1b2a3a;
  --ground-deep: #14202d;
  --tile: #233547;
  --tile-edge: #2e4458;
  --sand: #e9c46a;
  --sand-deep: #c9a24e;
  --ember: #ff6b4a;
  --ember-deep: #b8431f;
  --tower: #7fd9e6;
  --creep: #fff6e0;
  --paper: #f2efe6;
  --mute: #a7b4c2;
  --line: rgba(242, 239, 230, 0.14);
  --font: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --col: 440px;
  --banner: 34px;
  /* the shared card, in Last Bend's coral */
  --tc-accent: #ff6b4a;
  --tc-on: #1a0d08;
  --tc-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --tc-ground: #14202d;
}

/* The kit tints its card from the accent, and coral over this navy reads brown: keep the card
   in Last Bend's own ground, with coral only on the eyebrow and the button. (:root.tc outranks
   the kit's html.tc, which loads after this file.) */
:root.tc {
  --tc-card: #1b2a3a;
  --tc-edge: #2e4458;
  --tc-text: #d7dde4;
  --tc-faint: #a7b4c2;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--ground);
  color: var(--paper);
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
}
body {
  background:
    radial-gradient(120% 70% at 50% -10%, #24384d 0%, rgba(36, 56, 77, 0) 60%),
    radial-gradient(90% 60% at 50% 110%, #101a25 0%, rgba(16, 26, 37, 0) 70%),
    var(--ground);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ---------- the daily banner ---------- */
.daily {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 25;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: calc(var(--banner) + env(safe-area-inset-top));
  padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  background: linear-gradient(180deg, rgba(20, 32, 45, 0.97), rgba(16, 26, 37, 0.97));
  border-bottom: 1px solid rgba(255, 107, 74, 0.28);
  color: var(--paper);
  text-decoration: none;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.daily__k { color: var(--mute); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10.5px; font-weight: 700; }
.daily__t { font-variant-numeric: tabular-nums; font-weight: 700; }
.daily__go { color: var(--ember); }
.daily:hover .daily__go { text-decoration: underline; text-underline-offset: 3px; }
.daily:focus-visible { outline: 2px solid var(--tower); outline-offset: -3px; }

/* ---------- the game column ---------- */
.game {
  width: min(100% - 28px, var(--col));
  margin: 0 auto;
  /* the bottom strip is for the back link and the tip jar / full-screen badges */
  padding: calc(var(--banner) + env(safe-area-inset-top) + 10px) 0 calc(env(safe-area-inset-bottom) + 56px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100dvh;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* lastbend.com's toy-block logo (its own title art), not set type */
.logo { display: block; height: 54px; width: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35)); }
.brand-controls { display: inline-flex; align-items: center; gap: 8px; }
.status { color: var(--mute); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

.tool-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--tile-edge);
  border-radius: 10px;
  background: var(--ground-deep);
  color: var(--mute);
  cursor: pointer;
}
.tool-btn[aria-pressed="true"] { color: var(--tower); }
.tool-btn svg { width: 18px; height: 18px; overflow: visible; }
.tool-btn path { fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool-btn path.o { fill: none; }
.tool-btn[aria-pressed="true"] .slash,
.tool-btn[aria-pressed="true"] .off,
.tool-btn[aria-pressed="false"] .on { display: none; }

.lb-hud {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--mute);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.lb-hud strong { color: var(--paper); font-weight: 700; }

/* Wave strip: five chips (the wave's main monster and its total) and one line that spells
   out the selected wave. After a round each chip takes its result color. */
.waves-wrap { display: flex; flex-direction: column; gap: 4px; }
.waves {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.waves button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 44px;
  padding: 0 4px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--ground-deep);
  color: var(--paper);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.waves button[aria-pressed="true"] { border-color: var(--mute); background: #1d3144; }
.waves li.clean button { border-color: #6fcf7f; }
.waves li.leaky button { border-color: var(--sand); }
.waves li.broken button { border-color: var(--ember); }
.wave-detail { margin: 0; color: var(--mute); font-size: 13.5px; text-align: center; min-height: 1.4em; }
.wave-detail strong { color: var(--paper); font-weight: 700; }

.icon, .icon-fallback { display: inline-block; flex: 0 0 auto; background-repeat: no-repeat; }
.icon-fallback { border-radius: 50%; background: var(--creep); transform: scale(0.6); }

/* ---------- the board ---------- */
.board { position: relative; display: flex; justify-content: center; }
.board canvas {
  display: block;
  border-radius: 14px;
  touch-action: manipulation;
  cursor: pointer;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.7);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.toast {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ground-deep);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}

/* First visit: coach bubbles over the board. Taps pass through to the tiles; only the
   bubble's buttons catch them. */
.coach {
  position: absolute;
  z-index: 2;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--paper);
  color: var(--ground-deep);
  font-size: 14px;
  line-height: 1.35;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  animation: coach-in 220ms ease-out;
}
.coach.above { transform: translateY(calc(-100% - 10px)); }
.coach.below { transform: translateY(10px); }
.coach::after { content: ""; position: absolute; left: calc(var(--arrow-x) - 8px); border: 8px solid transparent; }
.coach.above::after { top: 100%; border-top-color: var(--paper); }
.coach.below::after { bottom: 100%; border-bottom-color: var(--paper); }
.coach p { margin: 0 0 8px; }
.coach-actions { display: flex; justify-content: flex-end; gap: 6px; align-items: center; }
.coach-count { margin-right: auto; font-size: 12px; color: #6b6458; font-weight: 600; }
.coach button {
  pointer-events: auto;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.coach-next { border: 0; background: var(--ember); color: #1a0d08; }
.coach-skip { border: 1px solid #c9c2b1; background: transparent; color: var(--ground-deep); }
.coach button:focus-visible { outline: 2px solid var(--ground-deep); outline-offset: 2px; }
@keyframes coach-in { from { opacity: 0; } }

/* An overrun shakes the board. */
.board.shake { animation: board-shake 600ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes board-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* ---------- tray and buttons ---------- */
.plan { display: flex; flex-direction: column; gap: 8px; }
.tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tray-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  column-gap: 5px;
  align-items: center;
  min-height: 52px;
  padding: 6px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: var(--ground-deep);
  color: var(--paper);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tray-item .icon, .tray-item .icon-fallback { grid-row: 1 / span 2; }
.tray-name { min-width: 0; font-size: 12.5px; letter-spacing: -0.01em; font-weight: 700; line-height: 1.15; }
.tray-cost { font-size: 13px; color: var(--sand); font-weight: 700; }
.tray-item[aria-pressed="true"] { border-color: var(--tower); background: #1d3144; }
.tray-item:disabled { opacity: 0.45; cursor: default; }

.hint { margin: 0; min-height: 1.5em; color: var(--mute); font-size: 14px; text-align: center; }

.actions { display: flex; gap: 8px; }
.actions button {
  flex: 1 1 0;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 12px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease, background-color 120ms ease;
}
.actions .primary { flex-grow: 1.6; border: 0; background: var(--ember); color: #1a0d08; }
.actions .primary:hover { background: #ff7d60; }
.actions .ghost { border: 1px solid var(--tile-edge); background: transparent; color: var(--paper); }
.actions button:active { transform: translateY(1px); }
.actions button:disabled { opacity: 0.45; cursor: default; }

.actions button:focus-visible,
.tray-item:focus-visible,
.tool-btn:focus-visible,
.waves button:focus-visible {
  outline: 2px solid var(--tower);
  outline-offset: 2px;
}

/* ---------- the start / result card (the rest comes from toy-chrome.css) ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  background: rgba(10, 16, 24, 0.55);
}
.overlay[hidden] { display: none !important; }
html.tc .overlay .panel__title { font-weight: 800; font-variation-settings: "wdth" 84, "opsz" 96; letter-spacing: -0.015em; }
html.tc .overlay .panel__text--small { font-size: 13.5px; margin-top: -8px; }
.intro-link { color: var(--sand); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(233, 196, 106, 0.45); text-underline-offset: 3px; }
.intro-link:hover { text-decoration-color: var(--sand); }
.intro-link:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; border-radius: 3px; }

.rank-line { margin: -4px 0 6px; color: var(--paper); font: 400 15px/1.45 var(--tc-body); }
.marks { list-style: none; margin: 4px auto 10px; padding: 0; display: flex; justify-content: center; gap: 8px; }
.marks li { width: 34px; height: 34px; border-radius: 9px; }
.marks .clean { background: #6fcf7f; }
.marks .leaky { background: var(--sand); }
.marks .broken { background: var(--ember); }
.bend-line { margin: 0 0 4px; color: var(--paper); font: 400 15px/1.4 var(--tc-body); }
.bend-line strong { color: var(--ember); font-weight: 700; }
.res-stats { margin: 0 0 16px; color: var(--mute); font: 400 14px/1.4 var(--tc-body); font-variant-numeric: tabular-nums; }

/* each ending has its own entrance for the title */
.tier-perfect .rank { color: var(--sand); text-shadow: 0 0 24px rgba(233, 196, 106, 0.55); animation: rank-pop 700ms cubic-bezier(0.2, 1.6, 0.4, 1) 120ms both; }
.tier-solid .rank { animation: rank-pop 520ms cubic-bezier(0.2, 1.4, 0.4, 1) 100ms both; }
.tier-phew .rank { animation: rank-sigh 700ms ease-out 100ms both; }
.tier-overrun .rank { color: var(--ember); animation: rank-wobble 760ms ease-in-out 120ms both; }
@keyframes rank-pop { from { transform: scale(0.4); opacity: 0; } }
@keyframes rank-sigh { from { transform: translateY(-10px); opacity: 0; } }
@keyframes rank-wobble {
  0% { transform: rotate(0) scale(0.6); opacity: 0; }
  30% { transform: rotate(-8deg) scale(1.1); opacity: 1; }
  50% { transform: rotate(6deg); }
  70% { transform: rotate(-4deg); }
  100% { transform: rotate(0); }
}

.res-more { display: flex; gap: 8px; margin-top: 10px; }
.ghost-btn {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--tc-edge);
  background: transparent;
  color: var(--paper);
  font: 600 14px/1.2 var(--tc-body);
  cursor: pointer;
}
.ghost-btn:hover { background: rgba(255, 255, 255, 0.04); }
.ghost-btn:focus-visible { outline: 2px solid var(--tc-accent); outline-offset: 2px; }

/* the end-of-round invitation to the daily */
.cta {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(10, 16, 24, 0.45);
  border: 1px solid rgba(233, 196, 106, 0.28);
}
.cta__text { margin: 0 0 10px; color: var(--paper); font: 400 14px/1.45 var(--tc-body); text-wrap: pretty; }
.cta__text b { color: var(--sand); font-weight: 600; }
.cta__btn {
  display: block;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--sand);
  color: #1a1408;
  font: 700 15px/44px var(--tc-body);
  text-decoration: none;
}
.cta__btn:hover { filter: brightness(1.05); }
.cta__btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.cta__domain { margin: 7px 0 0; color: var(--mute); font: 500 12.5px/1.2 var(--tc-body); letter-spacing: 0.03em; }
.cta__domain[hidden] { display: none; }

/* ---------- frame ---------- */
.frame__corner {
  position: fixed;
  z-index: 5;
  font: 500 0.6rem/1 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
}
.frame__corner--bl { bottom: max(14px, env(safe-area-inset-bottom)); left: max(14px, env(safe-area-inset-left)); pointer-events: auto; }
.frame__corner--bl a { color: var(--mute); text-decoration: none; }
.frame__corner--bl a:hover { color: var(--paper); }

/* The tip jar and full-screen badges dock right-center by default, which on a phone is the
   middle of the board. Put them side by side in the bottom strip, under the buttons. */
.opt-tipjar.opt-tipjar { top: auto; bottom: max(8px, env(safe-area-inset-bottom)); transform: none; }
.opt-fs.opt-fs { top: auto; bottom: max(8px, env(safe-area-inset-bottom)); right: calc(max(16px, env(safe-area-inset-right)) + 50px); transform: none; }
.opt-tipjar.opt-tipjar.tj-nudge { animation: none; }

/* Phones: keep the banner's words clear of the top-left corner, where the iPhone app puts its
   Home button (Undo and Play own both bottom corners, so the button can't move down). The label
   goes; "coming soon" (later the countdown) and the link stay, centered in the space left. */
@media (max-width: 480px) {
  .daily { padding-left: max(92px, env(safe-area-inset-left)); }
  .daily__k { display: none; }
}

/* In the iPhone app the Home button sits top-left, inside the banner's row (the app marks the
   page html.opt-quit-tl). Start the banner just right of the button so the strip never runs
   under it. The site never has this class, so the web banner is unchanged. */
html.opt-quit-tl .daily {
  left: calc(max(14px, env(safe-area-inset-left)) + 84px);
  padding-left: 12px;
  border-left: 1px solid rgba(255, 107, 74, 0.28);
  border-bottom-left-radius: 12px;
}

/* Small phones (375 x 667): tighten so the board and buttons still fit. */
@media (max-height: 700px) {
  :root { --banner: 28px; }
  .daily { padding-top: max(5px, env(safe-area-inset-top)); padding-bottom: 5px; }
  .game { gap: 5px; padding-top: calc(var(--banner) + env(safe-area-inset-top) + 7px); }
  .logo { height: 42px; }
  .tool-btn { width: 32px; height: 32px; }
  .lb-hud { font-size: 14px; }
  .waves button { min-height: 34px; font-size: 14px; }
  .wave-detail { display: none; } /* the chips still show each wave's monster and count */
  .tray-item { min-height: 46px; padding: 4px 6px; }
  .hint { font-size: 13px; }
  .actions button { min-height: 44px; }
}

/* Short phones (375 x 667): the result card, with the daily invitation and More Toys under it,
   tightens so it still fits without scrolling. */
@media (orientation: portrait) and (max-height: 700px) {
  html.tc .overlay .panel { padding-top: 14px; padding-bottom: 10px; }
  .marks { margin: 2px auto 6px; }
  .marks li { width: 28px; height: 28px; border-radius: 8px; }
  .res-stats { margin-bottom: 10px; }
  .res-more { margin-top: 8px; }
  .ghost-btn { min-height: 40px; }
  .cta { margin-top: 10px; padding: 10px 12px; }
  .cta__text { font-size: 13.5px; margin-bottom: 8px; }
  .cta__btn { min-height: 40px; line-height: 40px; }
  .cta__domain { margin-top: 5px; }
}

/* A phone on its side: the result splits in two, the round and its buttons on the left, the
   daily invitation, share and More Toys on the right. */
@media (orientation: landscape) and (max-height: 500px) {
  html.tc .overlay .panel:has(#resultBody:not([hidden])) { columns: 2; column-gap: 28px; column-fill: auto; }
  html.tc .overlay .panel:has(#resultBody:not([hidden])) .cta { break-before: column; margin-top: 0; }
  .marks { margin: 2px auto 6px; }
  .marks li { width: 26px; height: 26px; border-radius: 7px; }
  .res-stats { margin-bottom: 10px; }
  .res-more { margin-top: 8px; }
  .ghost-btn { min-height: 40px; }
  .cta { padding: 10px 12px; }
  .cta__text { font-size: 13px; margin-bottom: 8px; }
  .cta__btn { min-height: 40px; line-height: 40px; }
  .cta__domain { margin-top: 5px; }
  /* WebKit paints a backdrop-filtered element inside a multi-column box blank */
  html.tc .overlay .panel:has(#resultBody:not([hidden])) .mg-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .actions button { transition: none; }
  .coach, .board.shake, .rank { animation: none !important; }
}