/* Pewterage — an ice-white neon sign hung on a pewter wall. Mid-tone ground, thin glowing tube strokes, one cool accent. */
:root {
  --wall: #454d5c;          /* pewter */
  --wall-deep: #3a414e;     /* the card faces */
  --wall-line: #59627233;
  --ink: #f3f7fb;
  --ink-soft: #c9d3df;
  --ink-mute: #98a4b3;
  --tube: #eaf7ff;          /* the neon tube itself */
  --glow: #9adcff;          /* its halo */
  --glow-deep: #5fb8ec;
  --warm: #ffd18a;          /* one warm mark for a closed / negative figure */
  --display: "Comfortaa", system-ui, sans-serif;
  --body: "Nunito Sans", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --neon: 0 0 2px var(--tube), 0 0 8px var(--glow), 0 0 22px rgba(154, 220, 255, .45);
  --neon-soft: 0 0 6px rgba(154, 220, 255, .35);
  --gutter: 18px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--wall); }
body {
  min-height: 100vh; background: var(--wall) radial-gradient(ellipse 80% 40% at 50% 0%, rgba(154, 220, 255, .10), transparent 70%);
  color: var(--ink); font: 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--glow); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
code, .num { font-family: var(--mono); }
img { display: block; }

/* ---------- the hanging tag ---------- */
.hangtag {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px var(--gutter) 0; height: 44px;
  font: 600 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.hangtag img { width: 22px; height: 22px; border-radius: 50%; box-shadow: var(--neon-soft); }
.hangtag i { font-style: normal; color: var(--ink-mute); letter-spacing: .06em; text-transform: none; margin-left: auto; font-weight: 400; }

/* ---------- the sign ---------- */
.sign {
  margin: 0; padding: 22px var(--gutter) 22px; font: 700 clamp(30px, 8.6vw, 44px)/1.12 var(--display); letter-spacing: -.01em;
  color: var(--tube); text-shadow: var(--neon); max-width: 720px;
}
.tube-dim { color: var(--glow); opacity: .92; animation: flicker 9s infinite; }
@keyframes flicker {
  0%, 92%, 100% { opacity: .92; } 93% { opacity: .55; } 94% { opacity: .92; } 96% { opacity: .7; } 97% { opacity: .92; }
}

/* ---------- the hallmark (sticky CA strip) ---------- */
.hallmark {
  position: sticky; top: 0; z-index: 30;
  margin: 0 var(--gutter); padding: 10px 14px 11px; border-radius: 14px;
  background: rgba(58, 65, 78, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--tube); box-shadow: var(--neon-soft), inset 0 0 0 1px rgba(154, 220, 255, .18);
}
.hm-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hm-tick { font: 700 13px/1 var(--display); color: var(--tube); text-shadow: var(--neon-soft); letter-spacing: .02em; white-space: nowrap; }
.hm-word { font-size: 12px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-copy {
  margin-left: auto; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--tube); background: transparent;
  color: var(--tube); font: 700 12px/1 var(--display); letter-spacing: .04em; text-shadow: var(--neon-soft); box-shadow: var(--neon-soft);
  transition: background .15s, color .15s;
}
.hm-copy:hover { background: var(--tube); color: var(--wall-deep); text-shadow: none; }
.hm-copy[data-done="1"] { background: var(--glow); border-color: var(--glow); color: var(--wall-deep); text-shadow: none; }
.hm-gmgn { font-size: 12px; color: var(--ink-soft); padding: 6px 4px; }
.hm-addr {
  display: block; margin-top: 7px; font: 500 12.5px/1.35 var(--mono); color: var(--ink); letter-spacing: .01em;
  overflow-wrap: anywhere; word-break: break-all; user-select: all; -webkit-user-select: all;
}
.hm-addr[data-live="0"] { color: var(--ink-mute); user-select: none; }

/* ---------- the wall (main) ---------- */
.wall { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px var(--gutter) 30px; max-width: 1160px; margin: 0 auto; }
.wall > section, .wall > aside { min-width: 0; }
.stand { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.stand h2 { margin: 0; font: 700 15px/1.2 var(--display); color: var(--tube); text-shadow: var(--neon-soft); letter-spacing: .02em; }
.stand em { font-style: normal; font-size: 12px; color: var(--ink-mute); text-align: right; }
.hush { color: var(--ink-mute); font-size: 13.5px; margin: 6px 0 0; }
.face { background: var(--wall-deep); border-radius: 18px; padding: 16px; border: 1px solid rgba(154, 220, 255, .12); }

/* ---------- the pour card ---------- */
.pourcard .face { position: relative; }
.pourgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 14px; }
.pourgrid div { background: rgba(69, 77, 92, .7); border-radius: 12px; padding: 10px 10px 9px; }
.pourgrid dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.pourgrid dd { margin: 3px 0 0; font: 500 20px/1.1 var(--mono); color: var(--ink); }
.pourgrid dd small { font-size: 12px; color: var(--ink-mute); margin-left: 3px; }
.pourbtn {
  display: block; width: 100%; padding: 16px 18px; border-radius: 999px; border: 2px solid var(--tube); background: transparent;
  color: var(--tube); font: 700 20px/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
  text-shadow: var(--neon); box-shadow: var(--neon-soft), inset 0 0 14px rgba(154, 220, 255, .12); transition: transform .1s, background .15s, color .15s;
}
.pourbtn:hover:not([disabled]) { background: var(--tube); color: var(--wall-deep); text-shadow: none; }
.pourbtn:active:not([disabled]) { transform: scale(.985); }
.pourbtn[disabled] { opacity: .45; cursor: not-allowed; text-shadow: none; box-shadow: none; border-style: dashed; }
.pourfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--ink-mute); flex-wrap: wrap; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--glow); font: 600 13px/1 var(--body); text-decoration: underline dotted; }
.linkbtn[data-on="1"] { color: var(--ink); text-decoration: none; font-family: var(--mono); }
.pourwhy { font-size: 13px; color: var(--ink-soft); margin: 0 0 10px; }

/* ---------- the tankard ---------- */
.mugbox .face { padding: 18px 16px 14px; }
.mugwrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.tankard { position: relative; width: 100%; max-width: 250px; height: 300px; margin: 0 auto; }
.mug {
  position: absolute; left: 0; top: 0; width: 80%; height: 100%; border: 2px solid var(--tube); border-radius: 14px 14px 22px 22px;
  box-shadow: var(--neon), inset 0 0 18px rgba(154, 220, 255, .12); overflow: hidden; background: rgba(58, 65, 78, .55);
}
.mughandle {
  position: absolute; right: 0; top: 18%; width: 30%; height: 52%; border: 2px solid var(--tube); border-left: 0;
  border-radius: 0 60px 60px 0; box-shadow: var(--neon); z-index: -1;
}
.mugfill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%; transition: height .9s cubic-bezier(.2, .8, .2, 1);
  background: linear-gradient(to top, rgba(154, 220, 255, .28), rgba(154, 220, 255, .08));
  border-top: 1.5px solid var(--glow); box-shadow: 0 -2px 12px rgba(154, 220, 255, .35);
}
.gradation { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid rgba(234, 247, 255, .55); }
.gradation[data-new="1"] { border-color: var(--tube); box-shadow: 0 0 6px var(--glow); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.mugcount { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-58%); text-align: center; pointer-events: none; }
.mugcount b { display: block; font: 500 64px/1 var(--mono); color: var(--tube); text-shadow: var(--neon); }
.mugcount span { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; }
.mugrim { position: absolute; left: 0; right: 20%; top: 12px; z-index: 2; text-align: center; font: 500 12px/1 var(--mono); color: var(--ink-soft); letter-spacing: .06em; }
.mugdial { display: grid; gap: 10px; min-width: 118px; }
.mugdial div { border-left: 2px solid var(--glow-deep); padding-left: 10px; }
.mugdial dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.mugdial dd { margin: 2px 0 0; font: 500 19px/1.1 var(--mono); color: var(--ink); }
.mugdial dd small { font-size: 11.5px; color: var(--ink-mute); }
.sealnote { margin: 12px 0 0; font-size: 13px; color: var(--ink-soft); }
.sealnote b { color: var(--tube); font-weight: 600; }

/* ---------- seats + tape (the side) ---------- */
.seatside .face + .face { margin-top: 14px; }
.seatrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--wall-line); font-size: 13.5px; }
.seatrow:first-of-type { border-top: 0; }
.seatrow i { font: 500 15px/1 var(--mono); color: var(--tube); text-shadow: var(--neon-soft); font-style: normal; }
.seatrow[data-under="1"] i { color: var(--ink-mute); text-shadow: none; }
.seatrow em { font-style: normal; color: var(--ink-soft); font-family: var(--mono); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seatrow em small { color: var(--ink-mute); margin-left: 6px; font-family: var(--body); }
.seatrow u { text-decoration: none; font: 500 13.5px/1 var(--mono); color: var(--glow); white-space: nowrap; }
.seatrow u[data-neg="1"] { color: var(--warm); }
.tapeblk { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--wall-line); font-size: 13px; }
.tapeblk:first-of-type { border-top: 0; }
.tapeblk i { font: 500 13px/1 var(--mono); color: var(--tube); font-style: normal; }
.tapeblk[data-k="closed"] i { color: var(--warm); }
.tapeblk em { font-style: normal; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tapeblk u { text-decoration: none; color: var(--ink-mute); font-size: 12px; white-space: nowrap; }
.primer { margin: 0; padding: 0 0 0 16px; color: var(--ink-soft); font-size: 13.5px; }
.primer li { margin: 5px 0; }
.primer b { color: var(--ink); font-weight: 600; }

/* ---------- how it pays ---------- */
.howgrid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.howgrid article { background: var(--wall-deep); border-radius: 14px; padding: 14px 16px; border: 1px solid rgba(154, 220, 255, .10); }
.howgrid h3 { margin: 0 0 6px; font: 700 14px/1.2 var(--display); color: var(--tube); text-shadow: var(--neon-soft); }
.howgrid p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.splitbar { display: flex; gap: 3px; margin: 10px 0 4px; height: 26px; }
.splitbar span { display: grid; place-items: center; border-radius: 6px; background: rgba(154, 220, 255, .18); border: 1px solid rgba(154, 220, 255, .35); font: 500 11.5px/1 var(--mono); color: var(--ink); }
.splitbar span:first-child { background: rgba(154, 220, 255, .45); box-shadow: var(--neon-soft); }

/* ---------- closed tankards ---------- */
.closedrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--wall-line); font-size: 13.5px; }
.closedrow:first-of-type { border-top: 0; }
.closedrow b { font: 500 15px/1 var(--mono); color: var(--tube); }
.closedrow em { font-style: normal; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.closedrow u { text-decoration: none; font: 500 13px/1 var(--mono); color: var(--ink); white-space: nowrap; }
.drawbtn { padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--glow); background: transparent; color: var(--glow); font: 700 12px/1 var(--display); }
.drawbtn:hover { background: var(--glow); color: var(--wall-deep); }
.drawbtn[disabled] { opacity: .5; cursor: default; }

/* ---------- the dregs (footer) ---------- */
.dregs { padding: 10px var(--gutter) 44px; max-width: 1160px; margin: 0 auto; color: var(--ink-mute); font-size: 12.5px; }
.dregs div { padding: 5px 0; overflow-wrap: anywhere; }
.dregs code { color: var(--ink-soft); font-size: 12px; }
.dregs a { color: var(--ink-soft); }

/* ---------- the sheet (modal) ---------- */
#sheet { position: fixed; inset: 0; z-index: 60; background: rgba(30, 34, 42, .72); display: grid; place-items: end center; padding: 0; }
#sheet[hidden] { display: none; }
.sheetcard { width: 100%; max-width: 520px; background: var(--wall-deep); border: 1.5px solid var(--tube); border-bottom: 0; border-radius: 20px 20px 0 0; box-shadow: var(--neon-soft); padding: 14px 18px 26px; }
.sheethead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sheethead span { font: 700 15px/1 var(--display); color: var(--tube); text-shadow: var(--neon-soft); }
.sheetshut { background: none; border: 0; color: var(--ink-soft); font-size: 22px; line-height: 1; padding: 4px 8px; }
.sheetbody p { margin: 8px 0; font-size: 14.5px; color: var(--ink-soft); }
.sheetbody b { color: var(--ink); }
.firebtn { display: block; width: 100%; margin-top: 14px; padding: 14px; border-radius: 999px; border: 2px solid var(--tube); background: var(--tube); color: var(--wall-deep); font: 700 16px/1 var(--display); letter-spacing: .06em; }
.firebtn[disabled] { opacity: .5; }
.wallets button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; margin: 6px 0; border-radius: 12px; border: 1px solid rgba(154, 220, 255, .3); background: transparent; color: var(--ink); }
.wallets img { width: 22px; height: 22px; border-radius: 6px; }
.note { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; background: var(--tube); color: var(--wall-deep); padding: 10px 16px; border-radius: 999px; font: 600 13.5px/1 var(--body); box-shadow: var(--neon); max-width: calc(100vw - 32px); }

/* ---------- widths ---------- */
@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .sign { padding: 30px var(--gutter) 26px; font-size: clamp(44px, 6vw, 60px); max-width: 900px; }
  .hangtag { padding-top: 18px; height: 52px; }
  .hallmark { padding: 12px 18px; }
  .hm-addr { font-size: 14px; margin-top: 8px; }
  .wall { gap: 26px; padding-top: 28px; }
  .face { padding: 20px; }
  .tankard { max-width: 300px; height: 360px; }
  .mugcount b { font-size: 80px; }
  .howgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  :root { --gutter: 40px; }
  .sign { font-size: clamp(52px, 4.8vw, 68px); max-width: 1000px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
  .hangtag { max-width: 1160px; margin: 0 auto; }
  .hallmark { max-width: calc(1160px - 2 * var(--gutter)); margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 12px 20px; }
  .hm-row { flex: 0 0 auto; }
  .hm-copy { margin-left: 8px; }
  .hm-addr { margin: 0 0 0 auto; font-size: 15px; word-break: normal; white-space: nowrap; }
  .wall { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr auto auto; grid-template-areas: "pour side" "mug side" "how how" "closed closed"; gap: 28px; padding-top: 34px; align-items: start; }
  .pourcard { grid-area: pour; } .mugbox { grid-area: mug; } .seatside { grid-area: side; } .howbox { grid-area: how; } .closedbox { grid-area: closed; }
  .seatside { position: sticky; top: 84px; align-self: start; }
  .tankard { max-width: 320px; height: 400px; }
  .mugwrap { gap: 28px; }
  .mugcount b { font-size: 92px; }
  .howgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pourgrid dd { font-size: 24px; }
  #sheet { place-items: center; padding: 20px; }
  .sheetcard { border-radius: 20px; border-bottom: 1.5px solid var(--tube); }
}
@media (max-width: 400px) {
  .pourgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .pourgrid dd { font-size: 17px; }
  .mugwrap { grid-template-columns: minmax(0, 1fr); }
  .mugdial { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tankard { max-width: 220px; height: 270px; }
}