/* Wordrush Quick -- the few things the long game's stylesheet does not cover.
 *
 * Everything that makes a tile a tile, a rack a rack and a sheet a sheet is
 * `wordrush.css`; this adds the ladder: a board seven wide and nine tall,
 * its greyed-out squares, the rails that wait for the bonus round, the
 * arrows that say which way a word goes, and the gold the bonus wears.
 */

.quick{--void:#dcd7cc}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .quick{--void:#1a1c20}
}

/* ---- the board: seven by nine ----
   Exactly as tall as the long game's square board, so the rack and the
   buttons sit where they do there, and seven ninths as wide -- which makes
   a square the same size as one of its squares. Sizes inside are container
   units of the width, so a square here is 9/7 as many of them. */
.quick .board{
  grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(9,1fr);
  aspect-ratio:7/9;width:calc(min(100%, max(280px, 100svh - 380px)) * 7 / 9);
}
@media (max-height:640px){
  .quick .board{width:calc(min(100%, max(280px, 100svh - 330px)) * 7 / 9)}
}
.quick .sq,.quick .tile{border-radius:2.8cqw}
.quick .sq{transition:box-shadow .12s, opacity .35s ease}
.quick .sq .m{font-size:4.2cqw}
.quick .tile{font-size:8.2cqw}
.quick .tile .v{font-size:3.5cqw}
.quick .sq.cursor::after{border-width:2.8cqw}
.quick .tile.new{box-shadow:inset 0 0 0 .7cqw var(--accent),inset 0 -3px 0 var(--tile-edge),var(--lift)}
.quick .tile.blank{box-shadow:inset 0 0 0 .7cqw var(--tile-edge),inset 0 -3px 0 var(--tile-edge),0 1px 2px rgba(0,0,0,.12)}
.quick .tile.blank.new{box-shadow:inset 0 0 0 .7cqw var(--accent),inset 0 -3px 0 var(--tile-edge),var(--lift)}
.quick .tile.bad{box-shadow:inset 0 0 0 .7cqw var(--warn)}

/* No square here: the gaps between the rails, greyed out. */
.quick .sq.void{background:var(--void);box-shadow:none;cursor:default;pointer-events:none}
/* A rail before the bonus: there, with its doubles showing, but not yet. */
.quick .sq.shut{opacity:.45;cursor:default;
  background-image:repeating-linear-gradient(135deg,transparent 0 3px,rgba(0,0,0,.07) 3px 6px)}
/* This rack's rung: the rungs go top to bottom, and the one that is open
   now is ringed, faintly, so the eye goes to it. */
.quick .sq.next:not(.cursor){box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent)}
/* Which way the word goes: an arrow where one starts. */
.quick .sq.lane::before{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:6.4cqw;font-weight:700;line-height:1;color:var(--accent-text);opacity:.5}
.quick .sq.lane-across::before{content:"\2192"}
.quick .sq.lane-down::before{content:"\2193"}
.quick .sq.lane.cursor::before{display:none}
/* On a double the label keeps the middle and the arrow sits under it. */
.quick .sq.lane.D::before{align-items:flex-end;padding-bottom:6%;font-size:4.6cqw}
.quick .sq.lane.D .m{transform:translateY(-30%)}
/* The direction button says which way the phase runs; it cannot turn. */
.quick .dir:disabled{opacity:.8}
.quick .dir span{white-space:nowrap}
.quick .dir svg{flex:none}

/* ---- the bonus wears gold ---- */
.app.quick.bonus{--accent:#b8862a;--accent-ink:#fff;--accent-text:#8a6212;--you:#fbf4e4}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .app.quick.bonus{--accent:#d9a83f;--accent-ink:#1d1708;
    --accent-text:#e9c46a;--you:#2a2416}
}

/* ---- the strip of rounds ----
   Five for the racks, then three dashed ones for the bonus rails, set a
   little apart. */
.quick .rounds{display:flex;gap:4px;justify-content:center}
.quick .rounds li{flex:1 1 0;min-width:0;max-width:62px}
.quick .rounds li.skip{background:var(--pill-pass);border-color:var(--pill-pass)}
.quick .rounds li.bonus{border-style:dashed;max-width:50px}
.quick .rounds li.bonus.first{margin-left:10px}
.quick .rounds li.bonus.now{border-style:solid;border-color:var(--gold);color:var(--gold);
  box-shadow:inset 0 0 0 1px var(--gold)}
.quick .rounds li.bonus.done{border-style:solid;background:var(--gold);border-color:var(--gold);color:#fff}
.quick .rounds li.bonus.part{border-style:solid;border-color:var(--gold);color:var(--gold)}
.quick .rounds li.bonus.shut{opacity:.4}

/* ---- the results sheet ---- */
.ladderoffer{margin:10px 0 14px;padding:12px 14px;border-radius:12px;text-align:left;
  background:linear-gradient(160deg,#1d2b53,#2c3f75);color:#fff}
.ladderoffer p{margin:0 0 10px;font-size:13.5px;line-height:1.45}
.ladderoffer b{color:#f2c230}
.ladderoffer button{width:100%;padding:11px 16px;font-weight:700;border-radius:10px;
  background:#f2c230;color:#1d2b53;border:none}
.bonusline{margin:8px 0 0;font-size:13px;font-weight:700;color:var(--gold)}
.bonusline.off{color:var(--wr-muted);font-weight:600}
.grid span.p{background:transparent;box-shadow:inset 0 0 0 2px var(--gold)}
.grid span.gap{margin-left:10px}
.miniladder{display:inline-grid;grid-template-columns:repeat(7,22px);gap:3px;margin:4px 0 6px}
.miniladder span{width:22px;height:22px;border-radius:4px;
  background:linear-gradient(180deg,var(--tile-hi),var(--tile));color:var(--tile-ink);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;
  box-shadow:inset 0 -2px 0 var(--tile-edge)}
.miniladder span.v{background:none;box-shadow:none}
.miniladder span.rl{background:var(--gold);color:#fff;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.legend i.void{background:var(--void)}