/* Peak — Daily Challenge Mountain */

.hero-back-link{display:inline-block;margin-bottom:.5rem;color:var(--muted);text-decoration:none;font-size:1.1rem}
.hero-back-link:hover{color:var(--ink)}
.hero-copy-wrap{display:flex;flex-direction:column}

/* Start screen */
.start-panel{padding:1.5rem;text-align:center}
.start-panel h2{margin:0 0 .3rem;font-size:1.6rem}
.start-date{margin:0 0 .4rem;color:var(--muted);font-family:var(--mono);font-size:.85rem}
.start-desc{margin:0 0 1.2rem;color:var(--muted);line-height:1.5}
.start-actions{display:flex;justify-content:center;gap:.75rem}
.already-msg{margin:1rem 0 0;color:var(--danger);font-size:.9rem}

/* Mountain visualization */
.mountain-viz{margin:0 auto 1.2rem;max-width:400px}
.mountain-svg{width:100%;height:auto;display:block}
.stage-dot{fill:var(--line-strong);stroke:var(--panel);stroke-width:2;transition:fill .3s ease}
.stage-dot.completed{fill:var(--success)}
.stage-dot.active{fill:var(--accent);animation:dot-pulse 1.2s infinite}
@keyframes dot-pulse{0%,100%{r:6}50%{r:9}}

/* Game screen */
.game-panel{padding:1.2rem}
.game-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.stage-indicator{display:flex;align-items:center;gap:.6rem}
.stage-label{font-family:var(--mono);font-size:.85rem;color:var(--muted)}
.puzzle-type-badge{display:inline-block;padding:.2rem .55rem;border-radius:999px;border:2px solid var(--line-strong);background:rgba(255,255,255,.04);font-family:var(--mono);font-size:.7rem;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.timer-wrap{font-family:var(--mono);font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}

/* Stage progress pips */
.stage-progress{margin-bottom:1rem}
.stage-pips{display:flex;gap:.4rem;justify-content:center}
.pip{width:3rem;height:.35rem;border-radius:999px;background:var(--line);transition:background .3s ease}
.pip.done{background:var(--success)}
.pip.active{background:var(--accent);animation:pip-glow 1.2s infinite alternate}
@keyframes pip-glow{from{box-shadow:0 0 4px rgba(199,210,254,.3)}to{box-shadow:0 0 12px rgba(199,210,254,.6)}}

/* Puzzle area */
.puzzle-area{min-height:300px;padding:1rem;border:2px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.02);margin-bottom:1rem}
.puzzle-instructions{margin:0 0 .8rem;color:var(--muted);font-size:.9rem;line-height:1.5}

/* Game footer */
.game-footer{display:flex;align-items:center;gap:1rem}
.game-footer button{flex:0 0 auto;min-width:140px}
.penalty-counter{color:var(--danger);font-family:var(--mono);font-size:.8rem}

/* --- Puzzle-specific styles --- */

/* Math Chain */
.math-chain-display{text-align:center;margin-bottom:1rem}
.math-chain-start,.math-chain-target{font-size:2rem;font-weight:700;color:var(--accent)}
.math-chain-arrow{color:var(--muted);margin:0 .5rem;font-size:1.2rem}
.op-bank{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1rem;padding:.6rem;border:2px dashed var(--line);border-radius:var(--radius)}
.op-tile{padding:.5rem .8rem;border-radius:var(--radius);border:2px solid var(--accent-soft);background:rgba(199,210,254,.08);cursor:pointer;font-family:var(--mono);font-size:.95rem;color:var(--ink);transition:transform .12s ease,border-color .15s ease;user-select:none}
.op-tile:hover{border-color:var(--accent);transform:scale(1.05)}
.op-tile.used{opacity:.35;pointer-events:none}
.chain-sequence{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;justify-content:center;min-height:3rem;padding:.6rem;border:2px solid var(--line-strong);border-radius:var(--radius);background:rgba(255,255,255,.03)}
.chain-step{padding:.35rem .6rem;border-radius:var(--radius);background:var(--accent-soft);font-family:var(--mono);font-size:.85rem;color:var(--accent-strong);cursor:pointer}
.chain-step:hover{background:rgba(243,181,176,.15);color:var(--danger)}
.chain-result{font-family:var(--mono);font-weight:700;font-size:1.1rem;color:var(--ink)}

/* Pattern Grid */
.pattern-grid-board{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;max-width:320px;margin:0 auto 1rem}
.pattern-cell{aspect-ratio:1;border:2px solid var(--line);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:2rem;background:rgba(255,255,255,.03)}
.pattern-cell.missing{border-style:dashed;border-color:var(--accent);background:rgba(199,210,254,.06)}
.pattern-options{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;max-width:400px;margin:0 auto}
.pattern-option{aspect-ratio:1;border:2px solid var(--line);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:rgba(255,255,255,.03);cursor:pointer;transition:border-color .15s ease}
.pattern-option:hover{border-color:var(--accent)}
.pattern-option.selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 12px rgba(199,210,254,.2)}

/* Number Puzzle */
.equation-display{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;font-size:1.6rem;font-family:var(--mono);margin-bottom:1rem}
.eq-number{font-weight:700;color:var(--ink)}
.eq-blank{width:3rem;height:3rem;border:2px solid var(--accent);border-radius:var(--radius);background:rgba(199,210,254,.08);text-align:center;font:inherit;font-size:1.4rem;color:var(--ink)}
.eq-blank:focus{outline:none;box-shadow:0 0 0 3px rgba(199,210,254,.3)}
.eq-op{color:var(--muted);font-weight:400}
.eq-equals{color:var(--accent);font-weight:700}
.eq-target{color:var(--accent);font-weight:700}

/* Word Chain */
.word-chain-endpoints{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:1rem}
.wc-word{font-size:1.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.wc-start{color:var(--accent)}
.wc-end{color:var(--success)}
.wc-arrow{color:var(--muted);font-size:1.2rem}
.word-chain-inputs{display:flex;flex-direction:column;gap:.4rem;align-items:center;margin-bottom:1rem}
.wc-step-input{width:10rem;padding:.55rem .7rem;border:2px solid var(--line-strong);border-radius:var(--radius);background:rgba(255,255,255,.04);text-align:center;text-transform:uppercase;letter-spacing:.1em;font:inherit;font-size:1.1rem;color:var(--ink)}
.wc-step-input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(199,210,254,.2)}
.wc-step-label{font-size:.7rem;color:var(--muted);font-family:var(--mono)}

/* Pattern Completion */
.sequence-row{display:flex;gap:.8rem;justify-content:center;align-items:center;margin-bottom:1.2rem;flex-wrap:wrap}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:80px;height:80px;border:2px solid var(--line);border-radius:3px;overflow:hidden}
.mini-cell{background:rgba(255,255,255,.06)}
.mini-cell.on{background:var(--accent)}
.mini-grid.answer-slot{border-style:dashed;border-color:var(--accent)}
.sequence-arrow{color:var(--muted);font-size:1.2rem}
.completion-options{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.completion-option{cursor:pointer;transition:transform .12s ease;border:3px solid transparent;border-radius:5px;padding:2px}
.completion-option:hover{transform:scale(1.08)}
.completion-option.selected{border-color:var(--accent);box-shadow:0 0 14px rgba(199,210,254,.25)}

/* Memory Sequence */
.memory-display{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;min-height:60px;margin-bottom:1rem}
.memory-item{padding:.55rem .85rem;border-radius:var(--radius);border:2px solid var(--accent-soft);background:rgba(199,210,254,.1);font-family:var(--mono);font-size:1rem;color:var(--accent-strong);transition:opacity .3s ease}
.memory-item.hidden{opacity:0}
.memory-input-area{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-bottom:.8rem}
.memory-slot{min-width:5rem;padding:.45rem .6rem;border:2px solid var(--line-strong);border-radius:var(--radius);background:rgba(255,255,255,.03);font-family:var(--mono);font-size:.85rem;color:var(--muted);text-align:center;cursor:pointer;transition:border-color .15s ease}
.memory-slot.filled{color:var(--ink);border-color:var(--accent-soft)}
.memory-word-bank{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;margin-bottom:.8rem}
.memory-word{padding:.4rem .65rem;border-radius:var(--radius);border:2px solid var(--line);background:rgba(255,255,255,.04);cursor:pointer;font-family:var(--mono);font-size:.85rem;color:var(--ink);transition:transform .1s ease}
.memory-word:hover{border-color:var(--accent);transform:scale(1.04)}
.memory-word.used{opacity:.3;pointer-events:none}
.memory-countdown{text-align:center;font-family:var(--mono);font-size:2rem;font-weight:700;color:var(--accent);margin-bottom:.5rem}

/* Cipher Decode */
.cipher-text{font-family:var(--mono);font-size:1rem;line-height:2.2;letter-spacing:.15em;text-align:center;margin-bottom:1rem;word-break:break-all}
.cipher-char{display:inline-block;min-width:1.4rem;text-align:center;position:relative}
.cipher-char-top{display:block;color:var(--muted);font-size:.75rem}
.cipher-char-bottom{display:block;font-weight:700;color:var(--ink)}
.cipher-char-bottom.hint{color:var(--success)}
.cipher-char-input{width:1.4rem;border:none;border-bottom:2px solid var(--accent);background:transparent;text-align:center;font:inherit;font-weight:700;font-size:1rem;color:var(--ink);outline:none;text-transform:uppercase}
.cipher-char-input:focus{border-color:var(--accent-strong);box-shadow:0 2px 0 var(--accent)}
.cipher-space{display:inline-block;width:1rem}
.cipher-hints{text-align:center;margin-bottom:.8rem;color:var(--muted);font-size:.85rem}

/* Set Finding */
.set-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:.5rem;margin-bottom:1rem}
.set-card{aspect-ratio:.7;border:2px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;padding:.3rem;cursor:pointer;background:rgba(255,255,255,.03);transition:border-color .15s ease,transform .1s ease;user-select:none}
.set-card:hover{border-color:var(--accent-soft);transform:scale(1.03)}
.set-card.selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 10px rgba(199,210,254,.15)}
.set-card.in-found{border-color:var(--success);opacity:.5;pointer-events:none}
.set-shape{font-size:1.2rem}
.set-info{font-family:var(--mono);font-size:.6rem;color:var(--muted)}
.set-status{text-align:center;font-family:var(--mono);font-size:.85rem;color:var(--muted);margin-bottom:.6rem}
.set-found-list{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;margin-bottom:.5rem}
.set-found-badge{padding:.2rem .5rem;border-radius:999px;background:rgba(176,232,196,.12);font-family:var(--mono);font-size:.7rem;color:var(--success)}

/* Results screen */
.results-panel{padding:1.5rem;text-align:center}
.results-title{margin:0 0 .8rem;font-size:1.8rem}
.results-time-hero{margin-bottom:1rem}
.results-time-label{display:block;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:.2rem}
.results-time-value{font-family:var(--mono);font-size:2.5rem;font-weight:700;color:var(--accent)}
.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;max-width:280px;margin:0 auto 1rem}
.result-stat{padding:.6rem;border:2px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.03)}
.result-stat-label{display:block;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em}
.result-stat-value{display:block;margin-top:.15rem;font-size:1.2rem;font-weight:700;font-variant-numeric:tabular-nums}
.stage-times{margin-bottom:1rem}
.stage-time-row{display:flex;justify-content:space-between;padding:.35rem .5rem;border-bottom:1px solid var(--line)}
.stage-time-row:last-child{border-bottom:none}
.stage-time-name{color:var(--muted);font-size:.85rem}
.stage-time-val{font-family:var(--mono);font-size:.85rem;font-weight:600}
.results-actions{display:flex;justify-content:center;gap:.6rem}

/* Leaderboard */
.leaderboard-panel{padding:1.2rem}
.lb-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.lb-header h2{margin:0;font-size:1.3rem}
.lb-body{max-height:400px;overflow-y:auto}
.lb-row{display:grid;grid-template-columns:2.5rem 1fr auto;gap:.5rem;align-items:center;padding:.5rem .3rem;border-bottom:1px solid var(--line)}
.lb-row:last-child{border-bottom:none}
.lb-rank{font-family:var(--mono);font-weight:700;color:var(--muted);text-align:center}
.lb-rank.top3{color:var(--accent)}
.lb-name{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-time{font-family:var(--mono);font-size:.85rem;font-weight:600;color:var(--accent)}
.lb-you{background:rgba(199,210,254,.06);border-radius:var(--radius)}
.lb-empty{text-align:center;color:var(--muted);padding:2rem}

/* Feedback flash */
.feedback-flash{position:fixed;top:4rem;left:50%;transform:translateX(-50%);padding:.6rem 1.2rem;border-radius:var(--radius);font-family:var(--mono);font-size:.85rem;z-index:10002;animation:flash-in .3s ease}
.feedback-flash.correct{background:rgba(33,101,63,.9);color:#edfdf2;border:2px solid rgba(145,220,173,.5)}
.feedback-flash.wrong{background:rgba(112,39,34,.9);color:#fff1ef;border:2px solid rgba(226,143,136,.5)}
@keyframes flash-in{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

@media(max-width:720px){
  .equation-display{font-size:1.2rem}
  .wc-word{font-size:1.3rem}
  .mini-grid{width:60px;height:60px}
  .results-time-value{font-size:2rem}
  .set-board{grid-template-columns:repeat(auto-fill,minmax(65px,1fr))}
}
