/* For Builder's Sake — registration.
   Theme matched to BAR NIKORI: dark forest green, cream/gold, Noto Serif JP. */
:root {
  --bg-primary: #0b0f0d;
  --bg-secondary: #0f1613;
  --bg-card: #152019;
  --bg-card-hover: #1d2e24;
  --glass: rgba(21, 32, 25, 0.7);
  --glass-light: rgba(255, 255, 255, 0.03);

  --green: #3d8a5a;
  --green-light: #5aab76;
  --green-warm: #2d6b44;
  --green-dim: rgba(61, 138, 90, 0.15);

  --cream: #e8d5b8;
  --cream-light: #f0e4d0;
  --cream-dim: rgba(232, 213, 184, 0.12);

  --red: #a63d3d;
  --red-dim: rgba(166, 61, 61, 0.15);

  --text: #f0ece4;
  --text-2: #a8a4a0;
  --muted: #6b6e6a;
  --text-accent: #e8d5b8;

  --border: rgba(61, 138, 90, 0.18);
  --border-light: rgba(232, 213, 184, 0.08);

  --grad-green: linear-gradient(135deg, #3d8a5a 0%, #2d6b44 100%);
  --grad-title: linear-gradient(135deg, #f0e4d0 0%, #e8d5b8 55%, #5aab76 100%);
  --grad-card: linear-gradient(145deg, rgba(21, 32, 25, 0.92) 0%, rgba(15, 22, 19, 0.96) 100%);

  --font-display: "Noto Serif JP", Georgia, serif;
  --font-body: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 40px rgba(61, 138, 90, 0.1);
  --shadow-button: 0 4px 16px rgba(61, 138, 90, 0.25);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background-color: var(--bg-primary);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 620px at 50% -12%, rgba(61, 138, 90, 0.12), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(232, 213, 184, 0.04), transparent 55%),
    var(--bg-primary);
}

/* ------------------------------------------------------------------ topbar */
.topbar {
  background: rgba(11, 15, 13, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  position: sticky; top: 0; z-index: 100;
}
.topbar-inner {
  max-width: 760px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.brand { display: flex; flex-direction: row; align-items: center; gap: 14px; text-decoration: none; }
.brand-emblem { height: 46px; width: auto; display: block; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.brand-logo { height: 33px; width: auto; display: block; }
.brand-series { font-size: 10.5px; color: var(--green-light); letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500; }
@media (max-width: 540px) {
  .brand { gap: 10px; }
  .brand-emblem { height: 38px; }
  .brand-logo { height: 26px; }
  .brand-series { font-size: 9px; letter-spacing: 0.12em; }
}

.seat-badge { text-align: right; line-height: 1.1; font-variant-numeric: tabular-nums; }
.seat-badge .n { font-family: var(--font-display); font-size: 23px; font-weight: 600; color: var(--green-light); transition: color 0.4s; }
.seat-badge .n.gone { color: var(--red); }
.seat-badge .lbl { display: block; font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-top: 1px; }

/* -------------------------------------------------------------------- page */
.wrap { max-width: 760px; margin: 0 auto; padding: 52px 20px 96px; }

.eyebrow { font-size: 11px; color: var(--green-light); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }
h1.title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 5.5vw, 3.1rem); line-height: 1.16;
  letter-spacing: 0.06em; margin: 10px 0 14px;
  background: var(--grad-title);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--cream);
}
.lede { font-family: var(--font-display); font-size: 18px; font-weight: 400; color: var(--text-2); margin: 0; line-height: 1.5; }

/* the emblem — reused on the wrong-word refusal */
.refusal-crest { height: 62px; width: auto; display: inline-block; opacity: 0.92; margin-bottom: 2px; }

/* ------------------------------------------------------------------- stage */
.stage {
  background: var(--grad-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card), var(--shadow-glow);
  padding: 34px 36px;
  margin-top: 30px;
}
@media (max-width: 540px) { .stage { padding: 24px 20px; border-radius: var(--radius-lg); } .wrap { padding-top: 34px; } }

.step-label { font-size: 10.5px; color: var(--green-light); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }
.step-title { font-family: var(--font-display); font-size: 23px; font-weight: 600; color: var(--text); margin: 8px 0 6px; line-height: 1.25; }
.step-sub { color: var(--text-2); font-size: 14px; margin: 0 0 24px; }

/* ------------------------------------------------------------------ fields */
.field { margin: 0 0 18px; }
.field > label { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--cream); margin-bottom: 7px; }
.field .hint { font-size: 12px; color: var(--muted); margin: -3px 0 9px; }
.input, .textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: 15px; font-family: inherit;
  background: var(--glass-light); color: var(--text);
  transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.textarea { min-height: 100px; resize: vertical; font-family: var(--font-display); line-height: 1.55; }
.input:focus, .textarea:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-dim); background: var(--bg-secondary);
}
.input.code {
  letter-spacing: 0.32em; text-transform: uppercase; text-align: center;
  font-family: var(--font-display); font-size: 20px; padding: 15px; color: var(--cream);
}

/* ----------------------------------------------------------------- buttons */
.btn {
  appearance: none; border: 0; cursor: pointer; font-family: inherit;
  background: var(--grad-green); color: #fff;
  padding: 13px 24px; border-radius: var(--radius-md);
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  box-shadow: var(--shadow-button);
  transition: filter var(--ease), transform 0.05s var(--ease), box-shadow var(--ease);
}
.btn:hover { filter: brightness(1.12); box-shadow: 0 6px 22px rgba(61, 138, 90, 0.34); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; cursor: default; }
.btn-row { display: flex; align-items: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.btn-note { font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------- the flight of three ochoko */
.flight { display: flex; gap: 18px; align-items: flex-end; justify-content: center; margin: 4px 0 28px; }
.cup { width: 54px; text-align: center; }
.cup-vessel {
  position: relative; width: 54px; height: 44px; margin: 0 auto;
  border: 1.5px solid var(--border); border-top: none;
  border-radius: 6px 6px 22px 22px / 6px 6px 30px 30px;
  background: var(--glass-light);
  overflow: hidden; transition: border-color var(--ease), box-shadow var(--ease);
}
.cup-liquid {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(var(--cream-light), var(--cream));
  transition: height 0.7s var(--ease);
}
.cup-liquid::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255, 255, 255, 0.5); }
.cup.full .cup-liquid { height: 78%; }
.cup.full .cup-vessel { border-color: rgba(232, 213, 184, 0.5); }
.cup.active .cup-vessel { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-dim), var(--shadow-glow); }
.cup.active .cup-liquid { height: 30%; background: linear-gradient(var(--green-light), var(--green)); animation: lap 2.4s ease-in-out infinite; }
@keyframes lap { 0%, 100% { height: 26%; } 50% { height: 34%; } }
.cup-name { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.cup.full .cup-name { color: var(--cream); }
.cup.active .cup-name { color: var(--green-light); font-weight: 600; }

/* ---------------------------------------------------------------- messages */
.error { background: var(--red-dim); border: 1px solid rgba(166, 61, 61, 0.4); color: #e0a3a3; border-radius: var(--radius-md); padding: 11px 15px; font-size: 13.5px; margin: 0 0 18px; }
.refusal { text-align: center; padding: 14px 6px 4px; }
.refusal .mark { font-family: var(--font-display); font-size: 44px; color: var(--cream); opacity: 0.7; }
.refusal p { font-family: var(--font-display); font-size: 18px; color: var(--text-2); margin: 14px auto 20px; max-width: 32ch; line-height: 1.5; }

/* ---------------------------------------------------- carried-forward chips */
.carry { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.chip { background: var(--glass-light); border: 1px solid var(--border-light); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; color: var(--text-2); }
.chip b { color: var(--cream); font-weight: 600; }

/* ----------------------------------------------------- the shelf (confirm) */
.shelf-head { text-align: center; }
.seal {
  width: 92px; height: 92px; margin: 4px auto 16px;
  border-radius: 50%; border: 1.5px solid var(--green);
  display: grid; place-items: center;
  font-family: var(--font-display); color: var(--cream);
  background: radial-gradient(circle at 50% 35%, rgba(61, 138, 90, 0.16), var(--bg-card));
  box-shadow: var(--shadow-glow);
}
.seal .seat-no { font-size: 32px; line-height: 1; color: var(--cream-light); }
.seal .of { font-size: 11px; color: var(--muted); letter-spacing: 0.08em; }
.seal.full { border-color: var(--red); background: radial-gradient(circle at 50% 35%, var(--red-dim), var(--bg-card)); }
.shelf-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--text); margin: 6px 0 8px; }
.shelf-sub { color: var(--text-2); margin: 0 auto 8px; max-width: 44ch; }
.shelf-sub b { color: var(--cream); }
.shelf-meta { color: var(--muted); font-size: 13px; }

.recap { margin-top: 28px; border-top: 1px solid var(--border-light); padding-top: 22px; }
.recap h3 { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--green-light); margin: 0 0 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.recap dl { display: grid; grid-template-columns: 132px 1fr; gap: 9px 16px; margin: 0; }
.recap dt { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.recap dd { margin: 0; font-family: var(--font-display); font-size: 15px; line-height: 1.5; color: var(--text); }
@media (max-width: 540px) { .recap dl { grid-template-columns: 1fr; gap: 2px 0; } .recap dt { margin-top: 10px; } }

.poured { margin-top: 26px; background: var(--glass); border-radius: var(--radius-md); border-left: 3px solid var(--green); padding: 16px 18px; }
.poured .lbl { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-light); font-weight: 600; }
.poured blockquote { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--cream); margin: 9px 0 5px; line-height: 1.45; }
.poured cite { font-style: normal; font-size: 12.5px; color: var(--muted); }

.waitlist-tag { display: inline-block; background: var(--red-dim); color: #d99; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; padding: 5px 11px; border-radius: var(--radius-sm); margin-bottom: 4px; }

.foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: 36px; line-height: 1.7; }
.foot a { color: var(--green-light); text-decoration: none; border-bottom: 1px solid var(--border); }
.foot a:hover { color: var(--cream); }

/* ====================================================== review (host view) */
.review-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.review-q { font-family: var(--font-display); font-style: italic; color: var(--text-2); font-size: 15px; margin: 14px 0 0; max-width: 60ch; line-height: 1.5; }
.review-q b { color: var(--cream); font-style: normal; font-weight: 500; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 28px 0 8px; }
.stat {
  background: var(--grad-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--shadow-card);
}
.stat .stat-n { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1; color: var(--cream-light); }
.stat .stat-n.accent { color: var(--green-light); }
.stat .stat-n.warn { color: var(--red); }
.stat .stat-lbl { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 7px; }

.promoted { background: var(--green-dim); border: 1px solid var(--border); color: var(--green-light); border-radius: var(--radius-md); padding: 12px 16px; font-size: 14px; margin: 20px 0 0; }
.promoted b { color: var(--cream); }

.section-head { display: flex; align-items: baseline; gap: 10px; margin: 36px 0 14px; }
.section-head h2 { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--text); margin: 0; }
.section-head .count { font-size: 12px; color: var(--muted); letter-spacing: 0.08em; }
.section-rule { height: 1px; background: var(--border-light); flex: 1; }

.empty { text-align: center; color: var(--muted); font-family: var(--font-display); font-style: italic; padding: 40px 0; }

.reg-card {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 18px;
  background: var(--grad-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px; margin: 12px 0;
  box-shadow: var(--shadow-card); align-items: start;
  transition: border-color var(--ease);
}
.reg-card:hover { border-color: rgba(61, 138, 90, 0.32); }
.reg-card.is-wait { border-style: dashed; }
.reg-seat {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1.5px solid var(--green); display: grid; place-items: center;
  font-family: var(--font-display); color: var(--cream-light); font-size: 21px;
  background: radial-gradient(circle at 50% 35%, var(--green-dim), transparent);
}
.reg-card.is-wait .reg-seat { border-color: rgba(166, 61, 61, 0.5); border-style: dashed; color: #d99; font-size: 15px; }
.reg-body { min-width: 0; }
.reg-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text); margin: 0 0 6px; }
.reg-build { display: inline-block; background: var(--cream-dim); color: var(--cream); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; margin-bottom: 12px; }
.reg-block { margin: 10px 0; }
.reg-block .l { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.reg-block .v { font-family: var(--font-display); font-size: 14.5px; line-height: 1.5; color: var(--text); white-space: pre-wrap; }
.reg-answer { border-left: 2px solid var(--green); padding-left: 13px; }
.reg-answer .v { color: var(--cream); font-style: italic; }
.reg-meta { font-size: 11.5px; color: var(--muted); margin-top: 12px; letter-spacing: 0.02em; }
.reg-meta .code { color: var(--green-light); text-transform: uppercase; letter-spacing: 0.1em; }

.btn-release {
  appearance: none; cursor: pointer; font-family: inherit; white-space: nowrap;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  padding: 7px 13px; font-size: 12.5px; font-weight: 500;
  transition: all var(--ease);
}
.btn-release:hover { border-color: rgba(166, 61, 61, 0.5); color: #d99; background: var(--red-dim); }
@media (max-width: 600px) {
  .reg-card { grid-template-columns: 44px 1fr; }
  .reg-seat { width: 44px; height: 44px; font-size: 17px; }
  .btn-release { grid-column: 1 / -1; justify-self: start; }
}

/* htmx loading cue */
.htmx-request .btn[type="submit"] { opacity: 0.6; pointer-events: none; }
.htmx-request .btn[type="submit"]::after { content: " · pouring…"; font-weight: 400; }

.fade-in { animation: fade 0.3s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }