/* Gloomies — plain CSS, no framework, no runtime font request. */

:root{
  --page:#1d3bff;          /* the featured Gloomie's own background colour */
  --glow:#ffffff;          /* the featured Gloomie's eye-glow colour */
  --ink:#0B0B10;
  --paper:#ffffff;
  --display: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, monospace;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gut:24px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--page);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
img{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

:where(a,button,[tabindex]):focus-visible{
  outline:4px solid var(--ink);
  outline-offset:3px;
}
.console :where(a,button):focus-visible{outline-color:var(--glow)}

/* ---------- top bar ---------- */
.topbar{
  height:56px;
  padding:0 var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.wordmark{display:flex;align-items:center;text-decoration:none;color:var(--ink)}
.wordmark-svg{height:22px;width:auto}
.topbar-note{
  margin:0;font-family:var(--display);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--ink);
}

/* ---------- stage ---------- */
.stage{
  padding:8px var(--gut) 16px;
  display:grid;
  grid-template-columns:560px 560px;
  gap:40px;
  justify-content:center;
  align-items:start;
}

.featured{display:flex;flex-direction:column;align-items:center;gap:14px}
.featured-frame{position:relative;width:560px;height:560px}
.featured-frame::before{
  content:"";position:absolute;inset:4%;border-radius:50%;
  background:var(--glow);
  filter:blur(46px);
  opacity:.16;
  animation:pulse 2.4s steps(1,end) infinite;
  z-index:0;
}
.featured-img{position:relative;z-index:1;width:560px;height:560px}
@keyframes pulse{0%{opacity:.10}50%{opacity:.30}}

.plate{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--display);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;padding:9px 14px;
}

/* ---------- console ---------- */
.console{
  background:var(--ink);color:var(--paper);
  width:560px;min-height:560px;
  padding:26px 28px 22px;
  display:flex;flex-direction:column;gap:18px;
}
.counter{display:flex;flex-direction:column;gap:10px}
.counter-row{display:block}
.count-svg{display:block;width:100%;height:76px;color:var(--paper)}
.bar{height:4px;background:#33333f;display:block;width:100%}
.bar>i{display:block;height:100%;width:0;background:var(--glow);transition:width .3s linear}
.price-line{
  margin:0;font-family:var(--display);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:#c9c9d2;
}

.hunt{
  display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:14px;
  border-top:2px solid #26262e;border-bottom:2px solid #26262e;padding:12px 0;
}
.hunt[hidden]{display:none}
.hunt-img{width:72px;height:72px}
.hunt-text{min-width:0}
.hunt-label{margin:0;font-family:var(--display);font-size:11px;letter-spacing:.2em;color:#8b8b98}
.hunt-name{margin:2px 0 0;font-family:var(--display);font-size:19px;letter-spacing:.04em;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hunt-away{margin:0;font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:.06em;color:var(--glow);white-space:nowrap}

.qty{display:grid;grid-template-columns:56px 1fr 56px 96px;gap:8px;height:56px}
.qty-btn,.qty-max,.qty-value{
  font-family:var(--display);border:2px solid var(--paper);background:transparent;color:var(--paper);
  height:56px;font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.qty-btn,.qty-max{cursor:pointer}
.qty-max{font-size:15px;letter-spacing:.14em}
.qty-btn:hover,.qty-max:hover{background:var(--paper);color:var(--ink)}
.qty-btn[disabled]{opacity:.35;cursor:not-allowed}
.qty-btn[disabled]:hover{background:transparent;color:var(--paper)}
.qty-value{font-size:26px}

.due{margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-family:var(--display)}
.due-label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8b8b98}
.due-value{font-size:20px;font-weight:700}

.primary{
  height:72px;width:100%;border:0;cursor:pointer;
  background:var(--paper);color:var(--ink);
  font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:.1em;
}
.primary:hover{background:#e3e3ea}
.primary[disabled]{background:#3a3a44;color:#9a9aa6;cursor:not-allowed}
.reach{
  height:56px;width:100%;border:0;cursor:pointer;margin-top:-6px;
  background:var(--glow);color:var(--ink);
  font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.08em;
}
.status{
  margin:0;font-family:var(--display);font-size:12.5px;line-height:1.5;
  letter-spacing:.04em;color:#c9c9d2;min-height:1.5em;
}
.status a{color:var(--glow)}
.status.bad{color:#ff8f8f}
.status.stale{color:#ffd166}
.mints{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.mints img{width:44px;height:44px}

/* ---------- moving strip ---------- */
.strip{overflow:hidden;height:76px;background:var(--ink)}
.strip-track{display:flex;height:76px;width:max-content;transform:translateX(0)}
.strip-track img{width:76px;height:76px;flex:0 0 76px}

/* ---------- sections ---------- */
.h{
  font-family:var(--display);font-size:15px;letter-spacing:.3em;text-transform:uppercase;
  margin:0 0 20px;
}
.seven,.rules{padding:44px var(--gut)}
.seven-row{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.seven-row li{background:var(--ink);color:var(--paper);padding:10px}
.seven-row img{width:100%;height:auto;aspect-ratio:1}
.seven-id{font-family:var(--display);font-size:13px;font-weight:700;margin:9px 0 0;letter-spacing:.06em}
.seven-name{font-family:var(--display);font-size:11.5px;margin:2px 0 0;color:#c9c9d2;letter-spacing:.06em}
.seven-state{font-family:var(--display);font-size:11px;margin:6px 0 0;letter-spacing:.1em;color:#8b8b98}
.seven-state.caught{color:var(--glow)}
.seven-note{margin:0 0 8px;max-width:78ch;font-size:15px}

.rule-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rule-list li{font-size:15px;max-width:86ch}
.rule-list b{font-family:var(--display);margin-right:10px;letter-spacing:.1em}

.wall-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0;background:var(--ink)}
.wall-grid img{width:100%;height:auto;aspect-ratio:1}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--paper);padding:40px var(--gut) 48px}
.foot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 32px;margin:0 0 24px}
.foot-grid dt{font-family:var(--display);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#8b8b98}
.foot-grid dd{margin:6px 0 0;font-size:14px;overflow-wrap:anywhere}
.foot-grid dd a{word-break:break-all}
.foot-grid a{color:var(--paper)}
.verified{display:inline-block;margin-left:8px;font-family:var(--display);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8b8b98;word-break:normal}
.foot-note{margin:0;font-size:13px;color:#8b8b98;max-width:80ch}

/* ---------- narrow ---------- */
@media (max-width:980px){
  :root{--gut:16px}
  .stage{grid-template-columns:1fr;gap:20px;padding:4px var(--gut) 14px}
  .console{order:-1;width:100%;min-height:0;padding:20px 18px}
  .featured{width:100%}
  .featured-frame,.featured-img{width:320px;height:320px;max-width:100%}
  .count-svg{height:58px}
  .qty{grid-template-columns:52px 1fr 52px 80px;height:52px}
  .qty-btn,.qty-max,.qty-value{height:52px}
  .seven-row{grid-template-columns:repeat(2,1fr)}
  .wall-grid{grid-template-columns:repeat(6,1fr)}
  .foot-grid{grid-template-columns:1fr}
  .topbar-note{font-size:11px;letter-spacing:.08em;text-align:right}
  .wordmark-svg{height:18px}
  .strip,.strip-track,.strip-track img{height:60px}
  .strip-track img{flex-basis:60px;width:60px}
  .seven,.rules{padding:32px var(--gut)}
}

@media (prefers-reduced-motion:reduce){
  .featured-frame::before{animation:none;opacity:.18}
  .strip-track{transform:none !important}
  .bar>i{transition:none}
}