/* Prism Cascade — UI chrome. by dhseadev */
:root {
  --ink: #eaf2ff;
  --ink-dim: #9fb0dd;
  --glass: rgb(16 20 60 / 0.55);
  --glass-brt: rgb(40 50 120 / 0.55);
  --line: rgb(140 170 255 / 0.25);
  --gold: #ffd257;
  --aqua: #8fe3ff;
  --rose: #ff7d9c;
  --radius: 14px;
  --font: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: #0b1035;
  user-select: none;
}
#game { position: fixed; inset: 0; display: block; cursor: crosshair; }

/* ---------------- HUD ---------------- */
#hud {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px 18px 0; gap: 12px;
  pointer-events: none;
  z-index: 5;
}
#hud > * { pointer-events: auto; }
.hud-left, .hud-right { display: flex; align-items: center; gap: 12px; }
.chip {
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 4px 18px rgb(0 0 0 / 0.3);
}
.chip.wallet b { color: var(--gold); }
.score-wrap { min-width: clamp(160px, 22vw, 320px); }
.score-line { font-size: 1.05rem; letter-spacing: 0.02em; }
.score-line b { font-size: 1.35rem; color: var(--aqua); }
.score-line span { color: var(--ink-dim); margin-left: 6px; font-size: 0.9rem; }
.bar {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: rgb(8 12 40 / 0.7);
  border: 1px solid var(--line);
  margin-top: 4px;
}
.fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #47c7ff, #7ae0ff, #9df0ff);
  border-radius: 999px;
  transition: width 200ms ease;
  box-shadow: 0 0 12px rgb(122 224 255 / 0.8);
}
.fill.over { background: linear-gradient(90deg, #ffd257, #ffe9a3); box-shadow: 0 0 14px rgb(255 210 87 / 0.9); }
.combo { color: var(--gold); font-weight: 700; text-shadow: 0 0 12px rgb(255 210 87 / 0.6); min-width: 90px; }
.hud-mid { position: absolute; left: 50%; transform: translateX(-50%); }
.timer {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--glass);
  border: 2px solid var(--line);
  backdrop-filter: blur(8px);
  font-size: 1.6rem; font-weight: 700;
  color: var(--aqua);
  box-shadow: 0 4px 18px rgb(0 0 0 / 0.35);
}
.timer.low { color: var(--rose); border-color: var(--rose); animation: pulse 0.5s infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.09); box-shadow: 0 0 22px rgb(255 125 156 / 0.7); } }
.btns { display: flex; gap: 8px; }
.btns button {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(8px);
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 120ms ease, background 150ms ease;
}
.btns button:hover { background: var(--glass-brt); transform: translateY(-2px); }
.btns button:active { transform: scale(0.94); }
.btns button:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }

/* ---------------- Panels ---------------- */
#panels { position: fixed; inset: 0; display: none; place-items: center; z-index: 10; }
#panels.open { display: grid; background: rgb(5 8 30 / 0.55); backdrop-filter: blur(4px); }
.panel {
  width: min(720px, 92vw);
  max-height: 86vh;
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgb(26 32 90 / 0.92), rgb(40 22 80 / 0.92));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 80px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(140 170 255 / 0.08) inset;
  animation: rise 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes rise { from { transform: translateY(26px) scale(0.96); opacity: 0; } }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 10px;
}
.panel-head h2 { font-size: 1.4rem; letter-spacing: 0.02em; color: var(--aqua); text-shadow: 0 0 18px rgb(143 227 255 / 0.5); }
.panel-head .x {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  font-size: 1rem; cursor: pointer;
}
.panel-head .x:hover { background: var(--glass-brt); }
.panel-body { padding: 8px 22px 22px; overflow-y: auto; }

/* Ability tree */
.wallet-line { color: var(--ink-dim); margin-bottom: 12px; }
.wallet-line b { color: var(--gold); font-size: 1.15rem; }
.tree { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.branch h3 { margin-bottom: 10px; font-size: 1.02rem; color: var(--ink); opacity: 0.9; }
.node {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  grid-template-areas: "icon name buy" "icon desc buy" "icon rank buy";
  align-items: center; column-gap: 8px;
  padding: 10px; margin-bottom: 8px;
  border-radius: 12px;
  background: rgb(10 14 44 / 0.6);
  border: 1px solid var(--line);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.node.afford { border-color: rgb(255 210 87 / 0.55); box-shadow: 0 0 14px rgb(255 210 87 / 0.15); }
.node.maxed { opacity: 0.75; border-color: rgb(143 227 255 / 0.5); }
.nicon { grid-area: icon; font-size: 1.4rem; text-align: center; }
.nname { grid-area: name; font-weight: 600; font-size: 0.95rem; }
.ndesc { grid-area: desc; font-size: 0.78rem; color: var(--ink-dim); }
.nrank { grid-area: rank; font-size: 0.7rem; color: var(--gold); letter-spacing: 2px; }
.node .buy {
  grid-area: buy;
  padding: 8px 12px; border-radius: 10px;
  border: none; cursor: pointer; font-weight: 700; font-family: var(--font);
  background: linear-gradient(180deg, #ffd257, #f0a93a); color: #4a3200;
}
.node .buy:disabled { background: rgb(80 90 140 / 0.4); color: var(--ink-dim); cursor: default; }
.node .buy:not(:disabled):hover { filter: brightness(1.1); }
.node .buy:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Endowments */
.endow-intro { color: var(--ink-dim); font-size: 0.9rem; margin-bottom: 14px; }
.endow-list { display: flex; flex-direction: column; gap: 10px; }
.endow {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  grid-template-areas: "icon name state eq" "icon desc state eq";
  align-items: center; column-gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgb(10 14 44 / 0.6);
  border: 1px solid var(--line);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.endow.avail { border-color: rgb(143 227 255 / 0.5); }
.endow.equipped { border-color: var(--gold); box-shadow: 0 0 18px rgb(255 210 87 / 0.25); }
.endow.locked { opacity: 0.5; }
.eicon { grid-area: icon; font-size: 1.7rem; text-align: center; }
.ename { grid-area: name; font-weight: 700; font-size: 0.98rem; }
.edesc { grid-area: desc; font-size: 0.8rem; color: var(--ink-dim); }
.estate { grid-area: state; font-size: 0.72rem; color: var(--gold); font-weight: 700; letter-spacing: 0.05em; }
.endow .eq { grid-area: eq; padding: 9px 14px; font-size: 0.85rem; }

/* Leaderboard */
.name-row { margin-bottom: 12px; }
.name-row label { color: var(--ink-dim); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 10px; }
.name-row input, .share-row input {
  background: rgb(8 12 40 / 0.8);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  padding: 9px 12px;
  font-family: var(--font);
  font-size: 0.95rem;
}
.name-row input:focus-visible, .share-row input:focus-visible { outline: 2px solid var(--aqua); }
table.board { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
table.board th { text-align: left; color: var(--ink-dim); font-size: 0.8rem; font-weight: 500; padding: 6px 10px; }
table.board td { padding: 9px 10px; border-top: 1px solid rgb(140 170 255 / 0.12); }
table.board tr.first td { color: var(--gold); font-weight: 700; text-shadow: 0 0 14px rgb(255 210 87 / 0.4); }
table.board .empty { color: var(--ink-dim); text-align: center; padding: 22px; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hint { margin-top: 10px; color: var(--ink-dim); font-size: 0.8rem; }
.cta {
  padding: 11px 20px; border-radius: 12px; border: none; cursor: pointer;
  font-family: var(--font); font-weight: 700; font-size: 0.98rem;
  background: linear-gradient(180deg, #63d2ff, #2f9ae0); color: #04263c;
  box-shadow: 0 6px 20px rgb(70 190 255 / 0.35);
  transition: transform 120ms ease, filter 150ms ease;
}
.cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cta:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }
.ghost {
  padding: 10px 16px; border-radius: 12px; cursor: pointer;
  font-family: var(--font); font-weight: 600; font-size: 0.9rem;
  background: transparent; border: 1px solid var(--line); color: var(--ink);
}
.ghost:hover { background: var(--glass-brt); }
.ghost:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }

/* Level map */
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; }
.lvl {
  aspect-ratio: 1; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--line); cursor: pointer;
  font-family: var(--font); font-weight: 700; font-size: 0.95rem;
  color: var(--ink); background: rgb(10 14 44 / 0.6);
  transition: transform 120ms ease, box-shadow 150ms ease;
}
.lvl .st { font-size: 0.62rem; color: var(--gold); height: 0.9em; }
.lvl.done { border-color: rgb(143 227 255 / 0.45); }
.lvl.current { border-color: var(--gold); box-shadow: 0 0 16px rgb(255 210 87 / 0.35); animation: pulse 1s infinite alternate; }
.lvl.locked { opacity: 0.35; cursor: default; }
.lvl:not(.locked):hover { transform: translateY(-2px) scale(1.05); }
.lvl:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }

/* Help + credit */
.help p { margin-bottom: 12px; line-height: 1.55; font-size: 0.96rem; }
.help .credit { color: var(--ink-dim); font-size: 0.85rem; margin-top: 18px; border-top: 1px solid rgb(140 170 255 / 0.15); padding-top: 12px; }
#credit {
  position: fixed; right: 14px; bottom: 10px;
  font-size: 0.72rem; color: rgb(190 205 255 / 0.5);
  z-index: 4; pointer-events: none;
}
#credit b { color: rgb(255 210 87 / 0.75); }

/* Round end */
.stars-row { text-align: center; font-size: 3.2rem; height: 4.2rem; }
.star { color: rgb(160 170 210 / 0.3); display: inline-block; margin: 0 8px; }
.star.lit { color: var(--gold); animation: starpop 500ms cubic-bezier(0.2, 1.4, 0.4, 1) backwards; text-shadow: 0 0 26px rgb(255 210 87 / 0.8); }
@keyframes starpop { from { transform: scale(0) rotate(-40deg); } }
.tally { max-width: 380px; margin: 6px auto 16px; }
.trow { display: flex; justify-content: space-between; padding: 7px 4px; border-bottom: 1px solid rgb(140 170 255 / 0.12); }
.trow span { color: var(--ink-dim); }
.trow.lost b { color: var(--rose); }
.trow.big b { color: var(--aqua); font-size: 1.3rem; }
.end-btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.wintext { text-align: center; margin-top: 16px; color: var(--gold); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
@media (max-width: 700px) {
  .score-wrap { min-width: 120px; }
  .timer { width: 48px; height: 48px; font-size: 1.2rem; }
  .btns button { width: 38px; height: 38px; }
}

/* ============================================================
   v2.0.0 additions — star pips, mode chip, shot counter, item bar,
   provisions shop, challenge picker, achievements, round-end cards.
   ============================================================ */

/* --- HUD extras --- */
.pips { margin-left: 8px; letter-spacing: 1px; font-size: 13px; }
.pips i { font-style: normal; color: rgb(255 255 255 / 0.22); transition: color .25s ease, text-shadow .25s ease; }
.pips i.lit { color: var(--gold); text-shadow: 0 0 10px rgb(255 210 87 / 0.65); }
.chip.mode { background: rgb(120 70 200 / 0.42); border-color: rgb(190 150 255 / 0.45); }
.chip.shots { margin-top: 6px; display: block; text-align: center; }
.chip.shots.low { background: rgb(200 60 80 / 0.45); border-color: rgb(255 140 160 / 0.5); }
.hud-mid { display: flex; flex-direction: column; align-items: center; }
#hud .btns button.danger { background: rgb(150 40 60 / 0.42); border-color: rgb(255 130 150 / 0.35); }
#hud .btns button.danger:disabled { opacity: 0.35; cursor: default; }
#hud .btns button.off { opacity: 0.45; }

/* --- item bar --- */
#itembar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 34px;
  display: flex; gap: 10px; z-index: 5;
}
#itembar .item {
  position: relative; width: 54px; height: 54px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 14px;
  backdrop-filter: blur(8px); color: var(--ink); cursor: pointer;
  font-family: var(--font); transition: transform .12s ease, border-color .12s ease;
}
#itembar .item:hover { transform: translateY(-2px); border-color: var(--aqua); }
#itembar .item.empty { opacity: 0.32; }
#itembar .item .ic { font-size: 20px; display: block; margin-top: 6px; }
#itembar .item .n { position: absolute; right: 5px; bottom: 3px; font-size: 12px; font-weight: 700; }
#itembar .item .k {
  position: absolute; left: 5px; top: 3px; font-size: 9px; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 3px;
}

/* --- panels: wide variant for maps and achievement grids --- */
.panel.wide { width: min(1060px, 94vw); }

.wallet-line .sub { display: block; font-size: 11px; color: var(--ink-dim); font-weight: 400; margin-top: 3px; }

/* --- provisions --- */
.shop { display: grid; gap: 10px; }
.wares {
  display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto;
  gap: 2px 12px; align-items: center;
  background: rgb(255 255 255 / 0.04); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
}
.wares.afford { border-color: rgb(143 227 255 / 0.4); }
.wicon { grid-row: 1 / 3; font-size: 26px; text-align: center; }
.wname { font-weight: 700; }
.wdesc { grid-column: 2; font-size: 12px; color: var(--ink-dim); }
.whave { grid-column: 3; grid-row: 2; font-size: 11px; color: var(--ink-dim); text-align: right; }
.wbuy { grid-column: 3; grid-row: 1; display: flex; gap: 6px; }
.wbuy button {
  background: rgb(80 200 255 / 0.16); border: 1px solid var(--line); color: var(--ink);
  border-radius: 10px; padding: 6px 12px; font-family: var(--font); font-weight: 700; cursor: pointer;
}
.wbuy button:disabled { opacity: 0.35; cursor: default; }
.wbuy button:not(:disabled):hover { background: rgb(80 200 255 / 0.3); }

/* --- challenge picker --- */
.chal-head { margin: 22px 0 10px; border-top: 1px solid var(--line); padding-top: 16px; }
.chal-head h3 { font-size: 16px; }
.chal-head p { font-size: 12px; color: var(--ink-dim); margin-top: 4px; max-width: 70ch; }
.chal-for { font-size: 13px; margin-bottom: 8px; }
.chal-for .warn { color: var(--rose); }
.chal-list { display: grid; gap: 8px; }
.chal {
  display: grid; grid-template-columns: 40px 150px 1fr auto auto; gap: 4px 12px; align-items: center;
  background: rgb(255 255 255 / 0.04); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px;
}
.chal.locked { opacity: 0.42; }
.cicon { font-size: 22px; text-align: center; }
.cname { font-weight: 700; }
.cdesc { font-size: 12px; color: var(--ink-dim); }
.cstars { color: var(--gold); letter-spacing: 2px; }
.cscore { grid-column: 3; font-size: 11px; color: var(--aqua); }
.chal .go { padding: 7px 14px; }

/* --- achievements --- */
.ach-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ach-rank .lbl { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-dim); }
.ach-rank b { font-size: 19px; color: var(--aqua); }
.ach-prog { flex: 1; min-width: 200px; }
.ach-prog .bar { height: 8px; border-radius: 999px; background: rgb(255 255 255 / 0.08); overflow: hidden; }
.ach-prog .fill { height: 100%; background: linear-gradient(90deg, #8fe3ff, #8f7dff, #ffd257); }
.ach-prog span { font-size: 11px; color: var(--ink-dim); }
.ach-h { margin: 18px 0 8px; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; }
.ach-h span { color: var(--ink-dim); font-size: 12px; letter-spacing: 0; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ach {
  position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px;
  background: rgb(255 255 255 / 0.03); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
  opacity: 0.55;
}
.ach.got { opacity: 1; background: rgb(255 255 255 / 0.06); }
.aicon { grid-row: 1 / 3; font-size: 22px; text-align: center; }
.aname { font-weight: 700; font-size: 13px; }
.adesc { grid-column: 2; font-size: 11px; color: var(--ink-dim); line-height: 1.35; }
.ach .mini, .wrow .mini {
  position: absolute; right: 8px; top: 8px; font-size: 10px; padding: 3px 8px;
  background: rgb(255 255 255 / 0.08); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); font-family: var(--font); cursor: pointer;
}
.ach .mini:hover, .wrow .mini:hover { background: rgb(143 227 255 / 0.25); }

/* --- round end --- */
.mode-seal {
  display: inline-block; margin-bottom: 8px; padding: 4px 12px; border-radius: 999px;
  background: rgb(120 70 200 / 0.35); border: 1px solid rgb(190 150 255 / 0.45); font-size: 12px; font-weight: 600;
}
.trow.targets b { font-size: 12px; color: var(--ink-dim); font-weight: 600; }
.won { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.won h3 { font-size: 14px; margin-bottom: 8px; }
.wrow {
  position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px;
  border-left: 3px solid var(--gold); background: rgb(255 255 255 / 0.05);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 6px;
}
.wi { grid-row: 1 / 3; font-size: 20px; text-align: center; }
.wn { font-weight: 700; font-size: 13px; }
.wd { grid-column: 2; font-size: 11px; color: var(--ink-dim); }

/* --- help link --- */
.help a { color: var(--aqua); text-decoration: none; border-bottom: 1px dotted currentColor; }
.help a:hover { color: #fff; }
#credit a { color: var(--aqua); text-decoration: none; }
#credit a:hover { text-decoration: underline; }