/* Improbable Levels: the daily game's lime field and navy panel (../improbable.css), with your pick beside the result,
   a palette to change the pick, and a level select of square tiles. */

.field h1 { font-size: clamp(36px, 8vw, 64px); margin-top: 16px; }
.today { margin-top: 10px; }

/* What came up: one tile per pick, sized by how many a level has. Several picks: each call written under its tile. */
.out { --w: clamp(84px, 13vw, 120px); display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: flex-start; margin-top: 14px; }
.field[data-slots="2"] .out { --w: clamp(64px, 9vw, 96px); }
.field[data-slots="3"] .out { --w: clamp(52px, 7.5vw, 84px); }
.field[data-slots="many"] .out { --w: clamp(24px, 3.4vw, 34px); max-width: calc(10 * (var(--w) + 6px)); }
.odds-now { margin-left: 8px; opacity: 0.75; }
.col { display: grid; justify-items: center; gap: 4px; }
/* Several picks: which one each tile is (Die 1 …) above it, and your call under it. After a roll the call turns
   orange if it matched, or is struck through if it didn't. */
.slot-name { font: 800 11px var(--font); letter-spacing: 0.08em; text-transform: uppercase; }
.call { padding: 3px 7px; border: 2px solid var(--ink); }
.call.yes { background: var(--orange); }
.call.no { opacity: 0.55; text-decoration: line-through; text-decoration-thickness: 2px; }
.call.no svg { opacity: 0.8; }
/* Spins and cards: the call under each tile is a button; the one the palette is setting is filled. */
button.call { background: transparent; color: var(--ink); font: 800 14px var(--font); display: inline-flex; align-items: center; gap: 2px; cursor: pointer; min-width: 40px; justify-content: center; }
button.call.cur { background: var(--ink); color: #fff; opacity: 1; text-decoration: none; }
button.call.cur svg { color: #fff; }
button.call.yes { background: var(--orange); color: var(--ink); }
/* Coins: the flips and their call buttons share one 10-across grid, so each call sits right under its coin. */
.field[data-mode="toggle"] .out { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); max-width: 520px; justify-items: center; gap: 6px 5px; }
.call { display: inline-flex; align-items: center; gap: 2px; font: 800 14px var(--font); line-height: 1; font-variant-numeric: tabular-nums; min-height: 16px; }
.call svg { width: 13px; display: block; }
.field[data-slots="many"] .call { font-size: 12px; }
.t.down.next { outline: 3px solid var(--orange); outline-offset: 2px; }

/* One tile: a card, a coin, a die, a roulette pocket or a total. Face down before the first try. */
.t { position: relative; display: grid; place-items: center; width: var(--w); height: calc(var(--w) * 1.4); background: #fff; color: var(--ink); }
.t.coin { height: var(--w); border-radius: 50%; }
.t.die { height: var(--w); background: transparent; }
.t.pocket, .t.sum2, .t.sum3 { height: var(--w); }
.t.pocket { background: var(--ink); color: #fff; }
.t.pocket.pR { background: var(--red); }
.t.pocket.pG { background: var(--green); }
.t .face { font-size: calc(var(--w) * 0.42); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.t .rank { position: absolute; left: 10%; top: 6%; font-weight: 800; font-size: calc(var(--w) * 0.24); letter-spacing: -0.03em; line-height: 1; }
.t .pip { width: 52%; }
.t.die .pip { width: 100%; }
.t .pip svg { display: block; width: 100%; height: auto; }
/* Face down: a plain navy card, coin, die, pocket or total. The next one you're calling gets an orange ring. */
.t.down { background: var(--ink); }
/* A total that came up: its dice, then the sum. */
.t.sumout { width: auto; height: var(--w); padding: 0; grid-auto-flow: column; gap: 6px; background: transparent; }
.t.sumout .pip { width: calc(var(--w) * 0.6); }
.t.sumout .t.die.down { width: calc(var(--w) * 0.6); height: calc(var(--w) * 0.6); }
.t.sumout b { font-size: calc(var(--w) * 0.5); font-weight: 800; letter-spacing: -0.04em; margin-left: 4px; }
/* What came up matches your pick in that spot: orange edge. All of them (a hit): orange tiles. */
.out .t.match { outline: 4px solid var(--orange); outline-offset: -4px; }
.out .t.die.match, .out .t.sumout.match { outline: 0; color: var(--orange); }
.out .t.coin.match { outline: 0; background: var(--orange); }
/* Every try deals the result in fresh, and the button you tapped flashes orange, so tapping the same pick again
   still shows something happened. */
.out .t.dealt { animation: deal 0.28s var(--ease) both; }
.palette button:disabled { cursor: default; }
.palette button.pressed { animation: press 0.35s var(--ease) both; }
@keyframes press { from { transform: scale(0.9); background: var(--orange); color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .out .t.dealt, .palette button.pressed { animation: none; } }
.field[data-slots="many"] .t .face { font-size: calc(var(--w) * 0.5); }

/* The palette: every value the selected pick can take. */
.palette { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; max-width: 640px; }
.palette .row { display: flex; flex-wrap: wrap; gap: 5px; width: 100%; }
.palette button { min-width: 40px; height: 40px; padding: 0 8px; border: 2px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 800 15px var(--font); font-variant-numeric: tabular-nums; cursor: pointer; display: grid; place-items: center; line-height: 1; }
.palette button svg { width: 22px; display: block; }
.palette button.on { background: var(--ink); color: #fff; }
.palette button.on svg { color: #fff; }
.palette[data-kind="pocket"] button { min-width: 0; width: 40px; padding: 0; border-color: transparent; color: #fff; background: var(--ink); }
.palette[data-kind="pocket"] button.pR { background: var(--red); }
.palette[data-kind="pocket"] button.pG { background: var(--green); }
/* Pockets keep their red, black or green; the picked one gets an ink ring around it. */
.palette[data-kind="pocket"] button.on { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .palette button:not(.on):hover { background: #fff; color: var(--ink); } }
/* Several dice: one row of faces per die, labelled. */
.palette[data-mode="rows"] { display: grid; gap: 6px; }
.prow { display: grid; grid-template-columns: 4.2em 1fr; align-items: center; gap: 8px; }
.prow .row { width: auto; }
/* Several coins: one call button per flip, switching H and T. */
.calls { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; width: 100%; max-width: 520px; }
.calls button { min-width: 0; padding: 0; }
/* Calling a coin: two big buttons. */
.palette[data-kind="coin"][data-mode="single"] { display: grid; grid-template-columns: 1fr 1fr; max-width: 520px; }
.palette[data-kind="coin"][data-mode="single"] button { height: 56px; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; }

.prompt { min-height: 1.5em; margin: 12px 0 0; }
.actions { display: grid; grid-template-columns: 1fr; gap: 6px; max-width: 520px; margin-top: 18px; }
.actions .go[hidden] { display: none; }
.actions .go { margin-top: 0; }
.actions .go:disabled { opacity: 1; background: transparent; color: var(--ink); outline: 2px dashed var(--ink); outline-offset: -2px; }
/* Shown once the level is beaten (it appears with the first hit). */
.after { display: none; grid-template-columns: 2fr 1fr; gap: 8px; max-width: 520px; }
.after.on { display: grid; }
.after .go { margin-top: 8px; }
.after .share { margin-top: 8px; padding: 18px 12px; border: 2px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 800 15px var(--font); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.after [hidden] { display: none; }

/* The level select: five across, square tiles sized from the grid's width (aspect-ratio alone doesn't keep grid items
   square in Safari). Beaten: white, with the tries it took. Open: navy, with its odds. Locked: an outline and a padlock. */
.grid-wrap { container-type: inline-size; max-width: 600px; margin-top: 18px; }
.grid { --tile: calc((100cqw - 4 * 8px) / 5); list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, var(--tile)); grid-auto-rows: var(--tile); gap: 8px; }
.grid li { display: grid; }
.grid button { display: grid; place-content: center; justify-items: center; gap: 2px; padding: 4px; border: 0; border-radius: 0; font-family: var(--font); cursor: pointer; }
.grid b { font-size: calc(var(--tile) * 0.42); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.grid small { font-size: clamp(9px, calc(var(--tile) * 0.13), 13px); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums; }
.grid .won button { background: #fff; color: var(--ink); }
.grid .open button { background: var(--ink); color: #fff; }
.grid .locked { place-items: center; outline: 2px solid rgba(20, 33, 61, 0.35); outline-offset: -2px; color: rgba(20, 33, 61, 0.5); }
.grid .locked span { width: 42%; }
.grid .locked svg { display: block; width: 100%; height: auto; }
@media (hover: hover) { .grid button:hover { background: var(--orange); color: var(--ink); } }
.select h1 { margin-top: 16px; }
.play .up-link { margin-right: 10px; }

@media (max-width: 899px) {
  .playing .field h1 { display: none; }
  .out { --w: 76px; }
  .field[data-slots="2"] .out { --w: 56px; }
  .field[data-slots="3"] .out { --w: 56px; }
  .field[data-slots="many"] .out { --w: 26px; }
  .palette button { min-width: 34px; height: 36px; padding: 0 6px; font-size: 14px; }
  .palette[data-kind="pocket"] button { width: 27px; height: 27px; font-size: 11px; }
  .palette { gap: 4px; margin-top: 10px; }
  /* Playing on a phone: the back link and level number stay (the tabs and title go), the rule tightens up under them. */
  .playing .play .today { margin-top: 12px; }
  .playing .goal { font-size: 26px; }
  .go { padding: 13px 12px; }
  .status { margin-top: 12px; }
  /* All 13 ranks on one line. */
  .palette[data-kind="card"] .ranks button { min-width: 0; width: 22px; padding: 0; font-size: 12px; }
  .palette[data-kind="card"] .ranks { gap: 3px; }
  .actions { margin-top: 12px; }
    .prompt { margin-top: 8px; }
}