/* The parent corner (issues 20, 21, 24): the adult side of miniplay, behind the hold. Plainer than
   the child screens but in the same world: the dimmed forest behind, a wooden notice board in front
   (forest/ui/board.webp's frame, stretched by border-image) with a paper notice pinned in it, so the
   text never sits on the planks' lines; plank buttons, calm readable text. */

body:has(.corner) {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: 0 0 max(24px, env(safe-area-inset-bottom));
  color-scheme: light;
  color: var(--ink);
  background: var(--night);
  font: 400 1.0625rem / 1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body:has(.corner)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgb(29 58 44 / 72%), rgb(29 58 44 / 86%)),
    url("/static/forest/backdrop.9e5f3eac76.webp") center 35% / cover no-repeat;
}
/* The board sits in the middle of whatever height is left under the corner buttons. */
main:has(.corner) { width: min(100% - 32px, 34rem); margin: auto; padding: 0; }
main:has(.corner-wide) { width: min(100% - 32px, 46rem); }

/* Back and language in the screen's corners, as on the hub and the Wardrobe. */
.corner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: max(2.2dvh, env(safe-area-inset-top)) max(3vw, env(safe-area-inset-right)) 12px max(3vw, env(safe-area-inset-left));
}
.corner-langs { display: flex; gap: 12px; }

.corner {
  display: grid;
  gap: 14px;
  padding: clamp(18px, 3vw, 28px) clamp(18px, 3.4vw, 32px) clamp(20px, 3vw, 30px);
  border: solid transparent;
  /* board.webp's frame, sliced on its inner outline (101 52 55 62 of 475x688) and without fill:
     the planks stay out, the paper is the background inside the frame. */
  border-width: 38px 19px 20px 23px;
  border-image: url("/static/forest/ui/board.75099be034.webp") 101 52 55 62 / 38px 19px 20px 23px stretch;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgb(150 100 50 / 16%)) padding-box,
    #fcf3e0 padding-box;
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 70%), inset 0 0 0 1px rgb(120 80 40 / 18%);
  filter: drop-shadow(0 10px 18px rgb(0 0 0 / 35%));
}
.corner-eyebrow { font-size: 0.875rem; font-weight: 700; color: var(--ink-soft); overflow-wrap: anywhere; }
.corner-title { font: 800 clamp(1.6rem, 1.2rem + 2vw, 2.1rem) / 1.1 var(--round); text-wrap: balance; }
.corner-subtitle { font: 800 1.15rem / 1.2 var(--round); }
.corner-note { font-size: 0.9375rem; color: var(--ink-soft); }
.corner-hint { font-weight: 700; text-align: center; }

.corner-form { display: grid; gap: 8px; margin-top: 4px; }
.corner-form label { font-weight: 700; }
.corner-form input {
  min-height: 52px;
  padding: 0 14px;
  font: inherit;
  font-size: 1.125rem;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink-soft);
  border-radius: 12px;
  box-shadow: inset 0 3px 0 rgb(58 30 12 / 12%);
}
.corner-form input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-color: var(--ink); }
.corner-form input[aria-invalid="true"] { border-color: var(--berry); }
.code-input { font-variant-numeric: tabular-nums; letter-spacing: 0.5em; font-size: 1.6rem !important; text-align: center; text-indent: 0.5em; }

.corner-error, .corner-warn { padding: 10px 12px; border-radius: 12px; font-weight: 600; }
.corner-error { color: var(--berry); background: var(--berry-soft); }
.corner-warn { color: var(--ink); background: var(--amber-soft); }

.corner-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  margin-top: 6px;
  padding: 2px 8px 0;
  font: 800 1.125rem / 1.15 var(--round);
  text-align: center;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: solid transparent;
  border-width: 14px 26px 18px;
  border-image: url("/static/forest/ui/plank.c288ebf48f.webp") 60 90 70 fill / 14px 26px 18px stretch;
  filter: drop-shadow(0 4px 0 var(--drop));
  cursor: pointer;
}
.corner-button:active { transform: translateY(3px); }
.corner-button.is-quiet { border-image-source: none; border: 2px solid var(--ink-soft); border-radius: 999px; padding: 0 20px; min-height: 52px; filter: none; }
.corner-button:disabled { opacity: 0.45; cursor: not-allowed; }
.corner-button:focus-visible, .corner-link:focus-visible, .player:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.corner-links, .corner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.corner-links form { display: contents; }
.corner-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  background: none;
  border: 0;
  cursor: pointer;
}

.corner-panel { display: grid; gap: 8px; padding: 14px 16px; background: rgb(255 250 240 / 82%); border: 2px solid rgb(58 30 12 / 25%); border-radius: 14px; }

/* Pro status */
.pro-status { display: flex; align-items: center; gap: 10px; font: 800 1.25rem / 1.2 var(--round); }
.pro-badge {
  padding: 3px 10px;
  font: 400 1rem / 1 var(--display);
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 8px;
}
.pro.is-free .pro-badge { background: var(--cream); color: var(--ink-soft); border-color: var(--ink-soft); }
.pro.is-pro, .pro.is-offline { border-color: var(--leaf); background: var(--leaf-soft); }
.pro-until { font-weight: 700; color: var(--leaf); }

/* This device's Player: their Mathew and acorns, never a name. */
/* Mathew beside his acorns and status, small enough that the whole corner fits a tablet screen. */
.device-player { display: flex; align-items: center; gap: 8px 20px; }
.device-player > div { flex: 1 1 0; min-width: 0; display: grid; justify-items: start; gap: 6px; }
.device-figure { flex: 0 0 auto; display: block; width: clamp(96px, 24vw, 150px); }
.device-figure .mathew { width: 100%; }
.corner [hidden] { display: none; }
.corner-acorns { display: inline-flex; align-items: center; gap: 2px; font: 400 1.6rem / 1 var(--display); }
.corner-acorns img { width: auto; height: 32px; }

.corner-signout { display: grid; justify-items: start; gap: 4px; }

/* The hold */
.corner-gate { justify-items: center; text-align: center; }
.hold {
  position: relative;
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  margin: 8px 0;
  padding: 0 0 6px;
  background: url("/static/forest/button.2393e81a21.webp") center / contain no-repeat;
  border: 0;
  border-radius: 50%;
  filter: drop-shadow(0 6px 0 var(--drop));
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.hold:disabled { cursor: default; opacity: 0.6; }
.hold img { width: 60px; height: auto; pointer-events: none; }
.hold-ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); rotate: -90deg; pointer-events: none; }
.hold-ring circle { fill: none; stroke-width: 10; }
.hold-track { stroke: transparent; }
.hold-fill { stroke: var(--leaf); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.25s ease-out; }
.hold-fill { opacity: 0; }
.hold.is-holding .hold-fill { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 3s linear; }
.hold.is-holding { transform: scale(0.96); }
.hold:focus-visible { outline: 4px solid var(--gold); outline-offset: 6px; }

/* The Player picker */
.players { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 40rem) { .players { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.players form { height: 100%; }
.player {
  display: grid;
  position: relative;
  justify-items: center;
  align-content: start;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 14px 8px;
  font: inherit;
  color: var(--ink);
  background: url("/static/forest/ui/stump.7b35479de8.webp") center 104px / 80% auto no-repeat, rgb(255 250 240 / 70%);
  border: 2px solid rgb(58 30 12 / 25%);
  border-radius: 14px;
  cursor: pointer;
}
.player:hover, .player[aria-current="true"] { border-color: var(--ink); }
.player[aria-current="true"] { border-color: var(--leaf); box-shadow: 0 0 0 2px var(--leaf); }
.player:disabled { opacity: 0.6; cursor: progress; }
.player > img, .player > .mathew { position: relative; width: auto; height: 120px; }
.player .corner-acorns { margin-top: 14px; }
.player-new { margin-top: 14px; }
.player.is-new { border-style: dashed; background: transparent; }
.player.is-new > .mathew { opacity: 0.75; }
.player-new { font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .hold-fill, .hold.is-holding .hold-fill { transition: none; }
}

/* Buying Pro (issue 28, prototype): what Pro opens, the three periods, the return from Stripe. */
.pro-games { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 48px)); gap: 6px; }
.pro-games img, .pro-game-initial {
  display: grid;
  place-items: center;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  font: 400 1.25rem / 1 var(--display);
  background: var(--rule);
  border-radius: 10px;
}

.pro-buy { display: grid; gap: 10px; margin-top: 6px; }
.pro-buy .corner-button { width: 100%; }
.pro-periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; margin: 0; padding: 0; border: 0; }
.pro-periods legend { margin-bottom: 18px; }
.pro-period {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 2px;
  padding: 18px 8px 12px;
  text-align: center;
  background: var(--paper);
  border: 3px solid rgb(58 30 12 / 25%);
  border-radius: 14px;
  cursor: pointer;
}
.pro-period input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pro-period:has(input:checked) { border-color: var(--leaf); background: var(--leaf-soft); box-shadow: 0 0 0 2px var(--leaf); }
.pro-period:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
.pro-period-name { font-weight: 700; }
.pro-period-price { font: 800 1.375rem / 1.15 var(--round); white-space: nowrap; }
.pro-period-month { font-size: 0.875rem; color: var(--ink-soft); }
.pro-period-best {
  position: absolute;
  top: -13px;
  left: 50%;
  translate: -50% 0;
  padding: 3px 10px 2px;
  font: 400 0.8125rem / 1.2 var(--display);
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 999px;
}
/* Phones: one period per row, name and per-month on the left, the price on the right. */
@media (max-width: 479px) {
  .pro-periods { grid-template-columns: 1fr; }
  .pro-period { grid-template-columns: 1fr auto; justify-items: start; align-items: center; column-gap: 12px; padding: 14px 16px; text-align: left; }
  .pro-period-price { grid-column: 2; grid-row: 1 / span 2; }
  .pro-period-best { left: auto; right: 12px; translate: none; }
}

.pro-manage { display: grid; justify-items: start; gap: 4px; }
.pro-wait { border-color: var(--leaf); }
.pro-progress { display: flex; align-items: center; gap: 12px; }
.pro-dots { display: inline-flex; gap: 6px; }
.pro-dots i { width: 10px; height: 10px; background: var(--leaf); border-radius: 50%; animation: pro-dot 1.2s ease-in-out infinite; }
.pro-dots i:nth-child(2) { animation-delay: 0.2s; }
.pro-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes pro-dot { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }
.pro-done { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-weight: 700; color: var(--leaf); background: var(--leaf-soft); border-radius: 12px; }
.pro-done img { width: 32px; height: auto; }

/* A secondary link or action: a small plank, never underlined text (every link is a game control).
   The page it names, when it is this page, is the leaf-green plank, pressed in. */
.corner-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 1px 4px 0;
  font: 800 0.9375rem / 1.15 var(--round);
  text-align: center;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: solid transparent;
  border-width: 10px 18px 13px;
  border-image: url("/static/forest/ui/plank.c288ebf48f.webp") 60 90 70 fill / 10px 18px 13px stretch;
  filter: drop-shadow(0 3px 0 var(--drop));
  cursor: pointer;
  transition: transform 0.15s var(--pop);
}
.corner-chip:hover { transform: scale(1.04) rotate(-1deg); }
.corner-chip:active, .corner-chip[aria-current="page"] { transform: translateY(3px); filter: none; }
.corner-chip[aria-current="page"] { border-image-source: url("/static/forest/ui/leaf-button.7b53cbbbe2.webp"); color: var(--cream); text-shadow: 0 1px 0 var(--ink); }
.corner-chip:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* The legal pages and the links to them under every Pro panel. */
.legal-links { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 12px; border-top: 2px solid var(--rule); }
.legal-section { display: grid; gap: 4px; }
.legal p { max-width: 62ch; }
.proto-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }

@media (prefers-reduced-motion: reduce) { .pro-dots i { animation: none; opacity: 1; } .corner-chip { transition: none; } }

/* Tablet (the primary target): the board uses the screen, with roomier padding and type; phones keep the sizes above. */
@media (min-width: 768px) and (min-height: 700px) {
  main:has(.corner) { width: min(100% - 64px, 44rem); }
  main:has(.corner-wide) { width: min(100% - 64px, 56rem); }
  .corner { gap: 18px; padding: 36px 44px 40px; font-size: 1.1875rem; }
  .corner-title { font-size: 2.5rem; }
  .corner-subtitle { font-size: 1.35rem; }
  .corner-note { font-size: 1.0625rem; }
  .corner-panel { gap: 12px; padding: 22px 26px; }
  .pro-status { font-size: 1.5rem; }
  .pro-period { padding: 26px 12px 18px; }
  .pro-period-price { font-size: 1.75rem; }
  .corner-chip { min-height: 56px; font-size: 1.0625rem; }
}
.pro-opens { display: grid; gap: inherit; }
/* Tablet landscape: what Pro opens beside the periods, so the prices sit on the first screen. */
@media (min-width: 1000px) and (min-aspect-ratio: 1 / 1) {
  main:has(.pro-buy) { width: min(100% - 64px, 68rem); }
  .pro.is-free { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .pro.is-free > .pro-status { grid-column: 1 / -1; }
  .pro.is-free .pro-buy { margin-top: 0; }
  .pro.is-free .pro-periods { grid-template-columns: 1fr; gap: 18px; }
  .pro.is-free .pro-period { grid-template-columns: 1fr auto; justify-items: start; align-items: center; column-gap: 12px; padding: 14px 18px; text-align: left; }
  .pro.is-free .pro-period-price { grid-column: 2; grid-row: 1 / span 2; }
  .pro.is-free .pro-period-best { left: auto; right: 14px; translate: none; }
}