/* ITZA Chess - puzzles.css. Styles for the Puzzles screens ONLY - every
   selector is scoped under #screen-puzzles so nothing here can leak into
   the rest of the app. Reuses the app's existing variables/classes for
   cards, gold accents and back buttons (see css/app.css). */

#screen-puzzles .puzwrap { max-width: 560px; margin: 0 auto; padding: 8px 10px 24px; }

/* ---------- menu cards ---------- */
/* Cards are PANELS, never controls. They used to carry cursor:pointer and a
   gold hover border - which promised a click on every card, while only the
   daily one actually had a handler and the rest needed you to find a small
   button inside. One affordance rule now: if it does something, it is a
   <button>; if it is a card, it does nothing. (That also fixes the keyboard:
   a div with an onclick was unreachable by tab.) */
#screen-puzzles .pzcard {
  display: block; width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; margin: 10px 0; color: inherit;
}
/* the action row sits apart from the card's text so the button is the
   obvious place to press */
#screen-puzzles .pzact { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
#screen-puzzles .pzact .pzactlbl { font-size: .85em; opacity: .7; margin-right: 2px; }
/* Card header: title and its badges on ONE line, badges shrink-to-fit.
   They live in this row rather than as direct card children because
   `.pzcard > span{display:block}` below (id+class+element, so it outranks
   .refBadge's inline-block) stretched every badge into a full-width pill -
   that is what squashed the Practice badge and the streak chip together. */
#screen-puzzles .pzhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
#screen-puzzles .pzhead b { font-size: 1.05em; }
#screen-puzzles .pzhead .pzstreak { margin-left: auto; float: none; }   /* pinned right without floating out of flow */
#screen-puzzles .pzcard > b { display: block; font-size: 1.05em; margin-bottom: 2px; }
#screen-puzzles .pzcard > span { display: block; opacity: .8; font-size: .92em; }
#screen-puzzles .pzrow { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
#screen-puzzles .pzrow select {
  background: var(--elev); color: inherit; border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 8px;
}
#screen-puzzles .pzrow .btn em { font-style: normal; opacity: .65; margin-left: 6px; font-size: .85em; }
#screen-puzzles .pzweak { margin-top: 8px; font-size: .85em; opacity: .75; }

/* streak flame chip - hidden entirely when the Show-streaks setting is off
   (the markup is simply not rendered; there is no display toggle to leak) */
#screen-puzzles .pzstreak {
  float: right; background: rgba(30, 62, 98, .10); border: 1px solid var(--accent);
  border-radius: 999px; padding: 2px 10px; font-weight: 700; font-size: .9em;
}

/* 30-day calendar strip: labelled, legended, today ringed - it used to be 30
   bare grey squares with hover-only tooltips, unreadable on touch */
#screen-puzzles .pzcalhead { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; font-size: .8em; opacity: .8; }
#screen-puzzles .pzcallegend { display: inline-flex; gap: 10px; align-items: center; }
#screen-puzzles .pzcallegend i { display: inline-block; margin-right: 4px; vertical-align: -1px; }
#screen-puzzles .pzcal { display: flex; gap: 3px; margin-top: 6px; flex-wrap: wrap; }
#screen-puzzles .pzday {
  width: 10px; height: 10px; border-radius: 3px;
  background: var(--line);
}
#screen-puzzles .pzday.hit { background: var(--accent); }
#screen-puzzles .pzday.today { box-shadow: 0 0 0 1.5px var(--ink2); }        /* the ring marks TODAY */
/* end captions: the strip runs oldest -> newest, and nothing on screen said
   so - these two labels are the whole explanation */
#screen-puzzles .pzcalends { display: flex; justify-content: space-between; margin-top: 4px; font-size: .72em; opacity: .6; }
#screen-puzzles .pzcalempty { margin-top: 8px; font-size: .85em; opacity: .7; }

/* the Normal/Offline mode explainer line under the selector */
#screen-puzzles .pzmodehint { font-size: .85em; opacity: .75; margin: -2px 0 10px; min-height: 1.3em; }

/* ---------- solve view ---------- */
#screen-puzzles #puzzleBoard { width: 100%; aspect-ratio: 1/1; position: relative; }
#screen-puzzles .pzstatus { margin: 8px 0; min-height: 1.4em; }
#screen-puzzles .pzbtns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
#screen-puzzles .pzend {
  background: var(--panel); border: 1px solid var(--accent);
  border-radius: 10px; padding: 10px 14px; margin-top: 10px;
}
#screen-puzzles .pzend b { margin-right: 8px; }

/* ---------- rush HUD + end ---------- */
#screen-puzzles .pzrushhud {
  display: flex; gap: 16px; align-items: baseline; margin-bottom: 6px; font-variant-numeric: tabular-nums;
}
#screen-puzzles .pzrushhud b { font-size: 1.4em; color: var(--accent); }
#screen-puzzles .pzrushhud .pzmiss { color: #e05c5c; letter-spacing: 2px; }
#screen-puzzles .pzrushhud .pzmiss .dim { opacity: .25; }
#screen-puzzles .pzrushend { text-align: center; padding: 18px 0; }
#screen-puzzles .pzrushend > b { font-size: 3em; color: var(--accent); display: block; }
#screen-puzzles .pzrushend > span { display: block; opacity: .8; margin: 6px 0 14px; }
#screen-puzzles .pzrushend h3 { margin: 14px 0 6px; }
#screen-puzzles .pzmissrow { opacity: .85; font-size: .95em; padding: 2px 0; }
#screen-puzzles .pzrushend .btn { margin-top: 16px; }

/* ---------- Bounty pane (the paid tier) ---------- */
/* stat strip: streak / day streak / solves / monthly room in one quiet row */
#screen-puzzles .bnstats {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px;
  font-size: .88em; opacity: .85;
}
#screen-puzzles .bnstats b { font-variant-numeric: tabular-nums; }
#screen-puzzles .bnlast { margin-top: 8px; font-size: .88em; opacity: .85; }
#screen-puzzles .bnjack { color: var(--accent); letter-spacing: .5px; }
/* the gauntlet pay ladder: eight amounts reading left to right */
#screen-puzzles .bnladder {
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
  margin-top: 10px; font-size: .8em; font-variant-numeric: tabular-nums; opacity: .85;
}
#screen-puzzles .bnladder i { font-style: normal; opacity: .5; }
/* bank-or-risk choice inside the end panel */
#screen-puzzles .bnrisk { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* challenge create row + list */
#screen-puzzles .bnchnew input {
  background: var(--elev); color: inherit; border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 8px; min-width: 0;
}
#screen-puzzles .bnchnew #bnChOpp { flex: 1 1 180px; }
#screen-puzzles .bnchnew #bnChStake { flex: 0 1 90px; }
#screen-puzzles .bnchlist { margin-top: 10px; border-top: 1px solid var(--line); }
#screen-puzzles .bnchrow {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .92em;
}
#screen-puzzles .bnchrow span:first-child { font-weight: 600; }
#screen-puzzles .bnchrow span:nth-child(2) { opacity: .8; margin-left: auto; }