/* Periodic Table of Music — hand-drawn poster look, ported from the
   original periodictableofmusic.html and extended with interactivity. */

:root {
  --paper: #faf7ef;
  --ink: #1c1c1c;
  --era-bg: transparent;
  --era-accent: currentColor;
}

/* Per-era palette tint (set by js/render.js from era.bg/era.accent).
   Discrete swap on era change — no transition — the era-stagger
   already carries the visual change. */
#scaler-wrap { background: var(--era-bg, transparent); }
.group h2 { border-bottom-color: var(--era-accent, var(--border)); }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--paper);
  font-family: 'Patrick Hand', cursive;
  color: var(--ink);
  padding: 28px 30px 34px;
  min-height: 100vh;
}

/* ---------- header ---------- */
header { text-align: center; margin-bottom: 18px; }

h1 {
  font-family: 'Permanent Marker', cursive;
  font-size: 58px;
  letter-spacing: 2px;
  color: #161616;
  line-height: 1.1;
}

.tagline { font-size: 24px; color: #3a3a3a; margin-top: 2px; }

.controls {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap;
  gap: 10px; margin-top: 14px;
}
.controls label { font-size: 21px; }
.controls select {
  font-family: 'Patrick Hand', cursive;
  font-size: 21px;
  padding: 3px 12px;
  background: #fffefb;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 14px 11px 15px 12px / 12px 15px 11px 14px;
  cursor: pointer;
}
.controls select:focus-visible { outline: 3px solid #3b6fc9; outline-offset: 2px; }

/* ---------- FormsDB Auth UI ---------- */
.pt-auth-wrap {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  vertical-align: middle;
}
.pt-signin-btn {
  width: auto;
  height: 40px;
  padding: 0 14px;
  gap: 8px;
  font-size: 18px;
  font-family: 'Patrick Hand', cursive;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 12px 10px 13px 11px / 11px 13px 10px 12px;
  cursor: pointer;
  box-shadow: 1px 2px 0 rgba(0,0,0,0.1);
  transition: all .15s ease;
}
.pt-signin-btn:hover {
  background: #fdfaf3;
  transform: rotate(-1deg) translateY(-1px);
  box-shadow: 2px 3px 0 rgba(0,0,0,0.15);
}
.pt-signin-btn .google-icon {
  flex-shrink: 0;
}
.pt-signin-btn.loading {
  opacity: 0.6;
  pointer-events: none;
}
.pt-user-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px 0 6px;
  background: #ffffff;
  border: 2px solid var(--ink);
  border-radius: 14px 11px 15px 12px / 12px 15px 11px 14px;
  font-size: 18px;
  font-family: 'Patrick Hand', cursive;
  box-shadow: 1px 2px 0 rgba(0,0,0,0.08);
}
.pt-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--ink);
}
.pt-avatar-fallback {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f0e6d2;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Permanent Marker', cursive;
  font-size: 13px;
  border: 1.5px solid var(--ink);
}
.pt-user-name {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
}
.pt-auth-link {
  background: none;
  border: none;
  font-family: 'Patrick Hand', cursive;
  font-size: 16px;
  color: #888;
  cursor: pointer;
  padding: 0 2px;
  text-decoration: underline;
  margin-left: 2px;
}
.pt-auth-link:hover {
  color: #c93b3b;
}

/* ---------- scaler (fit-to-width) ---------- */
#scaler-wrap { display: flex; justify-content: center; }
#scaler { flex: 0 0 auto; transform-origin: top center; }

/* ---------- table layout ---------- */
.row { display: flex; gap: 16px; align-items: flex-start; justify-content: center; }
.row + .row { margin-top: 20px; }

.group h2 {
  text-align: center;
  font-size: 23px;
  letter-spacing: 1px;
  margin-bottom: 6px;
  font-weight: 400;
}
.group h2 .sub { font-size: 20px; }

.box {
  border: 2.2px solid;
  padding: 7px;
  background: rgba(255, 255, 255, 0.35);
}

.cells { display: grid; gap: 6px; }

/* ---------- element cell ---------- */
.cell {
  position: relative;
  border: 1.6px solid;
  width: 66px; height: 99px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 5px 2px 7px;
  cursor: pointer;
  user-select: none;
  transition: box-shadow 0.12s ease;
  transform: rotate(var(--cell-rotation, 0deg));
}
.group[data-wide] .cell { width: 72px; }

.cell:hover, .cell:focus-visible {
  z-index: 2;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.18);
  outline: none;
}
.cell.selected { box-shadow: 0 0 0 2.5px var(--ink); z-index: 2; }

.num {
  position: absolute; top: 3px; left: 7px;
  font-size: 14px; color: #333; line-height: 1;
}

.icon { display: block; margin-bottom: auto; margin-top: 20px; }
.icon svg { width: 27px; height: 27px; color: #222; display: block; }

.name {
  font-size: 13.5px;
  line-height: 1.05;
  text-align: center;
  max-width: 66px;
}

/* ---------- detail panel (selection popover) ---------- */
#detail {
  position: fixed;
  left: 50%; bottom: 20px;
  transform: translateX(-50%) translateY(140%);
  background: #ffffff;
  border: 2.5px solid var(--ink);
  border-radius: 18px 15px 19px 16px / 16px 19px 15px 18px;
  padding: 16px 20px;
  max-width: min(540px, calc(100vw - 32px));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 105;
}
#detail.show { transform: translateX(-50%) translateY(0); }

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
#detail .d-title {
  font-family: 'Permanent Marker', cursive;
  font-size: 24px;
  color: var(--ink);
  line-height: 1.15;
}
.detail-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #888;
  cursor: pointer;
  padding: 0 4px;
}
.detail-close-btn:hover { color: var(--ink); }

#detail .d-meta {
  color: #666;
  font-size: 15px;
  font-family: 'Patrick Hand', cursive;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
#detail .d-blurb {
  font-size: 18px;
  line-height: 1.35;
  color: #2b2824;
  margin-bottom: 14px;
  text-align: left;
}

.detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px dashed #e2dbcd;
  padding-top: 12px;
}
.d-action-btn {
  height: 38px;
  padding: 0 14px;
  font-size: 17px;
  font-family: 'Patrick Hand', cursive;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px 8px 11px 9px / 9px 11px 8px 10px;
  cursor: pointer;
  transition: all .15s ease;
}
.d-btn-alchemy {
  background: #fff1e7;
  color: #c2410c;
  border: 2px solid #c2410c;
  font-weight: bold;
}
.d-btn-alchemy:hover {
  background: #ffe4d2;
  transform: translateY(-1px);
}
.d-btn-alchemy.in-recipe {
  background: #c2410c;
  color: #ffffff;
}
.d-btn-copy {
  background: #ffffff;
  color: var(--ink);
  border: 1.5px solid #888;
}
.d-btn-copy:hover {
  background: #f4eee1;
  border-color: var(--ink);
}

@media (max-width: 700px) {
  h1 { font-size: 38px; }
  .tagline { font-size: 19px; }
}

/* ================= mobile list layout (<=640px) =================
   At 640px and below, the periodic-grid is unreadable (cells scale to
   ~30px). Switch .cells from grid to a single-column flex list so each
   cell becomes a horizontal row (icon left, name right). Wobble
   transform is suppressed in list mode — rotation reads as chaotic on
   a 64px-tall row. */
@media (max-width: 640px) {
  .cells { display: flex; flex-direction: column; gap: 8px; }
  .cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 64px;
    padding: 8px 12px;
    transform: none;
  }
  .group[data-wide] .cell { width: 100%; }
  .icon { margin: 0; }
  .icon svg { width: 32px; height: 32px; }
  .num { position: static; font-size: 13px; margin-right: 4px; }
  .name { font-size: 16px; text-align: left; max-width: none; line-height: 1.2; }
}

/* ================= timeline scrubber ================= */
.ctl-btn {
  font-family: 'Patrick Hand', cursive;
  font-size: 20px; line-height: 1;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fffefb; color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 12px 10px 13px 11px / 11px 13px 10px 12px;
  cursor: pointer; overflow: visible;
  transition: transform .12s ease, background .12s ease;
}
.ctl-btn:hover { transform: rotate(-2deg) translateY(-1px); background: #f3efe2; }
.ctl-btn:focus-visible { outline: 3px solid #3b6fc9; outline-offset: 2px; }
.ctl-btn[aria-pressed="true"] { background: #1c1c1c; color: #faf7ef; }

.ctl-ico { display: block; overflow: visible; }
.play-shape { transform-origin: 10px 12px; }
.pause-bar-l { transform-origin: 7px 12px; }
.pause-bar-r { transform-origin: 17px 12px; }
.print-body { transform-origin: 12px 12px; }
.print-page { transform-origin: 12px 18px; }

/* Hugeicons house motion: one cycle after the action, never on hover.
   Productive 240–700ms. Off when the user asks for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .ctl-btn.playing[data-fx="play"] .play-shape {
    animation: ve-play-nudge 0.52s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .ctl-btn.playing[data-fx="pause"] .pause-bar-l {
    animation: ve-pause-l 0.52s cubic-bezier(0.77, 0, 0.175, 1);
  }
  .ctl-btn.playing[data-fx="pause"] .pause-bar-r {
    animation: ve-pause-r 0.52s cubic-bezier(0.77, 0, 0.175, 1);
  }
  .ctl-btn.playing[data-fx="print"] .print-body {
    animation: ve-print-recoil 0.7s ease-out;
  }
  .ctl-btn.playing[data-fx="print"] .print-page {
    animation: ve-print-page 0.7s ease-out;
  }
  .icon.playing svg {
    animation: ve-icon-select 0.24s ease-out;
  }
  .cell.era-entering .icon svg {
    animation: ve-era-rise 0.34s ease-out both;
    animation-delay: var(--era-enter-delay, 0ms);
  }
}

@keyframes ve-play-nudge {
  0%   { transform: translateX(0) scaleX(1) scaleY(1); }
  20%  { transform: translateX(-0.8px) scaleX(0.9) scaleY(1.04); }
  52%  { transform: translateX(2px) scaleX(1.1) scaleY(0.97); }
  78%  { transform: translateX(-0.2px) scaleX(0.99) scaleY(1.005); }
  100% { transform: translateX(0) scaleX(1) scaleY(1); }
}
@keyframes ve-pause-l {
  0%, 100% { transform: translate(0, 0) scaleY(1); }
  22%      { transform: translate(0.8px, 0.65px) scaleY(0.91); }
  50%      { transform: translate(-0.55px, -0.35px) scaleY(1.045); }
  76%      { transform: translate(0.14px, 0) scaleY(0.99); }
}
@keyframes ve-pause-r {
  0%, 100% { transform: translate(0, 0) scaleY(1); }
  22%      { transform: translate(-0.8px, 0.65px) scaleY(0.91); }
  50%      { transform: translate(0.55px, -0.35px) scaleY(1.045); }
  76%      { transform: translate(-0.14px, 0) scaleY(0.99); }
}
@keyframes ve-print-recoil {
  0%, 100% { transform: translateY(0) scaleX(1) scaleY(1); }
  38%      { transform: translateY(0.7px) scaleX(1.022) scaleY(0.965); }
  62%      { transform: translateY(-0.4px) scaleX(0.994) scaleY(1.012); }
}
@keyframes ve-print-page {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(5px); opacity: 1; }
  100% { transform: translateY(8px); opacity: 0.15; }
}
@keyframes ve-icon-select {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.18); }
}
@keyframes ve-era-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.scrub-wrap { max-width: 720px; margin: 16px auto 0; padding: 0 8px; }
#scrub-range { width: 100%; accent-color: #1c1c1c; cursor: pointer; }
.scrub-ends {
  display: flex; justify-content: space-between; margin-top: 2px;
  font-family: 'Patrick Hand', cursive; font-size: 13px; color: #6a6a6a;
}

/* ================= site footer ================= */
.site-footer {
  margin-top: 36px;
  padding-top: 14px;
  border-top: 1px dashed #d5cebe;
  font-family: 'Patrick Hand', cursive; font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.footer-links-group, .footer-tools-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.site-footer a {
  color: #6a6a6a; text-decoration: none;
  border-bottom: 2px solid transparent; transition: color .12s ease, border-color .12s ease;
}
.site-footer a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.site-footer a .ext-glyph {
  display: inline-block;
  vertical-align: -2px;
  margin-right: 5px;
  overflow: visible;
}
.footer-tool-btn {
  background: none;
  border: 1px solid #d5cebe;
  border-radius: 8px;
  padding: 3px 10px;
  font-family: 'Patrick Hand', cursive;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  background: #ffffff;
  transition: all .15s ease;
}
.footer-tool-btn:hover {
  background: #fff1e7;
  border-color: #c2410c;
  color: #c2410c;
  transform: translateY(-1px);
}
.footer-tool-link {
  font-size: 15px;
  color: #c2410c !important;
  font-weight: bold;
}
.footer-credit {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: #8a8a8a;
}
.footer-credit a { color: #6a6a6a; }

/* ================= print / export view ================= */
#print-sheet { display: none; }

@media print {
  /* Fit the poster to one page, no cut-off. */
  body { padding: 0; }
  .controls, .scrub-wrap, .no-print { display: none !important; }
  header { margin-bottom: 6px; }
  h1 { font-size: 34px; }
  .tagline { font-size: 16px; }
  #scaler-wrap { display: block; }
  #scaler { transform: none !important; height: auto !important; width: 100%; }
  #table { zoom: 0.72; transform-origin: top center; }
  .row { gap: 10px; }
  .row + .row { margin-top: 12px; }
  #detail { display: none !important; }
}

/* All-eras export sheet (used by the print-all view). */
body.printing-all .controls,
body.printing-all .scrub-wrap,
body.printing-all #scaler-wrap,
body.printing-all > header { display: none !important; }
body.printing-all #print-sheet { display: block; }

#print-sheet .sheet-era { page-break-after: always; break-after: page; text-align: center; padding: 18px 0 6px; }
#print-sheet .sheet-era:last-child { page-break-after: auto; break-after: auto; }
#print-sheet h1 { font-size: 30px; }
#print-sheet .sheet-sub { font-size: 15px; color: #3a3a3a; margin: 2px 0 10px; }
#print-sheet .sheet-table { zoom: 0.7; }

/* ================= Sonic Alchemy Multi-Select & Dock ================= */
.cell.alchemy-selected {
  outline: 3px solid #c2410c !important;
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(194, 65, 12, 0.45);
  transform: translateY(-2px) rotate(var(--cell-rotation, 0deg)) scale(1.04) !important;
}

/* ================= Header Alchemy Menu Button ================= */
.alchemy-menu-btn {
  height: 40px;
  padding: 0 14px;
  background: #ffffff;
  color: #c2410c;
  border: 2px solid #c2410c;
  border-radius: 12px 10px 13px 11px / 11px 13px 10px 12px;
  font-family: 'Patrick Hand', cursive;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 1px 2px 0 rgba(0,0,0,0.1);
  transition: all .15s ease;
  vertical-align: middle;
}
.alchemy-menu-btn:hover {
  background: #fff1e7;
  transform: rotate(-1deg) translateY(-1px);
  box-shadow: 2px 3px 0 rgba(194, 65, 12, 0.2);
}
.alchemy-btn-icon { font-size: 16px; }
.alchemy-btn-text { font-weight: bold; }
.alchemy-badge-count {
  background: #f4eee1;
  color: #777;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: bold;
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid #d5cebe;
}
.alchemy-badge-count.has-items {
  background: #c2410c;
  color: #ffffff;
  border-color: #c2410c;
  animation: pulseBadge .3s ease;
}
@keyframes pulseBadge {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ================= Minimalist Floating Pill (Bottom Right) ================= */
.alchemy-float-pill {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 120;
  background: #c2410c;
  color: #ffffff;
  border: 2.5px solid var(--ink);
  border-radius: 30px;
  padding: 8px 18px;
  font-family: 'Permanent Marker', cursive;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(194, 65, 12, 0.35);
  animation: slideUpFloat .2s cubic-bezier(0.16, 1, 0.3, 1);
  transition: transform .15s ease, background .15s ease;
}
.alchemy-float-pill:hover {
  transform: translateY(-2px) scale(1.03);
  background: #9a3412;
}
.float-arrow { font-size: 12px; opacity: 0.8; }

@keyframes slideUpFloat {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ================= Studio Modal Content ================= */
.studio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  border-bottom: 1.5px dashed #e8e2d9;
  padding-bottom: 10px;
}
.studio-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.studio-icon { font-size: 24px; }
.studio-count {
  font-size: 14px;
  background: #fff1e7;
  color: #c2410c;
  border: 1px solid #c2410c;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: bold;
}
.studio-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 32px;
}
.studio-header-btn {
  height: 32px;
  padding: 0 12px;
  font-family: 'Patrick Hand', cursive;
  font-size: 15px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.1);
  transition: all .15s ease;
}
.studio-btn-vault {
  background: #ffffff;
  color: var(--ink);
  border: 1.5px solid #d5cebe;
}
.studio-btn-vault:hover {
  background: #faf7f2;
  border-color: #c2410c;
  color: #c2410c;
  transform: translateY(-1px);
}
.studio-btn-clear {
  background: #fff5f5;
  color: #c93b3b;
  border: 1.5px solid #fca5a5;
}
.studio-btn-clear:hover {
  background: #fee2e2;
  border-color: #ef4444;
  color: #991b1b;
  transform: translateY(-1px);
}
.studio-empty-state {
  text-align: center;
  background: #faf7f2;
  border: 1.5px dashed #d5cebe;
  border-radius: 12px;
  padding: 24px 16px;
  margin-bottom: 12px;
}
.studio-section-label {
  font-size: 12px;
  font-weight: bold;
  color: #888;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  text-align: left;
}

.dock-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.dock-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff1e7;
  color: #c2410c;
  border: 1.5px solid #c2410c;
  border-radius: 12px 9px 13px 10px / 10px 13px 9px 12px;
  padding: 4px 10px;
  font-size: 15px;
  font-weight: bold;
}
.chip-num { opacity: 0.7; font-size: 13px; }
.chip-era {
  font-size: 11px;
  background: #f4eee1;
  color: #777;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid #d5cebe;
}
.chip-name { font-size: 16px; }
.chip-remove {
  background: none;
  border: none;
  color: #c2410c;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0 0 2px 2px;
}
.chip-remove:hover { color: #000; }

.dock-prompt-wrap {
  background: #faf7f2;
  border: 1px solid #e8e2d9;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.dock-prompt-label {
  font-size: 12px;
  font-weight: bold;
  color: #888;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.dock-prompt-text {
  font-family: monospace;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.4;
  word-break: break-word;
}

.dock-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.dock-btn {
  height: 40px;
  padding: 0 16px;
  font-size: 18px;
  font-family: 'Patrick Hand', cursive;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border-radius: 12px 10px 13px 11px / 11px 13px 10px 12px;
  border: 2px solid var(--ink);
  transition: all .15s ease;
  box-shadow: 1px 2px 0 rgba(0,0,0,0.1);
}
.dock-copy-btn {
  background: #ffffff;
  color: var(--ink);
}
.dock-copy-btn:hover {
  background: #f0fdf4;
  border-color: #166534;
  color: #166534;
  transform: translateY(-1px);
}
.free-badge {
  font-size: 12px;
  background: #dcfce7;
  color: #15803d;
  font-weight: bold;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid #bbf7d0;
}
.dock-download-btn, .dock-save-btn {
  background: #ffffff;
  color: var(--ink);
}
.dock-download-btn:hover, .dock-save-btn:hover {
  background: #fff1e7;
  border-color: #c2410c;
  color: #c2410c;
  transform: translateY(-1px);
}
.lock-badge { font-size: 13px; margin-left: 2px; }

/* ================= Modern Web Guidance: <dialog> modal ================= */
dialog.pt-dialog {
  padding: 0;
  border: none;
  border-radius: 20px 16px 21px 17px / 17px 21px 16px 20px;
  background: transparent;
  max-width: 480px;
  width: calc(100vw - 40px);
  margin: auto;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.32);
}
dialog.pt-dialog::backdrop {
  background: rgba(26, 24, 21, 0.7);
  backdrop-filter: blur(5px);
}
.dialog-card {
  background: #ffffff;
  border: 3px solid var(--ink);
  border-radius: 20px 16px 21px 17px / 17px 21px 16px 20px;
  padding: 30px 24px 24px;
  position: relative;
  text-align: center;
}
.dialog-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  background: #ffffff;
  border: 1.5px solid #d5cebe;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  color: #666;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.08);
  transition: all .15s ease;
  z-index: 10;
}
.dialog-close:hover {
  background: #fff1e7;
  border-color: #c2410c;
  color: #c2410c;
  transform: scale(1.05);
}
.dialog-badge {
  display: inline-block;
  background: #fff1e7;
  color: #c2410c;
  font-family: 'Permanent Marker', cursive;
  padding: 3px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 10px;
}
.dialog-title {
  font-family: 'Permanent Marker', cursive;
  font-size: 25px;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.2;
}
.dialog-desc {
  font-size: 17px;
  color: #555;
  line-height: 1.4;
  margin-bottom: 18px;
}

.dialog-perks {
  text-align: left;
  background: #faf7f2;
  border: 1.5px solid #e8e2d9;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dialog-perk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #2b2824;
}
.perk-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.dialog-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.dialog-btn-primary {
  width: 100%;
  height: 46px;
  font-size: 20px;
  justify-content: center;
  background: #ffffff;
  border: 2.5px solid var(--ink);
  box-shadow: 2px 3px 0 rgba(0,0,0,0.12);
}
.dialog-btn-primary:hover {
  background: #fdfaf3;
  transform: translateY(-1px);
}
.dialog-btn-ghost {
  background: none;
  border: none;
  font-family: 'Patrick Hand', cursive;
  font-size: 17px;
  color: #777;
  cursor: pointer;
  padding: 4px;
}
.dialog-btn-ghost:hover {
  color: var(--ink);
  text-decoration: underline;
}

.dialog-foot {
  font-size: 13px;
  color: #888;
}

/* ================= Wide Modals (Crates, Guide, Glossary) ================= */
dialog.pt-modal-wide {
  max-width: 680px !important;
  max-height: 85vh;
}
dialog.pt-modal-wide .dialog-card {
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
}

/* ---------- Crates Vault List ---------- */
.crates-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 52vh;
  overflow-y: auto;
  margin: 14px 0;
  text-align: left;
}
.crate-card {
  background: #faf7f2;
  border: 1.5px solid #e8e2d9;
  border-radius: 12px;
  padding: 14px 16px;
  transition: all .15s ease;
}
.crate-card:hover {
  border-color: #c2410c;
  background: #fffdfa;
}
.crate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.crate-title {
  font-family: 'Permanent Marker', cursive;
  font-size: 17px;
  color: var(--ink);
}
.crate-date {
  font-size: 13px;
  color: #888;
}
.crate-prompt {
  font-family: monospace;
  font-size: 12.5px;
  color: #444;
  background: #ffffff;
  border: 1px solid #e8e2d9;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
  line-height: 1.35;
  word-break: break-word;
}
.crate-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.crate-actions .d-action-btn {
  height: 32px;
  font-size: 14px;
  padding: 0 10px;
}
.crates-empty {
  text-align: center;
  padding: 30px 10px;
}

/* ---------- Guide & FAQ ---------- */
.guide-section {
  margin-bottom: 20px;
  border-bottom: 1px dashed #e8e2d9;
  padding-bottom: 16px;
}
.guide-section h3 {
  font-family: 'Permanent Marker', cursive;
  font-size: 18px;
  color: #c2410c;
  margin-bottom: 10px;
}
.guide-steps {
  margin: 0 0 10px 20px;
  font-size: 15.5px;
  line-height: 1.5;
  color: #333;
}
.guide-steps li {
  margin-bottom: 8px;
}
.faq-item {
  margin-bottom: 12px;
  background: #faf7f2;
  border: 1px solid #e8e2d9;
  border-radius: 8px;
  padding: 10px 12px;
}
.faq-q {
  font-weight: bold;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 4px;
}
.faq-a {
  font-size: 14px;
  color: #555;
  line-height: 1.4;
}

/* ---------- Glossary Grid ---------- */
.glossary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 14px;
  max-height: 54vh;
  overflow-y: auto;
}
.glossary-item {
  background: #faf7f2;
  border: 1.5px solid #e8e2d9;
  border-radius: 10px;
  padding: 12px 14px;
}
.glossary-term {
  font-family: 'Permanent Marker', cursive;
  font-size: 16px;
  color: #c2410c;
  margin-bottom: 4px;
}
.glossary-def {
  font-size: 13.5px;
  color: #444;
  line-height: 1.4;
}

/* ================= Toast Notification ================= */
.pt-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 12px;
  font-family: 'Patrick Hand', cursive;
  font-size: 18px;
  opacity: 0;
  pointer-events: none;
  transition: all .2s ease;
  z-index: 200;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.pt-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ================= Modern Web Standards & Accessibility ================= */

/* 1. Universal Focus-Visible Rings (WCAG 2.2 AA) */
button:focus-visible,
select:focus-visible,
a:focus-visible,
input[type="range"]:focus-visible {
  outline: 3px solid #c2410c !important;
  outline-offset: 2px !important;
}

/* 2. Custom Sleek Scrollbars */
.dialog-card,
.crates-list,
.glossary-grid {
  scrollbar-width: thin;
  scrollbar-color: #d5cebe transparent;
}
.dialog-card::-webkit-scrollbar,
.crates-list::-webkit-scrollbar,
.glossary-grid::-webkit-scrollbar {
  width: 6px;
}
.dialog-card::-webkit-scrollbar-thumb,
.crates-list::-webkit-scrollbar-thumb,
.glossary-grid::-webkit-scrollbar-thumb {
  background-color: #d5cebe;
  border-radius: 6px;
}

/* 3. Touch Targets & Interaction */
button,
select,
.dialog-close,
.chip-remove {
  touch-action: manipulation;
}
.dialog-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background .15s ease, color .15s ease;
}
.dialog-close:hover {
  background: #f4eee1;
  color: var(--ink);
}

/* 4. Responsive Breakpoints & Mobile Polish */
@media (max-width: 768px) {
  body {
    padding: 16px 14px 28px;
  }
  h1 {
    font-size: clamp(34px, 7vw, 48px);
  }
  .tagline {
    font-size: clamp(17px, 3.5vw, 21px);
  }
  .controls {
    gap: 8px;
  }
  .alchemy-menu-btn {
    padding: 0 10px;
    font-size: 16px;
  }
  .pt-signin-btn {
    padding: 0 10px;
    font-size: 16px;
  }
  dialog.pt-dialog,
  dialog.pt-modal-wide {
    width: calc(100vw - 20px);
    max-height: min(90vh, 90dvh);
  }
  .dialog-card {
    padding: 22px 14px 18px;
    max-height: min(90vh, 90dvh);
  }
  .dialog-title {
    font-size: 22px;
  }
  .site-footer {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
  .footer-links-group,
  .footer-tools-group {
    justify-content: center;
  }
  .alchemy-float-pill {
    bottom: max(16px, env(safe-area-inset-bottom));
    right: 14px;
    padding: 7px 14px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .detail-actions {
    flex-direction: column;
  }
  .d-action-btn {
    width: 100%;
    justify-content: center;
  }
  .dock-actions {
    flex-direction: column;
    width: 100%;
  }
  .dock-btn {
    width: 100%;
    justify-content: center;
  }
  .glossary-grid {
    grid-template-columns: 1fr;
  }
}

/* 5. Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}