/* sort: a bold yellow card, five cards to put in order. */
.gamecard.sort {
  --yellow: #FFC72C;
  --deep: #E5A800;
  container-type: size;
  color: var(--ink);
  background: radial-gradient(70% 60% at 75% 40%, rgba(255, 255, 255, 0.35), transparent 70%), var(--yellow);
}

.panel { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; padding: 48px 56px; }
.side { display: flex; flex-direction: column; gap: 0; min-width: 0; }

.kicker { margin: 0; font-size: 15px; font-weight: 700; opacity: 0.7; }
.title { margin: 4px 0 14px; font-size: clamp(72px, 10cqw, 128px); font-weight: 800; line-height: 0.85; letter-spacing: -0.07em; }
.lede { margin: 0 0 20px; max-width: 30ch; font-size: 19px; font-weight: 500; line-height: 1.4; }
.how { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.how li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); font-size: 14px; font-weight: 700; white-space: nowrap; }
.how-i { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--yellow); font-size: 13px; font-weight: 800; }
.sort .chip { background: rgba(255, 255, 255, 0.6); }
.sort .chip.hot { background: var(--ink); color: var(--yellow); }
.sort .chip.gold { background: #FFFFFF; }
.chips:not(:empty) { margin-bottom: 18px; }
.actions { display: flex; gap: 10px; margin-top: 8px; }
.actions .pill { min-height: 56px; padding: 0 28px; }
.pill.white { --edge: var(--deep); }

/* HUD */
.hud { display: flex; justify-content: flex-start; align-items: flex-end; gap: 40px; margin-bottom: 28px; }
.legs { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.dots { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
.dots li { width: 22px; height: 6px; border-radius: 6px; background: rgba(10, 10, 11, 0.15); transition: background-color 300ms ease, width 300ms cubic-bezier(.2,.8,.2,1); }
.dots li.done { background: rgba(10, 10, 11, 0.55); }
.dots li.now { width: 34px; background: var(--ink); }
.leg { margin: 0; font-size: 13px; font-weight: 700; opacity: 0.7; }
.score { margin: 0; display: flex; flex-direction: column; align-items: flex-start; font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; }
.score span { display: inline-block; font-size: 60px; font-variant-numeric: tabular-nums; transform-origin: left center; }
.score small { margin-top: 4px; font-size: 13px; font-weight: 700; letter-spacing: 0; opacity: 0.7; }
.score.pop span { animation: pop 420ms cubic-bezier(.2,.9,.3,1.4); }
@keyframes pop { 30% { transform: scale(1.2); } }

.kind { margin: 0; font-size: 15px; font-weight: 700; opacity: 0.7; }
.ask { margin: 6px 0 12px; font-size: clamp(30px, 3.4cqw, 44px); font-weight: 800; line-height: 1; letter-spacing: -0.05em; text-wrap: balance; }
.hint { margin: 0; font-size: 15px; font-weight: 600; opacity: 0.7; }
.result { min-height: 1.3em; margin: 14px 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }

/* The board: five cards in a column */
.board-wrap { display: flex; flex-direction: column; gap: 8px; }
.end { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: -0.01em; opacity: 0.65; }
.end.top::before { content: "↑ "; }
.end.bottom::before { content: "↓ "; }
.board { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.it {
  --edge: var(--deep);
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 68px;
  padding: 0 10px 0 14px;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 1px 0 var(--edge), 0 1px 2px rgba(10, 10, 11, 0.06), 0 10px 20px -14px rgba(10, 10, 11, 0.4);
  touch-action: none;
  user-select: none;
  cursor: grab;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms ease, background-color 250ms ease;
}
.it.dragging { z-index: 5; cursor: grabbing; transition: box-shadow 160ms ease; box-shadow: 0 1px 0 var(--edge), 0 30px 44px -16px rgba(10, 10, 11, 0.45); scale: 1.03; }
.it.still { transition: none; }
.grip { flex: none; width: 14px; height: 22px; background: radial-gradient(circle, rgba(10, 10, 11, 0.3) 1.6px, transparent 2px) 0 0 / 7px 7px; }
.it-name { flex: 1; min-width: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-val { font-size: 14px; font-weight: 700; color: var(--ink-2); white-space: nowrap; opacity: 0; transition: opacity 300ms ease; }
.moves { display: flex; gap: 4px; }
.moves button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: #FFF3D1; color: var(--ink); font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
.moves button:hover { background: #FFE7A3; }
.moves button:disabled { opacity: 0.3; cursor: default; }
.locked .it { cursor: default; }
.locked .moves { display: none; }
.locked .it-val, .demo .it-val { opacity: 1; }
.rank { position: absolute; left: -12px; top: 50%; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--ink); color: #FFFFFF; font-size: 13px; font-weight: 800; opacity: 0; transform: scale(0.5); transition: opacity 250ms ease, transform 300ms cubic-bezier(.2,.9,.3,1.5); }
.locked .rank { opacity: 1; transform: none; }
.it.right { --edge: #11803A; background: #DDF5E7; }
.it.right .rank { background: #16A34A; }
.it.wrong { --edge: #E9B5AE; background: #FDE7E3; }
.it.wrong .rank { background: #E0412F; }
.demo { pointer-events: none; }
.demo .it { cursor: default; }

/* Result */
.big { margin: 4px 0 0; display: flex; align-items: baseline; gap: 8px; font-weight: 800; line-height: 0.85; letter-spacing: -0.07em; font-variant-numeric: tabular-nums; }
.big span { font-size: 140px; }
.big small { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; opacity: 0.6; }
.line { margin: 16px 0 18px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.recap { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.recap li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.6); }
.recap b { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.recap small { display: block; font-size: 13px; font-weight: 600; opacity: 0.65; }
.squares { display: flex; gap: 4px; }
.squares i { width: 18px; height: 18px; border-radius: 5px; background: #E0412F; }
.squares i.ok { background: #16A34A; }
.pts { min-width: 44px; text-align: right; font-size: 18px; font-weight: 800; }

/* Panels arrive in sequence */
@media (prefers-reduced-motion: no-preference) {
  .panel.enter .side > *, .panel.enter .board-wrap, .panel.enter > .board, .panel.enter .recap li { animation: rise 600ms cubic-bezier(.2,.8,.2,1) both; }
  .panel.enter .side > :nth-child(2) { animation-delay: 60ms; }
  .panel.enter .side > :nth-child(3) { animation-delay: 120ms; }
  .panel.enter .side > :nth-child(n+4) { animation-delay: 180ms; }
  .panel.enter .board-wrap, .panel.enter > .board { animation-delay: 140ms; }
  .panel.enter .recap li:nth-child(2) { animation-delay: 60ms; }
  .panel.enter .recap li:nth-child(3) { animation-delay: 120ms; }
  .panel.enter .recap li:nth-child(4) { animation-delay: 180ms; }
  .panel.enter .recap li:nth-child(5) { animation-delay: 240ms; }
}
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }

/* Phones: one column */
@media (max-width: 760px) {
  .panel { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; padding: 22px 18px 20px; overflow-y: auto; }
  .title { font-size: 84px; }
  .lede { font-size: 17px; }
  .hud { margin-bottom: 14px; justify-content: space-between; align-items: flex-start; }
  .score { align-items: flex-end; }
  .board-wrap { min-width: 0; }
  .score span { font-size: 44px; }
  .ask { font-size: 26px; margin-bottom: 6px; }
  #play .kind { display: none; }
  .hint { font-size: 13px; margin-top: -8px; }
  .result { font-size: 18px; margin: 8px 0 0; }
  #play .side { display: contents; }
  #play .hud { order: 0; } #play .kind { order: 1; } #play .ask { order: 2; } #play .hint { order: 2; } #play .board-wrap { order: 3; } #play .result { order: 4; } #play .actions { order: 5; }
  #play .actions { margin-top: 0; }
  .actions .pill { flex: 1; }
  .it { height: 54px; }
  .it-name { font-size: 17px; }
  #intro .board { display: none; }
  .big span { font-size: 96px; }
}

/* The start screen's example: a solved sort, each card ticked */
.demo .it { --edge: #11803A; background: #DDF5E7; cursor: default; }
.demo .rank { opacity: 1; transform: none; background: #16A34A; }
/* Before the reveal the values take no space, so names have room on phones */
.board:not(.locked) .it-val { display: none; }
@media (max-width: 760px) { .locked .it-name { font-size: 15px; } .it-val { font-size: 12px; } }

/* Short phones (most of them once the browser's bars take their share): slimmer cards and less space between things,
   so the five cards and the button fit without scrolling */
@media (max-width: 760px) and (max-height: 780px) {
  .panel { gap: 10px; padding: 14px 16px 14px; }
  .title { font-size: 64px; }
  .hud { margin-bottom: 6px; }
  .ask { font-size: 24px; }
  .board { gap: 6px; }
  .it { height: 44px; }
  .result { margin-top: 4px; }
}
/* Very short phones (Android with bigger system text or the three-button bar). The empty result line takes no room
   until there is a result, and then the hint steps aside for it. */
@media (max-width: 760px) and (max-height: 660px) {
  #play.panel { gap: 8px; padding-top: 12px; }
  #play .hud { margin-bottom: 0; }
  .legs { gap: 6px; padding-top: 4px; }
  .score span { font-size: 34px; }
  .score small { font-size: 12px; }
  #play .ask { margin-top: 0; font-size: 22px; }
  .board-wrap { gap: 4px; }
  .end { font-size: 12px; }
  .board { gap: 5px; }
  .it { height: 40px; }
  #play .result:empty { display: none; }
  #play .result { margin: 0; font-size: 17px; }
  #play:has(.board.locked) .hint { display: none; }
}
@media (max-width: 760px) and (max-height: 580px) {
  #play.panel { padding: 10px 14px 12px; }
  #play .ask { font-size: 20px; }
  .board { gap: 4px; }
  .it { height: 34px; }
  .it-name { font-size: 16px; }
}
/* If the text is still too big (very large system text), the cards scroll but the button stays on screen */
@media (max-width: 760px) {
  #play .actions { position: sticky; bottom: 0; z-index: 3; }
}