/* דבורת האיות — tokens and components.
   Palettes come straight from the design file: `gold` for light, `night` for
   dark. Token names match the design's (--gr ground, --pn panel, --ac accent,
   --acd accent-deep) so the mapping stays obvious. */

:root {
  --gr: #f3f2f2;
  --pn: #e8e6e2;
  --tile: #fbfaf9;
  --edge: #dbd8d3;
  --soft: #eae8e4;
  --ink: #201f1d;
  --mut: rgba(32, 31, 29, .5);
  --ac: #b68235;
  --ac2: #fff3e4;
  --ac3: #ffe3bf;
  --acd: #5a3b0a;
  --dark: #191614;
  --panel-shadow: rgba(0, 0, 0, .07);
  --word-shadow: rgba(0, 0, 0, .08);
  --toast-shadow: rgba(0, 0, 0, .1);
  --halo: rgba(0, 0, 0, .22);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --gr: #1a1a1c;
    --pn: #121214;
    --tile: #232326;
    --edge: #33333a;
    --soft: #26262b;
    --ink: #edebe7;
    --mut: rgba(237, 235, 231, .5);
    --ac: #d9a441;
    --ac2: #2f2818;
    --ac3: #41371f;
    --acd: #f2d9a2;
    --dark: #0d0d0f;
    --panel-shadow: rgba(0, 0, 0, .4);
    --word-shadow: rgba(0, 0, 0, .45);
    --toast-shadow: rgba(0, 0, 0, .5);
    --halo: rgba(217, 164, 65, .3);
    color-scheme: dark;
  }
}

:root {
  /* The honeycomb scales with the viewport; everything else is derived from
     the tile width so the cluster keeps the design's proportions. */
  --tile-w: clamp(58px, 21.4vw, 86px);
  --tile-h: calc(var(--tile-w) * 96 / 86);
  --tile-gap: calc(var(--tile-w) * 8 / 86);
  --tile-overlap: calc(var(--tile-h) * -23 / 96);
  --font: Rubik, -apple-system, "Segoe UI", Roboto, "Noto Sans Hebrew", Arial, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

/* Several components set `display`, which would otherwise beat the UA rule for
   [hidden] and leak hidden panels — notably the staged hint cards. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: var(--font);
  background: var(--gr);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

button {
  font: inherit;
  color: inherit;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
::selection { background: var(--ac3); color: var(--acd); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── app frame ───────────────────────────────────────────────────────── */

.app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-t);
  padding-bottom: var(--safe-b);
  background: var(--gr);
  overflow: hidden;
}

.main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* The play column never scrolls — only the found-words panel does. It takes
   whatever the panel leaves, so the slack becomes breathing room around the
   honeycomb instead of dead space under the word list. */
.stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--gr);
  padding-bottom: 10px;
  position: relative;
  z-index: 2;
}

/* ── header ──────────────────────────────────────────────────────────── */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.brand-mark { flex: none; }

.brand-name {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}

.chip {
  padding: 8px 13px;
  border-radius: 11px;
  background: var(--soft);
  color: var(--acd);
  white-space: nowrap;
}

.chip--icon {
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mut);
}

@media (hover: hover) {
  .chip:hover { background: var(--ac2); }
}

/* Four actions plus the wordmark is tight on a 360px phone. */
@media (max-width: 380px) {
  .header { padding-inline: 12px; gap: 6px; }
  .header-actions { gap: 5px; }
  .chip { padding: 8px 10px; font-size: 12.5px; }
  .chip--icon { width: 32px; }
}

/* ── new-day / stale / storage banner ────────────────────────────────── */

.banners:not(:empty) { padding-top: 2px; }

.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 16px 6px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--ac);
  background: var(--ac2);
  color: var(--acd);
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
  text-wrap: pretty;
}

.banner button { text-decoration: underline; white-space: nowrap; }

/* ── typed word + toast ──────────────────────────────────────────────── */

.entry-area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 20px 0;
}

.typed {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  letter-spacing: .04em;
  color: var(--ink);
}

.caret {
  width: 2px;
  height: 26px;
  margin-inline-start: 4px;
  border-radius: 2px;
  background: var(--ac);
  animation: blink 1.1s step-end infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.toast-slot {
  position: absolute;
  top: 44px;
  z-index: 20;
  display: flex;
  justify-content: center;
  width: 100%;
  pointer-events: none;
}

.toast {
  padding: 9px 16px;
  border-radius: 13px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 18px var(--toast-shadow);
  background: var(--soft);
  color: var(--mut);
}

.toast--good, .toast--pan { background: var(--ac3); color: var(--acd); }
.toast--pan { letter-spacing: .06em; }

/* ── honeycomb ───────────────────────────────────────────────────────── */

.hive-wrap {
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.hive {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hive-row { display: flex; gap: var(--tile-gap); }
.hive-row--mid { margin-block: var(--tile-overlap); }

.tile {
  width: var(--tile-w);
  height: var(--tile-h);
  padding: 0;
  display: block;
  line-height: 0;
}

.tile svg { width: 100%; height: 100%; display: block; }

.hex-edge { fill: var(--edge); }
.hex-face { fill: var(--tile); }
.hex-letter {
  fill: var(--ink);
  font-family: var(--font);
  font-size: 37px;
  font-weight: 400;
}

.tile--center .hex-edge { fill: var(--ac); }
.tile--center .hex-face { fill: var(--ac2); }
.tile--center .hex-letter { fill: var(--acd); font-size: 39px; font-weight: 500; }

.tile:active .hex-edge { fill: var(--ac); }
.tile--center:active .hex-edge { fill: var(--acd); }

/* ── controls ────────────────────────────────────────────────────────── */

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 8px;
}

.ctl {
  min-width: 96px;
  height: 48px;
  padding: 0 16px;
  border-radius: 16px;
  background: var(--soft);
  color: var(--mut);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.ctl--icon { min-width: 0; width: 48px; padding: 0; }

.ctl--submit {
  background: var(--ac2);
  border: 1.5px solid var(--ac);
  color: var(--acd);
  font-weight: 500;
}

@media (hover: hover) {
  .ctl:hover { background: var(--edge); }
  .ctl--submit:hover { background: var(--ac3); }
}

/* ── rank bar ────────────────────────────────────────────────────────── */

.rank {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 22px 0;
}

.rank-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--acd);
  white-space: nowrap;
}

.rank-track {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 6px;
  background: var(--edge);
  overflow: hidden;
}

.rank-fill {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  border-radius: 6px;
  background: var(--ac);
  transition: width .35s cubic-bezier(.2, .7, .3, 1);
}

.rank-next {
  font-size: 12px;
  color: var(--mut);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── found-words panel ───────────────────────────────────────────────── */

.panel {
  /* Height is the drag target; the honeycomb above takes whatever is left.
     The default leans towards the hive — the word list scrolls, the hive
     cannot. */
  flex: 0 0 var(--panel-h, 34dvh);
  min-height: 96px;
  display: flex;
  flex-direction: column;
  background: var(--pn);
  border-top: 1px solid var(--edge);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -12px 28px var(--panel-shadow);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.panel-grip {
  display: flex;
  justify-content: center;
  align-items: center;
  /* A 4px bar is not a touch target; the padding makes the row one. */
  min-height: 26px;
  padding: 9px 0 3px;
  cursor: ns-resize;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.panel-grip span {
  width: 38px;
  height: 4px;
  border-radius: 4px;
  background: var(--edge);
  transition: background .15s, width .15s;
}

.panel-grip:hover span,
.panel-grip:focus-visible span,
.panel-grip[data-dragging] span {
  background: var(--ac);
  width: 52px;
}

.panel-grip:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: -4px;
  border-radius: 8px;
}

/* While dragging, nothing else should take the pointer or select text. */
body[data-resizing] { cursor: ns-resize; }
body[data-resizing] .word-list { pointer-events: none; }

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 20px 8px;
}

.panel-title {
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}


/* The sort control has to read as tappable — it used to be plain text. */
.sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 10px;
  background: var(--soft);
  border: 1px solid var(--edge);
  color: var(--acd);
  font-size: 11.5px;
  white-space: nowrap;
}

.sort-toggle svg { opacity: .7; flex: none; }

@media (hover: hover) {
  .sort-toggle:hover { background: var(--ac2); border-color: var(--ac); }
}

.sort-toggle:active { background: var(--ac3); }

.word-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 16px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}

.word {
  display: flex;
  align-items: baseline;
  padding: 9px 14px;
  border-radius: 13px;
  font-size: 16px;
  background: var(--tile);
  border: 1px solid var(--edge);
  color: var(--ink);
}

.word--pangram {
  background: var(--ac2);
  border: 1.5px solid var(--ac);
  color: var(--acd);
}

.word--newest { box-shadow: 0 3px 10px var(--word-shadow); }

.word-pts {
  margin-inline-start: 7px;
  font-size: 11px;
  opacity: .45;
  font-variant-numeric: tabular-nums;
}

.word--missed { background: transparent; color: var(--mut); }


.word-mark {
  margin-inline-start: 6px;
  font-size: 12px;
  color: var(--ac);
}

.empty-note {
  padding: 10px 4px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mut);
  text-wrap: pretty;
}

/* ── sheets (hints / yesterday / help) ───────────────────────────────── */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--gr);
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-t);
  padding-bottom: var(--safe-b);
  animation: sheet-in .36s cubic-bezier(.2, .75, .3, 1);
}

@keyframes sheet-in {
  from { transform: translateY(102%); }
  to { transform: none; }
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px 14px;
}

.sheet-title { font-size: 21px; font-weight: 500; }

.sheet-sub {
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--mut);
  font-variant-numeric: tabular-nums;
}

.sheet-body {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card {
  border-radius: 22px;
  background: var(--pn);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card--accent { background: var(--ac2); color: var(--acd); }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.card-kicker {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--mut);
}

/* segmented total / remaining switch */
.seg {
  display: inline-flex;
  padding: 2px;
  border-radius: 10px;
  background: var(--gr);
  border: 1px solid var(--edge);
}

.seg-opt {
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--mut);
  white-space: nowrap;
}

.seg-opt[aria-pressed="true"] {
  background: var(--ac2);
  color: var(--acd);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--ac);
}

@media (hover: hover) {
  .seg-opt:not([aria-pressed="true"]):hover { color: var(--ink); }
}

.card-lead {
  font-size: 19px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

.card-figure {
  font-size: 24px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--acd);
}

.card-note {
  font-size: 13px;
  line-height: 1.6;
  opacity: .8;
  text-wrap: pretty;
}

.sheet-foot {
  font-size: 12px;
  line-height: 1.7;
  color: var(--mut);
  text-align: center;
  text-wrap: pretty;
}

.outline-btn {
  height: 50px;
  border-radius: 16px;
  border: 1.5px solid var(--ac);
  color: var(--acd);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  width: 100%;
}

@media (hover: hover) {
  .outline-btn:hover { background: var(--ac2); }
}

.rise { animation: rise .3s cubic-bezier(.2, .7, .3, 1); }

@keyframes rise {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

/* ── hints ───────────────────────────────────────────────────────────── */

.grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  /* Fixed, so column widths come from the layout and not from the digits in
     them — auto layout shifted the columns by up to 3px when the סה״כ/נותרו
     toggle changed a count from two digits to one. */
  table-layout: fixed;
}

.grid-table th:first-child { width: 2.6em; }
.grid-table th:last-child { width: 3.2em; }

.grid-table th {
  padding: 0 0 10px;
  font-weight: 400;
  color: var(--mut);
  text-align: center;
}

.grid-table thead th:first-child { text-align: start; }
.grid-table td { padding: 7px 0; text-align: center; opacity: .75; }

/* Row headers are the honeycomb letters — the accent carries them. */
.grid-table tbody th,
.grid-table tfoot th {
  padding: 7px 0;
  font-size: 17px;
  font-weight: 400;
  color: var(--acd);
  text-align: start;
}

.grid-table tfoot th { font-size: 14px; color: var(--mut); }
.grid-table td:last-child { font-weight: 500; opacity: 1; }
.grid-table tfoot td { font-weight: 500; opacity: 1; }

.pair-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pair-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.pair {
  padding: 8px 13px;
  border-radius: 12px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  background: var(--gr);
  color: var(--ink);
}

.pair[aria-pressed="true"] { background: var(--ac3); color: var(--acd); }

/* Nothing left to find here — dimmed, and not by colour alone. */
.pair--done { opacity: .45; text-decoration: line-through; }
.grid-table td.cell-done { opacity: .35; }

/* Sits directly under the row of the pair that was tapped, not at the foot of
   the card — at the bottom it was too far from the tap to be noticed. */
.pair-detail {
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--ac2);
  color: var(--acd);
  border: 1px solid var(--ac);
}

.pair-detail-sum { font-size: 13px; line-height: 1.6; font-variant-numeric: tabular-nums; }

.pair-detail-words {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}

/* ── help ────────────────────────────────────────────────────────────── */

.rules {
  margin: 0;
  padding-inline-start: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}

.rules b { font-weight: 500; color: var(--acd); }

/* ── feedback form ───────────────────────────────────────────────────── */

#feedback-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: 12px;
  color: var(--mut);
  margin-top: 4px;
}

.field {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--edge);
  background: var(--gr);
  color: var(--ink);
  /* 16px keeps iOS Safari from zooming the page on focus. */
  font: 400 16px/1.5 var(--font);
  resize: vertical;
}

.field::placeholder { color: var(--mut); }
.field:focus-visible { border-color: var(--ac); outline-offset: 0; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mut);
  cursor: pointer;
  text-wrap: pretty;
}

.check input { accent-color: var(--ac); margin-top: 2px; flex: none; }

#feedback-form .outline-btn { margin-top: 4px; }
#feedback-form[data-busy] { opacity: .6; pointer-events: none; }

.credits {
  font-size: 12px;
  line-height: 1.8;
  color: var(--mut);
  text-wrap: pretty;
}

.credits a { color: var(--acd); }

/* ── celebration ─────────────────────────────────────────────────────── */

.celebrate {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--dark);
  color: #f4f3f1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px;
  text-align: center;
}

.celebrate-kicker {
  font-size: 11px;
  letter-spacing: .24em;
  opacity: .5;
}

.celebrate-rank {
  font-size: 54px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--ac2);
}

@media (prefers-color-scheme: dark) {
  /* --ac2 is a dark tint at night; the celebration ground is darker still,
     so the rank name takes the light accent instead. */
  .celebrate-rank { color: var(--acd); }
}

.celebrate-rule {
  width: 64px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .25;
}

.celebrate-line {
  font-size: 15px;
  line-height: 1.7;
  opacity: .7;
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

.celebrate-actions {
  margin-top: 6px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.celebrate .outline-btn {
  width: auto;
  padding: 0 26px;
  color: var(--ac2);
  border-color: var(--ac);
}

@media (prefers-color-scheme: dark) {
  .celebrate .outline-btn { color: var(--acd); }
}

.celebrate .outline-btn--quiet {
  border-color: transparent;
  color: #f4f3f1;
  opacity: .6;
}

/* ── animations ──────────────────────────────────────────────────────── */

.pop { animation: pop .34s cubic-bezier(.3, 1.3, .5, 1); }

@keyframes pop {
  0% { transform: scale(.82); opacity: 0; }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

.spin { animation: combturn .6s cubic-bezier(.4, .05, .2, 1); }

@keyframes combturn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.halo { animation: halo 1s ease-out; }

@keyframes halo {
  0% { box-shadow: 0 0 0 0 var(--halo); }
  100% { box-shadow: 0 0 0 42px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── wide viewports: two panels side by side ─────────────────────────── */

@media (min-width: 700px) and (min-height: 480px) {
  .header, .banner, .main {
    width: 100%;
    max-width: 1000px;
    margin-inline: auto;
  }

  .main {
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
    padding: 0 24px 24px;
  }

  .stage {
    flex: 1 1 380px;
    max-width: 460px;
    justify-content: center;
    padding-bottom: 0;
  }

  .panel {
    flex: 1 1 320px;
    max-width: 420px;
    border-radius: 26px;
    border: 1px solid var(--edge);
    box-shadow: none;
    align-self: center;
    max-height: 100%;
  }
}

/* Landscape phones: same two-panel split, tighter. */
@media (max-height: 480px) and (orientation: landscape) {
  :root { --tile-w: clamp(46px, 11.5vh, 70px); }
  .main { flex-direction: row; gap: 16px; padding: 0 12px 8px; }
  .stage { flex: 1 1 auto; justify-content: center; padding-bottom: 0; }
  .panel { flex: 1 1 40%; border-radius: 20px; box-shadow: none; }
  .header { padding-block: 2px; }
}