/* =====================================================================
   Styles specific to the House of Ingenious Arts clicker trial.
   Shared theme (vars, banner, panel, buttons, bar) lives in theme.css.
   ===================================================================== */

/* Every page renders inside the fixed 480px-wide .page-frame (see
   MainLayout.razor.css), so a window-width media query here was
   misleading: past 900px it switched to a two-column desktop template
   that never actually had room to lay out — the codex column got
   crushed to a sliver. Always use a single column to match the real
   available width. */
.cols{display:grid;grid-template-columns:1fr;gap:26px;align-items:start}

/* ---- counters ---- */
.count{text-align:center;margin-bottom:10px}
.count .big{
  font-family:var(--pixel);font-size:26px;color:var(--wood-dk);
  text-shadow:2px 2px 0 var(--gold-dk);word-break:break-all;
}
.count .lbl{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#6b5433}
.rate{
  font-family:var(--pixel);font-size:11px;text-align:center;color:var(--moss);margin:10px 0 4px;
}
.mult{font-family:var(--pixel);font-size:10px;text-align:center;color:var(--blood);margin-bottom:14px}
.hint{
  font-family:var(--pixel);font-size:8px;line-height:1.9;text-align:center;
  color:var(--wood);background:var(--gold);border:3px solid var(--ink);
  padding:8px 6px;margin-bottom:14px;animation:pulse 1.4s steps(2,end) infinite;
}
@keyframes pulse{0%,100%{background:var(--gold)}50%{background:#f5d45e}}

/* ---- click target ---- */
.tap{
  display:block;margin:0 auto 6px;background:var(--parch-dk);
  border:4px solid var(--ink);padding:12px 12px 8px;cursor:pointer;
  box-shadow:4px 4px 0 rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.3);
  transition:transform .05s;
}
.tap:hover{background:#dcc492}
.tap:active{transform:translate(4px,4px);box-shadow:0 0 0 rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.3)}
.tap .pixel-icon{margin:0 auto}
.tap .cap{font-family:var(--pixel);font-size:8px;text-align:center;margin-top:8px;color:var(--wood);line-height:2.2}
.tap .capval{color:var(--moss);font-size:10px}
.tap.stretch{background:#cfd6d2;border-color:#4f5d63}
.tap.stretch:hover{background:#bfc8c3}
.tap.singularity{background:#14121f;border-color:#6b4a8f;animation:glitch 2.4s steps(1,end) infinite}
.tap.singularity:hover{background:#221d33}
.tap.singularity .cap{color:#c9b6ff;text-shadow:2px 0 0 #ff2fb4,-2px 0 0 #2fe6ff}
.tap.singularity .capval{color:#7cf2ff;text-shadow:none}
.tap.singularity .pixel-icon{animation:glitch-icon 2.4s steps(1,end) infinite}
.tapwrap{position:relative}
/* ---- onboarding nudge: a white-gloved hand presses the button until auto-gathering starts (#136) ---- */
.first-nudge{margin-bottom:34px}
.tap.nudge{animation:tap-beckon 1.2s steps(2,end) infinite}
@keyframes tap-beckon{0%,100%{outline:4px solid var(--gold);outline-offset:3px}50%{outline:4px solid transparent;outline-offset:3px}}
.tap-pointer{
  position:absolute;top:-36px;left:58%;z-index:2;pointer-events:none;
  filter:drop-shadow(2px 2px 0 rgba(0,0,0,.45));
  animation:pointer-press .9s steps(2,end) infinite;
}
.tap-pointer .pixel-icon{margin:0}
/* the manicule points left, so -45deg aims it down at the button; the press follows the finger */
@keyframes pointer-press{
  0%,100%{transform:translate(-50%,0) rotate(-45deg)}
  50%{transform:translate(calc(-50% - 10px),10px) rotate(-45deg)}
}
.float{
  position:absolute;top:42%;font-family:var(--pixel);font-size:11px;color:var(--moss);
  pointer-events:none;animation:rise 900ms ease-out forwards;text-shadow:1px 1px 0 #fff;
}
@keyframes rise{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-46px)}}

/* ---- house ---- */
.house-grid{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px;min-height:44px}
.gm{position:relative;background:var(--parch-dk);border:3px solid var(--ink);padding:2px;cursor:default}
.gm .tip{
  display:none;position:absolute;bottom:110%;left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--parch);font-size:11px;padding:4px 7px;white-space:nowrap;z-index:9;
}
.gm:hover .tip{display:block}
.empty-note{font-size:12px;color:#6b5433;font-style:italic}

/* ---- progress to milestone ---- */
.goal{margin-top:18px;border-top:3px solid var(--wood);padding-top:12px}
.goal .t{font-family:var(--pixel);font-size:8px;color:var(--wood);margin-bottom:8px;line-height:1.7}

/* ---- codex ---- */
.codex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.card{
  background:var(--parch-dk);border:4px solid var(--wood);padding:10px;
  display:flex;gap:10px;align-items:flex-start;position:relative;overflow:hidden;
}
.card.locked{background:#b9a684;filter:saturate(.15) brightness(.86)}
.card.new{animation:pop .5s ease-out}
@keyframes pop{0%{transform:scale(.85);box-shadow:0 0 0 8px var(--gold)}100%{transform:scale(1);box-shadow:none}}
.card .meta{min-width:0}
.card .nm{font-family:var(--pixel);font-size:8px;line-height:1.7;color:var(--wood-dk);margin-bottom:4px}
.card .yr{font-size:11px;color:var(--blood);letter-spacing:1px}
.card .bl{font-size:12px;color:#4a3a24;margin-top:5px}
.card .gain{font-family:var(--pixel);font-size:7px;color:var(--moss);margin-top:6px}
.card .need{font-family:var(--pixel);font-size:7px;color:#3b2d1c;margin-top:6px}
/* Post-medieval stretch goals: cooler, "modern-ish" parchment. */
.card.stretch{background:#cfd6d2;border-color:#4f5d63}
.card.stretch.locked{background:#a9b2ae}
/* A nameless wizard stands between the ages of the codex and speaks (bubble styled in hub.css). */
.codex-divider{
  grid-column:1/-1;display:flex;align-items:center;gap:14px;margin:6px 0;padding:10px 0 4px;
  border-top:4px dashed var(--wood);
}
.codex-divider .pixel-icon{flex:0 0 auto;animation:npc-bob 2.6s steps(2,end) infinite}
.codex-divider .quest-bubble p{font-style:italic}
.codex-divider.singularity{border-top-color:#6b4a8f}
.codex-divider.singularity .quest-bubble,.codex-divider.singularity .quest-bubble::before{background:#14121f;border-color:#6b4a8f}
.codex-divider.singularity .quest-bubble p{color:#c9b6ff}
/* The unreachable Singularity flickers like a glitch in time. */
.card.singularity,.card.singularity.locked{
  background:#14121f;border-color:#6b4a8f;filter:none;
  animation:glitch 2.4s steps(1,end) infinite;
}
.card.singularity .nm{color:#c9b6ff;text-shadow:2px 0 0 #ff2fb4,-2px 0 0 #2fe6ff}
.card.singularity .yr{color:#ff6fcf}
.card.singularity .bl{color:#cfc8e8}
.card.singularity .gain,.card.singularity .need{color:#7cf2ff}
.card.singularity .pixel-icon{animation:glitch-icon 2.4s steps(1,end) infinite}
@keyframes glitch{
  0%,100%{transform:none;box-shadow:none}
  46%{transform:translate(-3px,1px);box-shadow:3px 0 0 #ff2fb4,-3px 0 0 #2fe6ff}
  48%{transform:translate(2px,-1px);box-shadow:-2px 0 0 #ff2fb4,2px 0 0 #2fe6ff}
  50%{transform:none;box-shadow:none}
  83%{transform:skewX(-6deg)}
  84%{transform:none}
}
@keyframes glitch-icon{
  0%,100%{filter:none;opacity:1}
  47%{filter:hue-rotate(160deg) saturate(3);opacity:.6}
  49%{filter:invert(1);opacity:.9}
  51%{filter:none;opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .card.singularity,.card.singularity .pixel-icon,.tap.singularity,.tap.singularity .pixel-icon,.codex-divider .pixel-icon{animation:none}
}
.minibar{height:7px;background:#5c4a30;margin-top:5px}
.minibar>div{height:100%;background:var(--gold);width:0%}

/* ---- chronicle log ---- */
.log{margin-top:18px;background:#f0e2bd;border:3px solid var(--wood);padding:8px 10px;height:110px;overflow-y:auto;font-size:12px}
.log div{border-bottom:1px dashed #c4ad7d;padding:3px 0}
.log .ts{color:#8a7346}

/* ---- victory ---- */
.overlay{
  position:fixed;inset:0;background:rgba(15,8,3,.92);display:flex;align-items:center;justify-content:center;
  z-index:50;padding:20px;text-align:center;
}
.overlay.hidden{display:none}
.overlay .box{background:var(--parch);padding:28px;max-width:520px}
.overlay h3{font-family:var(--pixel);font-size:15px;color:var(--blood);margin:14px 0}
.overlay p{font-size:14px}
/* The wizard announcing a new age of the codex. */
.age-gate{display:flex;flex-direction:column;gap:18px;text-align:left}
.age-gate-scene{display:flex;align-items:center;gap:14px}
.age-gate-scene .pixel-icon{flex:0 0 auto;animation:npc-bob 2.6s steps(2,end) infinite}
.age-gate .quest-bubble p{font-style:italic}
.age-gate.singularity{background:#14121f;border:3px solid #6b4a8f}
.age-gate.singularity .quest-bubble,.age-gate.singularity .quest-bubble::before{background:#14121f;border-color:#6b4a8f}
.age-gate.singularity .quest-bubble p{color:#c9b6ff}
@media (prefers-reduced-motion:reduce){.age-gate-scene .pixel-icon{animation:none}}
.footnote{max-width:1180px;margin:26px auto 0;color:#b09a6f;font-size:12px;text-align:center}
.topbar{display:flex;gap:8px;margin-bottom:14px}
.topbar button{flex:1}