/* Hidden Word: what only the daily word puzzle has. The rest comes from /rooms/room.css. */

/* the keyboard, at the foot of the screen; the status line sits above it */
.wl-keys { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 3;
  width: min(500px, calc(100vw - 12px)); display: grid; gap: 7px; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.wl-keys[hidden] { display: none; }
.wl-krow { display: flex; gap: 6px; justify-content: center; }
.wl-krow:nth-child(4) { padding: 0 8%; }
/* the key to the colours, above the keys */
.wl-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; font: 500 12px/1.2 var(--font); color: rgba(246,236,216,.85); text-shadow: 0 1px 2px #000; }
.wl-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.wl-legend i { width: 13px; height: 13px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.wl-legend i.m2 { background: var(--hit); }
.wl-legend i.m1 { background: var(--near); }
.wl-legend i.m0 { background: var(--miss); }
/* the keys: the club's own, rounded brass-edged buttons on dark walnut */
.wl-key { flex: 1 1 0; min-width: 0; height: 52px; border: 1px solid rgba(217,178,107,.28); border-radius: 11px; padding: 0; cursor: pointer;
  font: 600 16px/1 var(--gu-serif); color: #f6ecd8; background: linear-gradient(180deg, rgba(78,64,52,.95), rgba(52,42,34,.95)); box-shadow: 0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,240,210,.14);
  transition: background-color .25s, transform .06s; }
.wl-key.wide { flex: 1.55 1 0; font: 700 11px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.wl-key:active { transform: translateY(1px); }
.wl-key:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.wl-key.m2 { background: var(--hit); border-color: transparent; }
.wl-key.m1 { background: var(--near); border-color: transparent; }
.wl-key.m0 { background: var(--miss); border-color: transparent; color: rgba(255,255,255,.55); }
#hud .dock-wrap { bottom: calc(var(--wlk, 0px) + 16px + env(safe-area-inset-bottom, 0px)); }
@media (max-height: 700px) { .wl-key { height: 44px; } .wl-keys { gap: 6px; } }
@media (max-height: 560px) { .wl-legend { font-size: 11px; } .wl-key { height: 38px; font-size: 13px; } .wl-keys { gap: 4px; width: min(440px, calc(100vw - 12px)); } }

/* little grids of coloured squares (lobby, result card) */
.wl-mini { display: inline-grid; gap: 3px; }
.wl-mini div { display: flex; gap: 3px; }
.wl-mini i { width: 14px; height: 14px; border-radius: 3px; background: var(--miss); }
.wl-mini i.m1 { background: var(--near); }
.wl-mini i.m2 { background: var(--hit); }

/* the lobby: today's puzzle */
.wl-lobby { display: grid; gap: 14px; }
.wl-today { display: grid; gap: 12px; padding: 14px 16px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid rgba(217,178,107,.2); }
.wl-today small { display: block; color: var(--gold); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.wl-today strong { display: block; font: 400 34px/1.1 var(--gu-serif); color: #f6ecd8; margin: 4px 0; }
.wl-today span { color: var(--mute); font-size: 13px; }
.wl-today .row { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.wl-today.done { grid-template-columns: 1fr auto; align-items: center; }
.wl-today.done .row, .wl-today.done .wl-next { grid-column: 1 / -1; }
.wl-next { margin: 0; color: var(--mute); font-size: 13px; }
.wl-next b { color: var(--gold-2); font-variant-numeric: tabular-nums; font-weight: 600; }
.wl-prefs { display: grid; gap: 8px; }
.wl-prefs label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.wl-prefs input { margin-top: 3px; accent-color: var(--gold); width: 16px; height: 16px; }
.wl-prefs b { display: block; font-weight: 600; font-size: 14px; }
.wl-prefs small { color: var(--mute); font-size: 12px; }
.wl-record { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.wl-record div { padding: 8px 4px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); }
.wl-record strong { display: block; font: 400 26px/1.1 var(--gu-serif); color: var(--gold-2); }
.wl-record span { font-size: 11px; color: var(--mute); }

/* the guess distribution */
.wl-dist { display: grid; gap: 4px; }
.wl-dist small { color: var(--mute); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.wl-dist .wl-bar { display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: nowrap; }
.wl-dist .wl-bar span { width: 12px; font-size: 13px; color: var(--mute); text-align: center; }
.wl-dist .wl-bar i { display: block; font-style: normal; text-align: right; padding: 2px 7px; min-width: 22px; border-radius: 3px; background: #4a4440; color: #fff; font-size: 12px; font-weight: 700; }
.wl-dist .wl-bar.mine i { background: var(--hit, #2f5da8); }
.wl-dist .wl-bar.lost i { background: #5b2a24; }
.wl-dist.big .wl-bar i { padding: 4px 9px; font-size: 13px; }
.wl-dist.big .wl-bar i { background: linear-gradient(90deg, #3f62a8, #7a96d0); }
.wl-dist.big .wl-bar.lost i { background: #6a3229; }

/* the result card */
.wl-end { display: grid; gap: 14px; margin: 14px 0 6px; justify-items: stretch; }
.wl-end .wl-mini { justify-self: center; }
.wl-share { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wl-share .go { margin: 0; }
.over .medal { font-variant-numeric: tabular-nums; }

/* the shop's swatches */
.swatch-tiles, .swatch-marks { display: flex; gap: 6px; align-items: center; justify-content: center; height: 100%; min-height: 90px; background: #0d1210; }
.swatch-tiles i, .swatch-marks i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 5px; font: 700 18px/1 var(--font); font-style: normal; }
.swatch-tiles i { background: var(--tile); color: var(--ink); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.swatch-tiles.metal i { background: linear-gradient(135deg, #fff6 0, transparent 40%), var(--tile); }
.swatch-marks i { color: #fff; }
.swatch-marks .m2 { background: var(--hit); }
.swatch-marks .m1 { background: var(--near); }
.swatch-marks .m0 { background: var(--miss); }
.swatch-scene { min-height: 90px; height: 100%; background: linear-gradient(var(--wall) 0 35%, var(--desk) 35%); display: grid; place-items: center; }
.swatch-scene i { width: 64px; height: 40px; border-radius: 6px; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
@media (max-width: 520px) { .wl-record strong { font-size: 21px; } .wl-today strong { font-size: 28px; } }

/* the ladder in the lobby (as Word Wheel's) */
.chapters { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.chapters li { padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.06); display: grid; gap: 4px; }
.chapters li strong { font: 400 17px var(--gu-serif); color: #f6ecd8; }
.chapters li span { font-size: 11px; color: var(--mute); }
.chapters li.here { border-color: rgba(217,178,107,.55); }
.chapters li.later { opacity: .5; }
.chapters li.done strong::after { content: ' ✓'; color: var(--gold); }

.ladder .wl-prefs { margin: 2px 0; }