:root {
  --s: 1;
  --bg: #0d1420;
  --panel: rgba(14, 22, 30, 0.62);
  --panel-b: rgba(180, 210, 230, 0.22);
  --txt: #eaf2f6;
  --dim: #a9bccb;
  --accent: #ffd166;
  --hot: #ff7a5c;

  --c-common: #cfd8cf;   --c-common2: #6d7a6a;
  --c-uncommon: #9fe0a8; --c-uncommon2: #2f6b3c;
  --c-rare: #8fc8f5;     --c-rare2: #245d92;
  --c-epic: #d6a2f2;     --c-epic2: #6a2f8f;
  --c-legendary: #ffd166;--c-legendary2: #946112;
  --c-ancient: #7ff0dd;  --c-ancient2: #146b60;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--txt);
  font-family: ui-monospace, "SF Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  -webkit-font-smoothing: antialiased;
}
body { display: grid; place-items: center; }

.stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  max-width: 100vw;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0d1420;
  box-shadow: 0 calc(6px * var(--s)) calc(40px * var(--s)) rgba(0, 0, 0, 0.55);
}

#scene {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: pointer;
  touch-action: manipulation;
}

.hud { position: absolute; inset: 0; pointer-events: none; }
.hud > * { pointer-events: none; }

.panel {
  position: absolute;
  background: var(--panel);
  border: calc(1px * var(--s)) solid var(--panel-b);
  border-radius: calc(6px * var(--s));
  padding: calc(8px * var(--s));
  backdrop-filter: blur(2px);
  font-size: calc(12px * var(--s));
  line-height: 1.45;
}
.tl { left: calc(14px * var(--s)); top: calc(12px * var(--s)); width: calc(300px * var(--s)); }
.tr { right: calc(14px * var(--s)); top: calc(12px * var(--s)); width: calc(212px * var(--s)); }
.br { right: calc(14px * var(--s)); bottom: calc(12px * var(--s)); width: calc(262px * var(--s)); }

.title {
  font-size: calc(13px * var(--s));
  letter-spacing: calc(2px * var(--s));
  color: var(--accent);
  margin-bottom: calc(4px * var(--s));
}
.status { font-size: calc(13px * var(--s)); min-height: calc(18px * var(--s)); }
.status.hot { color: var(--hot); font-weight: 700; }
.hint { color: var(--dim); font-size: calc(11px * var(--s)); margin-top: calc(4px * var(--s)); }
.hint b { color: var(--txt); }
.tally { color: var(--dim); font-size: calc(11px * var(--s)); margin-top: calc(5px * var(--s)); }

.phead {
  font-size: calc(11px * var(--s));
  letter-spacing: calc(1px * var(--s));
  color: var(--accent);
  margin-bottom: calc(6px * var(--s));
  display: flex; align-items: center; justify-content: space-between;
}
.phead .sub { color: var(--dim); letter-spacing: 0; }
#legendToggle, #soundBtn { pointer-events: auto; }
#legendToggle {
  font: inherit; font-size: calc(10px * var(--s));
  background: rgba(255, 255, 255, 0.10);
  color: var(--txt);
  border: calc(1px * var(--s)) solid var(--panel-b);
  border-radius: calc(3px * var(--s));
  padding: 0 calc(5px * var(--s));
  cursor: pointer;
}
.sum { color: var(--dim); font-size: calc(10px * var(--s)); margin-top: calc(6px * var(--s)); }

.lrow {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: calc(6px * var(--s));
  font-size: calc(11px * var(--s));
}
.lrow .pct { color: var(--txt); font-variant-numeric: tabular-nums; }
.lrow .win { color: var(--dim); font-variant-numeric: tabular-nums; }

/* ---- rarity badges: shape + pips + word, so tier never relies on hue alone */
.badge, .rw {
  display: inline-block;
  font-size: calc(10px * var(--s));
  font-weight: 700;
  letter-spacing: calc(0.6px * var(--s));
  text-transform: uppercase;
  padding: calc(2px * var(--s)) calc(6px * var(--s));
  color: #10161c;
  white-space: nowrap;
}
.sh-slab   { border-radius: calc(3px * var(--s)); }
.sh-notch  { clip-path: polygon(6% 0, 100% 0, 100% 70%, 92% 100%, 0 100%, 0 30%); }
.sh-hex    { clip-path: polygon(14% 0, 86% 0, 100% 50%, 86% 100%, 14% 100%, 0 50%); padding: calc(2px * var(--s)) calc(10px * var(--s)); }
.sh-ribbon { clip-path: polygon(0 0, 100% 0, 100% 100%, 88% 78%, 76% 100%, 0 100%); }
.sh-star   { clip-path: polygon(8% 0, 92% 0, 100% 34%, 90% 100%, 50% 80%, 10% 100%, 0 34%); padding: calc(3px * var(--s)) calc(9px * var(--s)); }
.sh-sigil  { clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%); padding: calc(3px * var(--s)) calc(10px * var(--s)); }

.b-common    { background: var(--c-common); }
.b-uncommon  { background: var(--c-uncommon); }
.b-rare      { background: var(--c-rare); }
.b-epic      { background: var(--c-epic); }
.b-legendary { background: var(--c-legendary); }
.b-ancient   { background: var(--c-ancient); box-shadow: 0 0 calc(8px * var(--s)) var(--c-ancient); }

.pips { display: inline-flex; gap: calc(3px * var(--s)); align-items: center; }
.pips i {
  width: calc(4px * var(--s)); height: calc(4px * var(--s));
  display: block; background: currentColor;
}
.lrow .pips { color: var(--dim); }

/* ---- catch log --------------------------------------------------------- */
#log { list-style: none; margin: 0; padding: 0; }
#log .entry {
  display: grid;
  grid-template-columns: calc(48px * var(--s)) 1fr auto;
  align-items: center;
  gap: calc(6px * var(--s));
  padding: calc(2px * var(--s)) 0;
  border-top: calc(1px * var(--s)) solid rgba(255, 255, 255, 0.07);
}
#log .entry:first-child { border-top: 0; }
#log .thumb {
  width: calc(48px * var(--s)); height: calc(26px * var(--s));
  image-rendering: pixelated;
  background: rgba(0, 0, 0, 0.18);
  border-radius: calc(3px * var(--s));
}
#log .meta { display: flex; flex-direction: column; min-width: 0; }
#log .meta b { font-size: calc(11px * var(--s)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#log .rw { font-size: calc(9px * var(--s)); margin-top: calc(2px * var(--s)); padding: 0 calc(4px * var(--s)); align-self: flex-start; }
#log .cm { font-size: calc(10px * var(--s)); color: var(--dim); font-variant-numeric: tabular-nums; }
#log .r-ancient .thumb, #log .r-legendary .thumb { box-shadow: 0 0 calc(7px * var(--s)) rgba(255, 240, 170, 0.55); }
.empty { display: none; color: var(--dim); font-size: calc(11px * var(--s)); }
#log:empty + .empty { display: block; }

/* ---- bottom controls --------------------------------------------------- */
.bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px * var(--s));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6px * var(--s));
  pointer-events: auto;
}
.bitebar {
  width: calc(240px * var(--s));
  height: calc(6px * var(--s));
  background: rgba(10, 16, 24, 0.55);
  border: calc(1px * var(--s)) solid var(--panel-b);
  border-radius: calc(3px * var(--s));
  overflow: hidden;
}
.bitebar #biteFill { height: 100%; width: 0%; background: var(--dim); }
.bitebar.on #biteFill { background: var(--hot); }
.bitebar.wait #biteFill { background: rgba(180, 210, 230, 0.45); }

.btnrow { display: flex; gap: calc(8px * var(--s)); }
.btn {
  pointer-events: auto;
  font: inherit;
  font-size: calc(13px * var(--s));
  font-weight: 700;
  letter-spacing: calc(0.6px * var(--s));
  color: #10161c;
  background: var(--accent);
  border: 0;
  border-radius: calc(5px * var(--s));
  padding: calc(7px * var(--s)) calc(20px * var(--s));
  cursor: pointer;
  box-shadow: 0 calc(3px * var(--s)) 0 rgba(0, 0, 0, 0.45);
}
.btn:active { transform: translateY(calc(2px * var(--s))); box-shadow: none; }
.btn:not(.pressable) { background: #7c8b98; color: #16202a; }
.btn.hot { background: var(--hot); color: #24100b; animation: pulse 0.45s infinite alternate; }
.btn.ghost {
  background: transparent;
  color: var(--dim);
  border: calc(1px * var(--s)) solid var(--panel-b);
  box-shadow: none;
  font-weight: 400;
  font-size: calc(11px * var(--s));
  padding: calc(5px * var(--s)) calc(10px * var(--s));
}
@keyframes pulse { from { filter: brightness(1); } to { filter: brightness(1.35); } }

/* ---- toast ------------------------------------------------------------- */
.toast {
  position: absolute;
  left: 50%;
  transform: translate(-50%, calc(8px * var(--s)));
  bottom: calc(76px * var(--s));
  font-size: calc(12px * var(--s));
  padding: calc(5px * var(--s)) calc(12px * var(--s));
  background: var(--panel);
  border: calc(1px * var(--s)) solid var(--panel-b);
  border-radius: calc(4px * var(--s));
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { color: #ffc0ad; }
.toast.muted { color: var(--dim); }

/* ---- reveal card ------------------------------------------------------- */
.reveal {
  position: absolute;
  left: calc(18px * var(--s));
  top: 50%;
  transform: translateY(-50%) scale(0.94);
  width: calc(330px * var(--s));
  background: rgba(12, 20, 28, 0.78);
  border: calc(1px * var(--s)) solid var(--panel-b);
  border-radius: calc(8px * var(--s));
  padding: calc(10px * var(--s)) calc(12px * var(--s));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  overflow: hidden;
}
.reveal.show { opacity: 1; transform: translateY(-50%) scale(1); }
.rbody { display: grid; grid-template-columns: calc(192px * var(--s)) 1fr; gap: calc(10px * var(--s)); align-items: center; }
#revealCanvas {
  width: calc(192px * var(--s));
  height: calc(104px * var(--s));
  image-rendering: pixelated;
  background: radial-gradient(circle at 50% 45%, rgba(120, 190, 220, 0.20), rgba(6, 12, 18, 0.35));
  border-radius: calc(6px * var(--s));
}
.rlab { font-size: calc(10px * var(--s)); color: var(--dim); letter-spacing: calc(1px * var(--s)); text-transform: uppercase; }
.rname { font-size: calc(16px * var(--s)); font-weight: 700; margin: calc(2px * var(--s)) 0 calc(6px * var(--s)); }
.reveal .rw { font-size: calc(11px * var(--s)); }
.rrow { display: flex; align-items: center; gap: calc(8px * var(--s)); margin-top: calc(8px * var(--s)); color: var(--dim); font-size: calc(11px * var(--s)); }
.rhint { margin-top: calc(8px * var(--s)); font-size: calc(10px * var(--s)); color: var(--dim); opacity: 0; transition: opacity 0.3s; }

.r-common    .rname { color: var(--c-common); }
.r-uncommon  .rname { color: var(--c-uncommon); }
.r-rare      .rname { color: var(--c-rare); }
.r-epic      .rname { color: var(--c-epic); }
.r-legendary .rname { color: var(--c-legendary); }
.r-ancient   .rname { color: var(--c-ancient); }
.r-legendary { border-color: rgba(255, 209, 102, 0.55); box-shadow: 0 0 calc(22px * var(--s)) rgba(255, 209, 102, 0.22); }
.r-ancient   { border-color: rgba(127, 240, 221, 0.6); box-shadow: 0 0 calc(26px * var(--s)) rgba(127, 240, 221, 0.26); }
.r-ancient .rbody { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-3px * var(--s))); } }

.rays {
  position: absolute;
  inset: -40% -20%;
  opacity: 0;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 240, 190, 0.16) 0deg 6deg,
    rgba(255, 240, 190, 0) 6deg 22deg
  );
  animation: spin 14s linear infinite;
  pointer-events: none;
}
.rays.on { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

/* legend collapse (H) - the toggle itself stays visible */
.legend-hidden #legendBody,
.legend-hidden #legendSum { display: none; }
#legendToggle { transition: background 0.2s; }
.legend-hidden #legendToggle { background: rgba(255, 255, 255, 0.28); }

/* ---- purse & tackle shop ------------------------------------------------ */
.purse {
  color: var(--accent);
  font-size: calc(11px * var(--s));
  margin-top: calc(5px * var(--s));
  font-variant-numeric: tabular-nums;
}
.purse .rodname { color: var(--txt); }
.bl { left: calc(14px * var(--s)); bottom: calc(12px * var(--s)); width: calc(300px * var(--s)); }
.shop { display: none; }
.shop.on { display: block; }
.shop-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(3px * var(--s)) calc(6px * var(--s));
  align-items: center;
  padding: calc(4px * var(--s)) calc(3px * var(--s));
  border-top: calc(1px * var(--s)) solid rgba(180, 210, 230, 0.14);
}
.shop-row:first-of-type { border-top: 0; }
.shop-row.eq { background: rgba(255, 209, 102, 0.09); }
.sline { display: flex; align-items: baseline; gap: calc(6px * var(--s)); }
.sname { font-size: calc(11px * var(--s)); font-weight: 700; }
.sprice { font-size: calc(9px * var(--s)); color: var(--accent); font-variant-numeric: tabular-nums; }
.sprice.owned { color: var(--dim); }
.lvl { font-size: calc(9px * var(--s)); color: var(--c-ancient); font-variant-numeric: tabular-nums; }
.soods { display: flex; gap: calc(2px * var(--s)); }
.ocell {
  width: calc(18px * var(--s));
  text-align: center;
  font-size: calc(9px * var(--s));
  line-height: 1.35;
  color: #10161c;
  border-radius: calc(2px * var(--s));
  font-variant-numeric: tabular-nums;
}
.sbtns {
  display: flex;
  align-items: center;
  gap: calc(4px * var(--s));
  grid-row: span 2;
}
.sbtn {
  pointer-events: auto;
  font: inherit;
  font-size: calc(10px * var(--s));
  font-weight: 700;
  color: #10161c;
  background: var(--accent);
  border: 0;
  border-radius: calc(4px * var(--s));
  padding: calc(3px * var(--s)) calc(8px * var(--s));
  cursor: pointer;
}
.sbtn.locked { background: #7c8b98; color: #16202a; }
.sbtn.eqd { background: transparent; color: var(--c-ancient); border: calc(1px * var(--s)) solid var(--panel-b); cursor: default; }
.ubtn {
  pointer-events: auto;
  font: inherit;
  font-size: calc(10px * var(--s));
  font-weight: 700;
  color: #10161c;
  background: var(--accent);
  border: 0;
  border-radius: calc(4px * var(--s));
  padding: calc(3px * var(--s)) calc(6px * var(--s));
  cursor: pointer;
}
.ubtn.locked { background: #7c8b98; color: #16202a; cursor: default; }
.shopfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(6px * var(--s));
  margin-top: calc(6px * var(--s));
  font-size: calc(9px * var(--s));
  color: var(--dim);
}
#shopBtn, #shopReset, #shopPanel .sbtn, #shopPanel .ubtn { pointer-events: auto; }
#shopReset { font-size: calc(9px * var(--s)); padding: calc(3px * var(--s)) calc(7px * var(--s)); }
.rcoins {
  margin-top: calc(6px * var(--s));
  color: var(--accent);
  font-size: calc(12px * var(--s));
  font-weight: 700;
}
.toast.coin { color: var(--accent); }

@media (max-width: 700px) {
  .hint { display: none; }
}