/* Word Rip — Sandbox prototype styles. Everything namespaced .wr-*.
   Board colours are the classic Wordle set (green #538d4e, yellow #b59f3b,
   gray #3a3a3c on the site's dark panels) so the game reads instantly. */
.wr-badge {
  font-size: 11px; letter-spacing: .08em; vertical-align: middle;
  background: #b59f3b; color: #121213; border-radius: 999px; padding: 2px 8px;
}
/* Balance centred on its own line, status centred on the line below
   (Franklin, 2026-10-26); the spin-ticket counter was removed by request. */
.wr-topbar { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 8px; text-align: center; }
.wr-balance { font-size: 15px; }
.wr-msg { min-height: 20px; margin: 8px 0 0; font-weight: 600; }
/* One centred column: header, game and tools panels all share the same
   max-width so the page reads as a single balanced stack (Franklin,
   2026-10-26 — the game panel used to sit narrower than its neighbours). */
.wr-main, .wr-tools { max-width: 700px; margin-inline: auto; }
/* A slight gap between the game box and the Payouts box below it
   (Franklin, 2026-10-26). */
.wr-tools { margin-top: 10px; }
.wr-main { display: flex; justify-content: center; }
.wr-game { flex: 1 1 auto; width: 100%; position: relative; display: flex; flex-direction: column; align-items: center; }
/* Back button INSIDE the game box, pinned to its top-left corner so the
   box itself never moves (Franklin, 2026-10-26; the other Arcade games
   put theirs in a row above the panel). On narrow screens the title
   gets symmetric side padding so it stays centred clear of the button. */
.wr-back { position: absolute; top: 10px; left: 10px; z-index: 6; padding: 4px 10px; font-size: 13px; }
@media (max-width: 560px) { .wr-head-in h2 { padding-inline: 104px; } }
/* Header block INSIDE the single game panel (merged 2026-10-26), with a
   hairline under it; the play zone wraps board + keyboard so the toast
   floats over the board; actions sit below the game, hairline above. */
.wr-head-in { width: 100%; border-bottom: 1px solid rgba(140, 160, 220, .16); padding-bottom: 12px; margin-bottom: 16px; }
/* Title centred to match the centred balance/status lines (Franklin, 2026-10-26). */
.wr-head-in h2 { text-align: center; }
.wr-play { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.wr-actions { width: 100%; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 16px; border-top: 1px solid rgba(140, 160, 220, .16); padding-top: 14px; }
/* Pre-round cover: a dark translucent sheet over the board + keyboard
   until a round begins (Franklin, 2026-10-26), start button centred on
   it; the finished board stays dimly visible beneath it. It fades in on
   the settle repaint, never over a flipping row. The toast (z-index 9)
   floats above it so physical-key nudges still show. */
.wr-cover {
  position: absolute; inset: 0; z-index: 8; display: flex;
  align-items: center; justify-content: center;
  background: rgba(10, 13, 24, .62); animation: wrcoverin .3s ease-out;
}
@keyframes wrcoverin { from { opacity: 0; } }
.wr-cover-btn { font-size: 1.05rem; padding: 12px 22px; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
/* Transient error toast, Wordle-style: a light pill over the board top
   that fades in, lingers ~a second, and fades out. */
.wr-toast {
  position: absolute; top: 10px; left: 50%; z-index: 9; pointer-events: none;
  transform: translateX(-50%) translateY(-4px); opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  background: #e8ecf6; color: #121213; font-size: 14px; font-weight: 700;
  padding: 8px 14px; border-radius: 6px; white-space: nowrap;
}
.wr-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Win + stats pop-ups (rendered by the site's shared modal) */
.wr-share-grid { font-size: 22px; line-height: 1.3; letter-spacing: 3px; margin: 8px 0; }
.wr-prize-big { font-size: 18px; }
.wr-board { display: grid; grid-template-rows: repeat(6, 1fr); gap: 5px; margin: 6px 0 14px; }
.wr-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.wr-tile {
  width: min(58px, 15vw); height: min(58px, 15vw);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; text-transform: uppercase;
  border: 2px solid #3a3a3c; color: #e8ecf6; user-select: none;
}
.wr-tile.filled { border-color: #565f7e; }
.wr-tile.pop { animation: wrpop .12s ease-in-out; }
.wr-tile.wr-t-green { background: #538d4e; border-color: #538d4e; }
.wr-tile.wr-t-yellow { background: #b59f3b; border-color: #b59f3b; }
.wr-tile.wr-t-gray { background: #3a3a3c; border-color: #3a3a3c; }
.wr-tile.flip { animation: wrflip .45s ease both; }
.wr-tile.flip.wr-t-green { animation-name: wrflip-green; }
.wr-tile.flip.wr-t-yellow { animation-name: wrflip-yellow; }
.wr-tile.flip.wr-t-gray { animation-name: wrflip-gray; }
@keyframes wrflip { 0% { transform: rotateX(0); } 50% { transform: rotateX(-90deg); } 100% { transform: rotateX(0); } }
/* The colour lands at the flip's midpoint, while the tile is edge-on:
   before that, the keyframes pin the un-scored look (transparent fill,
   filled-tile border), so a tile's result can never show early
   (Franklin, 2026-10-26). */
@keyframes wrflip-green {
  0% { transform: rotateX(0); background: transparent; border-color: #565f7e; }
  49% { background: transparent; border-color: #565f7e; }
  50% { transform: rotateX(-90deg); background: #538d4e; border-color: #538d4e; }
  100% { transform: rotateX(0); background: #538d4e; border-color: #538d4e; }
}
@keyframes wrflip-yellow {
  0% { transform: rotateX(0); background: transparent; border-color: #565f7e; }
  49% { background: transparent; border-color: #565f7e; }
  50% { transform: rotateX(-90deg); background: #b59f3b; border-color: #b59f3b; }
  100% { transform: rotateX(0); background: #b59f3b; border-color: #b59f3b; }
}
@keyframes wrflip-gray {
  0% { transform: rotateX(0); background: transparent; border-color: #565f7e; }
  49% { background: transparent; border-color: #565f7e; }
  50% { transform: rotateX(-90deg); background: #3a3a3c; border-color: #3a3a3c; }
  100% { transform: rotateX(0); background: #3a3a3c; border-color: #3a3a3c; }
}
@keyframes wrpop { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
.wr-row.wr-shake { animation: wrshake .4s ease; }
@keyframes wrshake {
  0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}
.wr-kb { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 480px; }
.wr-kb-row { display: flex; gap: 5px; justify-content: center; }
.wr-key {
  flex: 1 1 0; max-width: 42px; height: 52px; border: 0; border-radius: 6px;
  background: #818384; color: #fff; font-size: 14px; font-weight: 700;
  cursor: pointer; text-transform: uppercase; padding: 0;
}
.wr-key.wr-key-wide { flex: 1.6 1 0; max-width: 68px; font-size: 12px; }
.wr-key.wr-t-green { background: #538d4e; }
.wr-key.wr-t-yellow { background: #b59f3b; }
.wr-key.wr-t-gray { background: #3a3a3c; }
.wr-key:active { filter: brightness(1.2); }
.wr-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; margin-bottom: 10px; }
.wr-stat-grid b { display: block; font-size: 22px; }
.wr-stat-grid span { font-size: 11px; color: #8e98b3; }
.wr-dist-row { display: flex; align-items: center; gap: 7px; margin: 3px 0; font-size: 13px; }
.wr-dist-bar { background: #565f7e; color: #fff; text-align: right; padding: 1px 6px; font-size: 12px; min-width: 22px; }
.wr-details { margin-top: 6px; }
.wr-details summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.wr-table { border-collapse: collapse; margin: 6px 0; }
.wr-table td { padding: 3px 14px 3px 0; font-size: 14px; }
.wr-tune-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.wr-tune-row input { text-transform: uppercase; }
@media (max-width: 560px) {
  .wr-key { height: 48px; font-size: 13px; }
}