/* "Pick a number 1–100" game (tool 'picknumber'). Loaded after wheel.css: reuses its tokens (.lh-app scope),
   buttons, fields, switches, segmented radios and full-screen overlay. Logical properties only (RTL by dir),
   dark mode through the tokens, reduced motion handled by wheel.css (.lh-reduced / prefers-reduced-motion). */

/* ---------- Layout: game column + options column (≥ 1000 px) ---------- */
.lh-pn-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.lh-pn-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lh-pn-side { min-width: 0; }
@media (min-width: 1000px) { .lh-pn-layout { grid-template-columns: minmax(0, 660px) 320px; justify-content: center; align-items: start; gap: 32px; } }
html:not(.js) .lh-pn-js { display: none !important; }

.lh-pn-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.lh-pn-left { margin: 0; font-weight: 800; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.lh-pn-left.is-done { color: var(--lh-success); }
.lh-pn-left.is-err { color: var(--lh-danger); font-weight: 650; font-size: .9375rem; }
.lh-pn-acts { display: inline-flex; gap: 2px; flex: none; }
.lh-pn-acts .lh-btn--sm { min-height: 44px; }
.lh-pn-acts .lh-btn--icon { width: 44px; min-width: 44px; }
.lh-pn-bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--lh-surface-2); }
.lh-pn-bar > span { display: block; inline-size: 0; height: 100%; border-radius: inherit; background: var(--lh-brand); transition: inline-size .3s var(--lh-ease); }

.lh-pn-play { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.lh-pn-rand { flex: 1 1 200px; min-height: 52px; border-radius: 999px; font-size: 1.0625rem; }
.lh-pn-go { display: flex; gap: 6px; flex: 1 1 200px; }
.lh-pn-num.lh-field { flex: 1 1 auto; min-width: 0; min-height: 52px; border-radius: 999px; padding-inline: 18px; font-size: 1.25rem; font-weight: 750; text-align: center; font-variant-numeric: tabular-nums; }
.lh-pn-num[aria-invalid] { border-color: var(--lh-danger); }
.lh-pn-go .lh-btn { min-height: 52px; border-radius: 999px; padding-inline: 20px; }
.lh-pn-hint.is-bad { color: var(--lh-danger); font-weight: 650; }

.lh-pn-turn { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 4px; padding-inline: 14px 4px; border-radius: 999px; border: 2px solid var(--lh-brand); background: var(--lh-brand-soft); }
.lh-pn-turn[hidden] { display: none; }
.lh-pn-turn__t { font-weight: 800; overflow-wrap: anywhere; }
[dir="rtl"] .lh-pn-turn .lh-ic { transform: scaleX(-1); }

/* ---------- The 10 × 10 grid ---------- */
.lh-pn-grid {
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(3px, 1.1cqi, 8px); container-type: inline-size;
  padding: clamp(6px, 1.6vw, 12px); border-radius: 18px; background: var(--lh-surface-2); perspective: 900px;
}
.lh-pn-t {
  display: grid; place-items: center; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: clamp(6px, 1.4cqi, 12px);
  background: var(--lh-surface); color: var(--lh-text); box-shadow: inset 0 -2px 0 rgba(20, 21, 26, .12), 0 1px 2px rgba(20, 21, 26, .08);
  font: inherit; font-size: 1rem; font-size: clamp(.8125rem, 4cqi, 1.75rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
  cursor: pointer; transition: background-color .15s, color .15s, scale .12s var(--lh-ease);
}
.lh-pn-t:hover { background: var(--lh-brand-soft); color: var(--lh-brand-soft-ink); }
.lh-pn-t:active { scale: .94; }
.lh-pn-t:focus-visible { outline: 3px solid var(--lh-focus); outline-offset: 1px; position: relative; z-index: 1; }
.lh-pn-t.is-used { background: transparent; color: var(--lh-muted); box-shadow: inset 0 0 0 1px var(--lh-border); text-decoration: line-through; text-decoration-thickness: 2px; opacity: .7; }
.lh-pn-t.is-used:hover { opacity: 1; }
.lh-pn-t.is-cur { background: var(--lh-brand); color: var(--lh-brand-ink); opacity: 1; text-decoration: none; box-shadow: none; }
.lh-pn-t.is-hop { background: var(--lh-accent); color: #14151A; scale: 1.12; box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .35); }
.lh-pn-t.is-flip { animation: lh-pn-flip .42s var(--lh-ease); }
@keyframes lh-pn-flip { 0% { transform: rotateY(0); } 48% { transform: rotateY(90deg); } 52% { transform: rotateY(-90deg); } 100% { transform: rotateY(0); } }

/* ---------- Options ---------- */
.lh-pn-opts { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 16px; border: 1px solid var(--lh-border); border-radius: 16px; background: var(--lh-surface); box-shadow: var(--lh-shadow-sm); }
.lh-pn-h { margin: 0; color: var(--lh-muted); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
:lang(ar) .lh-pn-h { letter-spacing: 0; font-size: .875rem; }
.lh-pn-o { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.lh-pn-o + .lh-pn-o { padding-block-start: 12px; border-block-start: 1px solid var(--lh-border); }
.lh-pn-o legend { padding: 0; margin-block-end: 8px; }
.lh-pn-cats { display: flex; flex-direction: column; gap: 2px; }
.lh-pn-cat { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-inline: 8px; border-radius: 10px; cursor: pointer; }
.lh-pn-cat:hover { background: var(--lh-surface-2); }
.lh-pn-cat input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--lh-brand); }
.lh-pn-cat__l { flex: 1 1 auto; font-weight: 650; }
.lh-pn-cat .lh-count:empty { display: none; }
.lh-pn-o .lh-field--area { min-height: 80px; }
.lh-pn-pool { margin: 0; color: var(--lh-muted); font-size: .875rem; font-weight: 650; }
.lh-pn-pool:empty { display: none; }
.lh-pn-pool.is-warn { color: var(--lh-warning); }
.lh-pn-nojs { margin: 0; }

/* ---------- Question card ---------- */
.lh-pn-dlg { inline-size: min(760px, 100% - 24px); max-inline-size: none; max-block-size: calc(100dvh - 24px); margin: auto; padding: 0; border: 0; background: transparent; color: var(--lh-text); overflow: visible; }
.lh-pn-dlg::backdrop { background: rgba(14, 15, 19, .62); }
.lh-pn-dlg[open] .lh-pn-card { animation: lh-pn-in .28s var(--lh-ease); }
@keyframes lh-pn-in { 0% { scale: .9; opacity: 0; } 100% { scale: 1; opacity: 1; } }
.lh-pn-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px; max-block-size: calc(100dvh - 24px); overflow: auto;
  padding: 14px clamp(16px, 4vw, 40px) clamp(18px, 4vw, 32px); border-radius: 26px; background: var(--lh-surface);
  border-block-start: 8px solid var(--lh-brand); box-shadow: var(--lh-shadow-lg); text-align: center;
}
.lh-pn-card__top { display: flex; align-items: center; gap: 8px; inline-size: 100%; }
.lh-pn-badge { margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--lh-brand); color: var(--lh-brand-ink); font-size: 1.125rem; font-weight: 850; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lh-pn-tag { flex: 1 1 auto; min-width: 0; color: var(--lh-muted); font-size: .875rem; font-weight: 750; text-align: start; overflow-wrap: anywhere; }
.lh-pn-x { flex: none; }
.lh-pn-for { margin: 0; padding: 4px 14px; border-radius: 999px; background: var(--lh-brand-soft); color: var(--lh-brand-soft-ink); font-weight: 800; overflow-wrap: anywhere; }
.lh-pn-for[hidden] { display: none; }
.lh-pn-q { margin: 8px 0; font-size: clamp(1.375rem, 5.6vw, 2.5rem); font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; text-wrap: balance; unicode-bidi: plaintext; }
.lh-pn-q.is-long { font-size: clamp(1.25rem, 4.6vw, 2rem); }
:lang(ar) .lh-pn-q { line-height: 1.55; }
.lh-pn-clock { margin: 0; font-size: clamp(2rem, 9vw, 3.5rem); font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums; color: var(--lh-brand-soft-ink); }
.lh-pn-clock[hidden] { display: none; }
.lh-pn-clock.is-up { color: var(--lh-danger); font-size: clamp(1.5rem, 6vw, 2.25rem); animation: lh-pn-pulse .5s 2; }
@keyframes lh-pn-pulse { 50% { scale: 1.08; } }
.lh-pn-ans { display: flex; flex-direction: column; align-items: center; gap: 2px; inline-size: 100%; max-inline-size: 480px; padding: 12px 16px 14px; border: 2px dashed color-mix(in srgb, var(--lh-brand) 45%, transparent); border-radius: 18px; background: var(--lh-brand-soft); }
.lh-pn-ans[hidden] { display: none; }
.lh-pn-ans__k { color: var(--lh-brand-soft-ink); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
:lang(ar) .lh-pn-ans__k { letter-spacing: 0; font-size: .875rem; }
.lh-pn-ans__t { margin: 0; font-size: clamp(1.1875rem, 4.8vw, 1.75rem); font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.lh-pn-show[hidden] { display: none; }
.lh-pn-show, .lh-pn-next { inline-size: 100%; max-inline-size: 340px; }

/* ---------- Full screen: the grid fills the height, options hidden; bigger question card ---------- */
.lh-pn.lh-app--fs { display: block; overflow: auto; padding: 12px clamp(12px, 3vw, 32px); }
.lh-pn.lh-app--fs .lh-pn-layout { display: block; max-inline-size: min(100%, calc(100dvh - 230px)); margin: auto; }
.lh-pn.lh-app--fs .lh-pn-side, .lh-pn.lh-app--fs .lh-pn-hint, .lh-pn.lh-app--fs #lh-pn-fs, .lh-pn.lh-app--fs .lh-pn-acts { display: none !important; }
.lh-pn.lh-app--fs .lh-pn-top { padding-inline-end: 160px; }
.lh-fs .lh-pn-dlg { inline-size: min(1100px, 100% - 32px); }
.lh-fs .lh-pn-q { font-size: clamp(1.75rem, 4.6vw, 3.75rem); }
.lh-fs .lh-pn-q.is-long { font-size: clamp(1.5rem, 3.8vw, 3rem); }

/* ---------- Reduced motion: no flip, no pop (wheel.css shortens the rest) ---------- */
.lh-reduced .lh-pn-t.is-flip, .lh-reduced .lh-pn-dlg[open] .lh-pn-card { animation: none; }
@media (prefers-reduced-motion: reduce) { .lh-pn-t.is-flip, .lh-pn-dlg[open] .lh-pn-card, .lh-pn-clock.is-up { animation: none; } }
@media print { .lh-pn-side, .lh-pn-play, .lh-pn-acts, .lh-pn-hint { display: none !important; } }