/* 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.
   Full-width stacked cards, not a wrapping row of small pills: this is the one
   press in the app that spends real value, so each option states its own
   consequence on a second line and gets a proper tap target. The old
   `.btn.sm` pair wrapped on a phone into a stubby "Bank" above a much wider
   "Risk it", which read as two unrelated controls (reported 2026-08-03). */
#screen-puzzles .bnrisk { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
#screen-puzzles .bnchoice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; min-height: 56px; padding: 11px 14px; text-align: left;
  border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 12px;
  background: var(--panel); color: var(--ink); cursor: pointer; font: inherit;
  transition: transform .1s, box-shadow .12s, border-color .12s, background .12s;
}
#screen-puzzles .bnchoice b { font-size: 1.05em; margin: 0; }
#screen-puzzles .bnchoice span { font-size: .82em; opacity: .8; line-height: 1.35; }
/* banking is the safe, primary action - it wears the primary surface */
#screen-puzzles .bnchoice.bank { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
#screen-puzzles .bnchoice.bank span { opacity: .85; }
#screen-puzzles .bnchoice.risk { background: var(--ctrl); border-color: var(--ctrl-line); }
#screen-puzzles .bnchoice:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(11,25,44,.14); }
#screen-puzzles .bnchoice:active { transform: translateY(1px); border-bottom-width: 1px; margin-bottom: 2px; box-shadow: none; }
#screen-puzzles .bnchoice:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
/* .spinner is scoped to the sign-in card, so the busy state carries its own,
   drawn in currentColor so it works on both the primary and ghost surfaces */
#screen-puzzles .bnchoice .spin {
  display: inline-block; width: 12px; height: 12px; margin-right: 7px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: spin .8s linear infinite; vertical-align: -1px; opacity: .85;
}
/* 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; }


/* ---------- winning something is an EVENT, not a flicker ----------
   Reported (Eli, 2026-07-28): a bounty win "flashes real quick what you won
   and that's it". The amount now lands centre screen and STAYS until it is
   dismissed - nothing here is on a timer, because a reward that vanishes
   before you have read it may as well not have been paid. */
.winWrap{
  position:fixed; inset:0; z-index:70; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(11,25,44,.62); backdrop-filter:blur(2px);
  animation:winFade .18s ease-out;
}
@keyframes winFade{ from{opacity:0} to{opacity:1} }
.winCard{
  position:relative; width:min(420px,94vw); text-align:center;
  background:var(--panel); color:var(--ink);
  border:2px solid var(--gold); border-radius:18px;
  padding:26px 24px 20px;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  animation:winPop .42s cubic-bezier(.18,.9,.28,1.35);
}
@keyframes winPop{
  0%{ transform:scale(.72) translateY(14px); opacity:0 }
  60%{ transform:scale(1.04) translateY(0); opacity:1 }
  100%{ transform:scale(1) translateY(0); opacity:1 }
}
.winKicker{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); }
.winTitle{ font-size:26px; font-weight:800; margin:6px 0 2px; }
.winAmt{
  font-size:46px; font-weight:800; line-height:1.05; margin:10px 0 2px;
  color:var(--gold); font-variant-numeric:tabular-nums;
  animation:winAmt .5s .12s both cubic-bezier(.2,.8,.3,1.3);
}
@keyframes winAmt{ from{ transform:scale(.6); opacity:0 } to{ transform:scale(1); opacity:1 } }
.winUnit{ font-size:18px; font-weight:700; color:var(--ink2); margin-left:6px; }
.winSub{ color:var(--ink2); font-size:14px; margin-top:6px; line-height:1.5; }
.winRows{ display:flex; flex-direction:column; gap:6px; margin:14px 0 4px; }
.winRow{
  display:flex; justify-content:space-between; align-items:center;
  font-size:14px; padding:7px 12px; border-radius:9px;
  background:var(--elev); border:1px solid var(--line);
}
.winRow b{ color:var(--gold); }
.winRow.jackpot{ border-color:var(--gold); }
.winBtns{ display:flex; gap:8px; margin-top:16px; }
.winBtns .btn{ flex:1; }
/* a few confetti chips, drawn not imported - they fall once and stop */
.winConf{ position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:16px; }
.winConf i{
  position:absolute; top:-12px; width:8px; height:14px; border-radius:2px;
  opacity:0; animation:winConfFall 1.5s ease-in forwards;
}
@keyframes winConfFall{
  0%{ opacity:0; transform:translateY(-10px) rotate(0deg) }
  12%{ opacity:1 }
  100%{ opacity:0; transform:translateY(320px) rotate(540deg) }
}
/* Motion is a garnish, never the message: anyone who asks the system for
   less of it gets the card without the movement, amount and all. */
@media (prefers-reduced-motion: reduce){
  .winWrap, .winCard, .winAmt{ animation:none; }
  .winConf{ display:none; }
}

/* "Copy position" on a failed puzzle. Quiet - it is a tool, not the next
   action - but always present, because a position you cannot copy is a
   position you cannot ask anyone about. */
.puzCopyPos{margin-left:12px;vertical-align:middle}
@media (max-width:520px){
  .puzCopyPos{display:block;margin:8px 0 0}
}