:root, html[data-game="one-piece"] {
  --paper: #f8f0da; --tile: #efe3c4; --field: #fffdf5;
  --ink: #17324a; --ink-hover: #1f4664; --ink-border: #0f2333;
  --body: #23303a; --muted: #6b5f3f; --muted-2: #8a7c54; --label: #a2946e;
  --red: #9c2b23; --red-hover: #b3352c; --red-border: #7a1f19;
  --gold: #b07d2b; --gold-2: #c8962f; --gold-3: #d9b45a;
  --on-navy-gold: #d9b45a; --on-navy-blue: #9fb7c9;
  --ok-bg: #1c4a34; --ok-border: #123322; --ok-text: #eaf6ee; --ok-check: #8fe3ad;
  --b1: #d8c393; --b2: #cbb684; --b3: #cdb684; --b4: #b6a06f;
  --page-grad: radial-gradient(120% 90% at 50% -10%, #f6ecce 0%, #eaddbb 55%, #ddcaa0 100%);
  --shadow-card: 0 1px 0 #fffaf0 inset, 0 18px 40px -24px rgba(23,50,74,0.5);
  --shadow-product: 0 1px 0 #fffaf0 inset, 0 12px 26px -20px rgba(23,50,74,0.5);
  --r-input: 4px; --r-tile: 5px; --r-card: 6px; --r-pill: 999px;
  --display: 'Cinzel', serif; --serif: 'Spectral', Georgia, serif;
}
/* Pokemon placeholder theme — iconic red/white + type accents, NO character art.
   Swap palette/fonts when real Pokemon brand assets arrive. */
html[data-game="pokemon"] {
  --paper: #f6f7fb; --tile: #eef1f8; --field: #ffffff;
  --ink: #2a3550; --ink-hover: #354268; --ink-border: #1c2436;
  --muted: #5b6478; --muted-2: #6b7590; --label: #7a84a0;
  --gold: #c8102e; --gold-2: #e11d3a; --gold-3: #ffcb05;  /* Poké red + accent yellow */
  --b1: #d7dcea; --b2: #c7cee0; --b3: #b7c0d6; --b4: #a3adc7;
  --page-grad: radial-gradient(1200px 600px at 50% -10%, #ffffff, #eef1f8 60%, #dfe4f0);
  --display: 'Cinzel', serif; --serif: 'Spectral', Georgia, serif; /* placeholder until Pokemon fonts */
}
/* Neutral umbrella theme for the game-picker hub. */
html[data-game="hub"] {
  --paper: #f3f2ee; --tile: #e9e7e0; --field: #ffffff;
  --ink: #2b2b2b; --ink-hover: #3a3a3a; --gold: #7a6a3f; --gold-2: #93814f; --gold-3: #c8b98a;
  --muted: #6b6b63; --muted-2: #7d7d72; --label: #8f8f82;
  --b1: #ded9cb; --b2: #d2ccbb; --b3: #c6bfac; --b4: #b3ab95;
  --page-grad: radial-gradient(1200px 600px at 50% -10%, #ffffff, #f0efe9 60%, #e4e1d7);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh; font-family: var(--serif); color: var(--body);
  background: var(--page-grad); background-attachment: fixed;
  padding: 40px 18px 64px; display: flex; flex-direction: column; align-items: center;
}
/* Crew backdrop: fixed, cover-cropped image under a nautical scrim so the
   parchment panels stay readable. position:fixed avoids iOS fixed-bg jank.
   Darker at top (behind the masthead) and bottom (mutes the image watermark). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(13,31,46,0.80) 0%, rgba(17,50,74,0.58) 42%, rgba(11,26,39,0.86) 100%),
    url("brand_assets/crew.jpg") center top / contain no-repeat;
}
/* One Piece crew photo is One Piece-specific art — hide it for other games. */
/* Pokemon: full-bleed backdrop image, centered + cover, on entering /pokemon. */
html[data-game="pokemon"] body::before {
  background: center center / cover no-repeat
    url("brand_assets/my-collection-of-pokemon-wallpapers-gathered-over-the-past-v0-JXOrtn3UTzhjSmIIJmULHsPjENhvuIwvvVOMooZvK10.jpeg.webp");
  opacity: 1;
}
/* Hub: full-bleed background image, centered + cover so it fills desktop + mobile. */
html[data-game="hub"] body::before {
  background: center center / cover no-repeat
    url("brand_assets/kd5u5vxe11ja1.jpg");
  opacity: 1;
}
a { color: var(--red); text-decoration: underline; } a:hover { color: var(--red-border); }
::selection { background: var(--gold-3); color: var(--ink); }
input::placeholder, textarea::placeholder { color: #b3a37f; }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bannerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }

/* Interactive states (CLAUDE.md mandate) */
button { transition: background .18s ease, transform .06s ease, box-shadow .18s ease; }
button:active { transform: scale(0.98); }
.skeleton {
  background: linear-gradient(90deg, #eadfc0 25%, #f3ecd6 37%, #eadfc0 63%);
  background-size: 800px 100%; animation: shimmer 1.3s infinite linear; border-radius: var(--r-card);
}
.hidden { display: none !important; }

/* ==========================================================================
   Masthead
   ========================================================================== */
.masthead {
  width: 100%; max-width: 720px; text-align: center; margin-bottom: 26px;
}
.masthead .eyebrow {
  display: inline-flex; align-items: center; gap: 10px; color: var(--gold-3);
  font-family: var(--display); letter-spacing: 3px; font-size: 12px;
  font-weight: 600; text-transform: uppercase;
}
.masthead .rule { width: 34px; height: 1px; background: var(--gold-3); }
.masthead h1 {
  font-family: var(--display); font-weight: 700; color: var(--paper);
  font-size: clamp(28px, 6vw, 46px); line-height: 1.05; margin: 12px 0 8px;
  letter-spacing: 0.5px; text-shadow: 0 2px 16px rgba(9,20,30,0.7);
}
.masthead .subtitle {
  margin: 0; color: var(--on-navy-blue); font-size: clamp(14px, 2.4vw, 17px); font-style: italic;
  text-shadow: 0 1px 10px rgba(9,20,30,0.6);
}
.screen-head .head-cta {
  display: block; width: fit-content; margin: 0 auto;
  font-family: var(--display); font-weight: 600; letter-spacing: 1px; font-size: 14px;
  text-transform: uppercase; color: var(--paper); background: var(--ink);
  border: 1px solid var(--on-navy-gold); border-radius: var(--r-input);
  padding: 12px 26px; cursor: pointer; box-shadow: 0 6px 18px rgba(9,20,30,0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}
.screen-head .head-cta:hover { background: var(--ink-hover); }
.screen-head .head-cta:active { transform: translateY(-1px); }
/* The two head CTAs are unrelated actions — give them a clear gap between each other. */
.screen-head .head-cta + .head-cta { margin-top: 20px; }
.screen-head .head-or {
  margin: 14px auto; color: var(--on-navy-blue); font-family: var(--display);
  font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(9,20,30,0.55);
}

/* ==========================================================================
   Screen containers
   ========================================================================== */
.screen { width: 100%; animation: riseIn 0.5s ease both; }
#screen-product, #screen-detail { max-width: 620px; }
#screen-list { max-width: 560px; }

/* ==========================================================================
   Game Hub screen — neutral game picker at "/"
   ========================================================================== */
.game-hub { width: 100%; max-width: 640px; margin: 0 auto; text-align: center; }
.game-hub-title {
  font-family: var(--display); font-weight: 600; color: var(--ink);
  font-size: clamp(20px, 4vw, 26px); margin: 0 0 22px;
}
.game-hub-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) {
  .game-hub-grid { grid-template-columns: 1fr 1fr; }
}
.game-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; cursor: pointer; background: var(--paper); border: 1px solid var(--b1);
  border-radius: var(--r-card); padding: 32px 20px; box-shadow: var(--shadow-card);
  font-family: var(--serif); transition: border-color 0.2s ease, transform 0.2s ease;
}
.game-card:hover { border-color: var(--ink); }
.game-card:active { transform: translateY(1px); }
.game-card-mark { width: 56px; height: 56px; border-radius: 50%; position: relative; flex: 0 0 auto; }
.game-card-img { width: 56px; height: 56px; object-fit: contain; flex: 0 0 auto; }
.game-card-label { font-family: var(--display); font-weight: 600; color: var(--ink); font-size: 18px; }
.game-card-sub { color: var(--muted); font-size: 13px; line-height: 1.4; }
/* Pure-CSS Poké Ball mark: red top, white bottom, black band + center dot. No emojis/images. */
.game-card-mark[data-mark="pokemon"] {
  background: linear-gradient(to bottom, #d6353f 0%, #d6353f 50%, #fff 50%, #fff 100%);
  border: 3px solid #232323;
}
.game-card-mark[data-mark="pokemon"]::before {
  content: ''; position: absolute; left: -3px; right: -3px; top: calc(50% - 4px);
  height: 8px; background: #232323;
}
.game-card-mark[data-mark="pokemon"]::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px;
  margin: -9px 0 0 -9px; background: #fff; border: 3px solid #232323; border-radius: 50%;
}
/* Simple gold ring mark for One Piece. */
.game-card-mark[data-mark="one-piece"] {
  background: var(--field); border: 4px solid var(--gold);
  box-shadow: inset 0 0 0 2px var(--gold-3);
}
/* A game whose backend flips it to non-live gets a dimmed card + small badge. */
.game-card.is-locked { opacity: 0.6; position: relative; }
.game-card-soon {
  display: inline-block; align-self: center; font-family: var(--display);
  font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold-3); border-radius: var(--r-pill);
  padding: 3px 10px; margin-top: 2px;
}

/* ==========================================================================
   Coming Soon screen — themed placeholder for a not-yet-live game route
   ========================================================================== */
.coming-soon-screen {
  width: 100%; max-width: 480px; margin: 0 auto; text-align: center;
  background: var(--paper); border: 1px solid var(--b1); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); padding: clamp(32px, 6vw, 56px) clamp(24px, 5vw, 40px);
}
.coming-soon-screen h2 {
  font-family: var(--display); font-weight: 600; color: var(--ink);
  font-size: clamp(20px, 4vw, 26px); margin: 0 0 12px;
}
.coming-soon-screen p {
  margin: 0 0 24px; color: var(--muted); font-size: 15px; line-height: 1.5;
}

/* ==========================================================================
   Product Select screen
   ========================================================================== */
.screen-head { text-align: center; margin-bottom: 20px; }
.screen-head h2 {
  font-family: var(--display); font-weight: 600; color: var(--paper);
  font-size: 22px; margin: 0 0 6px; text-shadow: 0 2px 14px rgba(9,20,30,0.7);
}
.screen-head p {
  margin: 0 auto; color: var(--on-navy-blue); max-width: 400px; font-size: 15px; line-height: 1.5;
  text-shadow: 0 1px 10px rgba(9,20,30,0.55);
}
.product-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px;
}
.product-card {
  text-align: left; cursor: pointer; background: var(--paper); border: 1px solid var(--b1);
  border-radius: var(--r-card); padding: 16px 18px; box-shadow: var(--shadow-product);
  display: flex; flex-direction: row; align-items: center; gap: 14px; font-family: var(--serif);
}
.product-card:hover { border-color: var(--ink); background: #fbf4e0; }
/* Pokemon storefront: product cards a little translucent so the backdrop shows through. */
html[data-game="pokemon"] .product-card {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-game="pokemon"] .product-card:hover { background: rgba(255, 255, 255, 0.93); }
.product-thumb {
  flex: 0 0 auto; width: 60px; height: 60px; border-radius: var(--r-input);
  overflow: hidden; border: 1px solid var(--b1); background: var(--field); line-height: 0;
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.product-title {
  font-family: var(--display); font-weight: 600; color: var(--red); font-size: 15.5px;
  letter-spacing: 1px; line-height: 1.25; text-transform: uppercase;
}
.select-affordance {
  display: inline-flex; align-items: center; gap: 6px; color: var(--red);
  font-family: var(--display); font-size: 12px; letter-spacing: 1px; margin-top: 2px;
}
.product-stock {
  font-family: var(--display); font-size: 11.5px; letter-spacing: 0.5px;
  color: var(--gold); text-transform: uppercase;
}
.product-stock.is-soldout { color: var(--red); }
.coming-soon-section { margin: 0 0 1rem; }
/* Loose section labels sit over the dark crew backdrop -> light cream + shadow (see .screen-head h2). */
.coming-soon-heading,
.available-heading {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .06em;
  color: var(--paper);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold-3);
  text-shadow: 0 2px 14px rgba(9,20,30,0.7);
}
.available-heading { margin: 36px 0 0; }
.product-badge {
  align-self: flex-start;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-3);
  border: 1px solid var(--b2);
  border-radius: var(--r-pill);
  padding: .15rem .5rem;
  margin-bottom: .35rem;
}
.product-card.is-coming { border-style: dashed; }
.product-price {
  font-family: var(--display); font-size: 12.5px; letter-spacing: 0.5px;
  color: var(--body); font-weight: 600;
}
.product-downpayment {
  font-family: var(--display); font-size: 11.5px; letter-spacing: 0.5px;
  color: var(--gold);
}

/* ==========================================================================
   Search screen
   ========================================================================== */
#screen-search {
  max-width: 560px; background: var(--paper); border: 1px solid var(--b1);
  box-shadow: 0 1px 0 #fffaf0 inset, 0 18px 40px -22px rgba(23,50,74,0.55);
  border-radius: var(--r-card); padding: clamp(24px, 5vw, 44px); text-align: center;
}
.compass-wrap { display: flex; justify-content: center; margin-bottom: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; background: var(--tile);
  border: 1px solid var(--b2); border-radius: var(--r-pill); padding: 5px 8px 5px 14px;
  margin-bottom: 14px;
}
.chip-title { font-size: 13px; color: var(--muted); }
.chip-title > span:first-child {
  color: var(--red); font-family: var(--display); font-size: 11px; letter-spacing: 1px;
}
.chip-change {
  background: var(--ink); color: #f4e7c6; border: none; border-radius: var(--r-pill);
  font-family: var(--display); font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 4px 10px; cursor: pointer;
}
.chip-change:hover { background: var(--ink-hover); }
.find-heading {
  font-family: var(--display); font-weight: 600; color: var(--ink); font-size: 22px; margin: 0 0 6px;
}
.find-help {
  margin: 0 auto 22px; color: var(--muted); max-width: 380px; font-size: 15px; line-height: 1.5;
}
.search-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; justify-content: center;
}
.search-row .field { flex: 1 1 240px; min-width: 0; font-size: 16px; padding: 13px 16px; }
.no-result { margin: 18px 0 0; color: var(--red); font-size: 14px; }

/* ==========================================================================
   Shared form field + button + inline-state classes
   ========================================================================== */
.field {
  width: 100%; font-family: var(--serif); font-size: 15px; color: var(--body);
  padding: 11px 14px; background: var(--field); border: 1px solid var(--b3);
  border-radius: var(--r-input); outline: none; line-height: 1.4;
}
.field:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(23,50,74,0.12); }
.field:disabled { background: var(--tile); color: var(--muted-2); cursor: not-allowed; }

.pickup-row {
  display: flex; align-items: flex-start; gap: 9px; margin: 8px 0 14px;
  font-family: var(--serif); font-size: 13.5px; line-height: 1.4; color: var(--body); cursor: pointer;
}
.pickup-row input[type="checkbox"] {
  margin-top: 1px; width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--ink); cursor: pointer;
}

.btn-navy {
  flex: 0 0 auto; font-family: var(--display); font-weight: 600; letter-spacing: 1px;
  font-size: 14px; text-transform: uppercase; color: var(--paper); background: var(--ink);
  border: 1px solid var(--ink-border); border-radius: var(--r-input); padding: 13px 24px; cursor: pointer;
}
.btn-navy:hover { background: var(--ink-hover); }

.err-inline { margin: 14px 0 0; color: var(--red); font-size: 14px; }

.text-link {
  background: none; border: none; color: var(--muted); font-family: var(--serif);
  font-size: 14px; cursor: pointer; text-decoration: underline; margin-top: 16px;
}

.empty-state {
  background: var(--tile); border: 1px dashed var(--b2); border-radius: var(--r-card);
  padding: 32px 24px; text-align: center; color: var(--muted); font-size: 14.5px; line-height: 1.5;
}
.error-state {
  background: rgba(156,43,35,0.08); border: 1px solid var(--red-border); border-radius: var(--r-card);
  padding: 16px 20px; color: var(--red); font-size: 14px; line-height: 1.5; text-align: center;
}

/* ==========================================================================
   Pick Match / disambiguation list screen
   ========================================================================== */
.list-header {
  background: var(--paper); border: 1px solid var(--b1); border-radius: 6px 6px 0 0;
  padding: 22px 26px; box-shadow: 0 -1px 0 #fffaf0 inset;
}
.list-header h2 {
  font-family: var(--display); font-weight: 600; color: var(--ink); font-size: 20px; margin: 0 0 4px;
}
.list-header p { margin: 0; color: var(--muted); font-size: 14.5px; }
.match-list { display: flex; flex-direction: column; gap: 0; }
.match-row {
  text-align: left; width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; cursor: pointer; font-family: var(--serif); background: var(--field);
  border: 1px solid var(--b1); border-top: none; padding: 16px 22px;
}
.match-row:hover { background: #f3e8cb; }
.match-name { display: block; font-family: var(--display); font-weight: 600; color: var(--ink); font-size: 16px; }
.match-sub { display: block; color: var(--muted-2); font-size: 13px; margin-top: 2px; }
.match-arrow { flex: 0 0 auto; color: var(--red); font-family: var(--display); font-size: 13px; letter-spacing: 1px; }

/* ==========================================================================
   Order Detail + Edit screen
   ========================================================================== */
.manifest {
  background: var(--paper); border: 1px solid var(--b1); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.manifest-header {
  background: var(--ink); color: #f4e7c6; padding: 20px 26px; display: flex;
  align-items: center; justify-content: space-between; gap: 12px;
}
.manifest-eyebrow {
  font-family: var(--display); letter-spacing: 2px; font-size: 11px; color: var(--on-navy-gold);
  text-transform: uppercase;
}
.manifest-name { font-family: var(--display); font-weight: 600; font-size: 22px; margin-top: 3px; }
.manifest-product { font-size: 12.5px; color: var(--on-navy-blue); margin-top: 3px; font-style: italic; }
.manifest-header-right {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.status-pill {
  background: rgba(217,180,90,0.18); color: var(--on-navy-gold); border: 1px solid var(--on-navy-gold);
  border-radius: var(--r-pill); padding: 3px 10px; font-family: var(--display); font-size: 11px;
  letter-spacing: 1px; text-transform: uppercase;
}

.locked-section { padding: 22px 26px 6px; }
.section-label { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.locked-label {
  font-family: var(--display); font-size: 12px; letter-spacing: 1.5px; color: var(--label);
  text-transform: uppercase;
}
.edit-label {
  font-family: var(--display); font-size: 12px; letter-spacing: 1.5px; color: var(--red);
  text-transform: uppercase;
}
.locked-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
}
.locked-tile {
  background: var(--tile); border: 1px dashed var(--b2); border-radius: var(--r-tile);
  padding: 12px 14px; opacity: 0.92;
}
.tile-label {
  font-size: 11px; letter-spacing: 1px; color: var(--label); text-transform: uppercase;
  font-family: var(--display);
}
.tile-value { font-size: 16px; color: #6f6444; margin-top: 4px; }

.dashed-divider {
  height: 1px; background: repeating-linear-gradient(90deg, var(--b2) 0 8px, transparent 8px 14px);
  margin: 22px 26px;
}

.editable-section { padding: 0 26px 24px; }
.field-label {
  display: block; font-size: 12px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase;
  font-family: var(--display); margin-bottom: 6px;
}
.field-optional { color: var(--muted-2); text-transform: none; letter-spacing: 0; }

.detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
/* Bottom clearance so page-end action buttons (e.g. Done) never sit under the fixed contact FAB. */
main { padding-bottom: 96px; }
.btn-red {
  flex: 1 1 auto; font-family: var(--display); font-weight: 600; letter-spacing: 1px; font-size: 14px;
  text-transform: uppercase; color: var(--paper); background: var(--red); border: 1px solid var(--red-border);
  border-radius: var(--r-input); padding: 14px 22px; cursor: pointer;
}
.btn-red:hover { background: var(--red-hover); }
.btn-outline {
  flex: 0 0 auto; font-family: var(--display); font-weight: 600; letter-spacing: 1px; font-size: 14px;
  text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--b4);
  border-radius: var(--r-input); padding: 14px 22px; cursor: pointer;
}
.btn-outline:hover { background: var(--tile); }

.banner {
  display: flex; align-items: center; gap: 12px; background: var(--ok-bg); color: var(--ok-text);
  border: 1px solid var(--ok-border); border-radius: var(--r-card); padding: 14px 18px;
  margin-bottom: 16px; animation: bannerIn 0.35s ease both;
}

.footer-note {
  text-align: center; margin: 18px 0 0; color: var(--on-navy-blue); font-size: 12.5px; font-style: italic;
  text-shadow: 0 1px 8px rgba(9,20,30,0.55);
}

.verify-box {
  background: var(--tile); border: 1px solid var(--b2); border-radius: var(--r-card);
  padding: 18px 18px 20px;
}
.verify-box .text-link { font-size: 13.5px; margin-top: 14px; display: block; }
.verify-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.verify-head span { font-family: var(--display); font-size: 13px; letter-spacing: 1px; color: var(--ink); }
.verify-copy { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.verify-row { display: flex; flex-wrap: wrap; gap: 10px; }
.verify-row .btn-navy { font-size: 13px; padding: 11px 20px; }
.verify-input {
  flex: 1 1 120px; min-width: 0; text-align: center; letter-spacing: 4px; font-size: 18px;
}

/* Search screen: separation between finding an order and adding one */
.or-divider {
  display: flex; align-items: center; gap: 14px; margin: 22px 0 14px;
  color: var(--muted-2); font-family: var(--display); font-size: 12px;
  letter-spacing: 3px; text-transform: uppercase;
}
.or-divider::before, .or-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--b2);
}
.add-prompt { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.add-closed {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--b2);
  color: var(--muted); font-size: 14px; line-height: 1.5;
}

/* Add-pre-order form */
#screen-create {
  max-width: 560px; background: var(--paper); border: 1px solid var(--b1);
  box-shadow: 0 1px 0 #fffaf0 inset, 0 18px 40px -22px rgba(23,50,74,0.55);
  border-radius: var(--r-card); padding: clamp(24px, 5vw, 44px);
}
.btn-add { width: 100%; margin-top: 10px; }
.amount-line { font-family: var(--display); color: var(--ink); font-size: 1.05rem; margin: 4px 0 2px; }
.amount-line.muted-amount { color: var(--muted-2); }
.pay-opt { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; }
.pay-opt-label { font-family: var(--display); font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--gold); }
.pay-opt-row { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border: 1px solid #e6ddc7; border-radius: 10px; cursor: pointer; transition: transform .06s ease, border-color .18s ease; }
.pay-opt-row:active { transform: scale(0.99); }
.pay-opt-row:has(input:checked) { border-color: var(--ink); }
.pay-opt-text { font-size: 14px; color: var(--body); }
.pay-opt-text b { color: var(--red); }
.pay-opt-text small { color: var(--body); opacity: 0.75; }

/* ==========================================================================
   Product details (customer find/add screen) + lightbox
   ========================================================================== */
.product-details {
  width: 100%; max-width: 520px; margin: 4px auto 18px; padding: 16px 18px;
  background: var(--tile); border: 1px solid var(--b4); border-radius: var(--r-card);
  box-shadow: var(--shadow-product);
}
.pd-desc {
  margin: 0 0 12px; color: var(--body); font-size: 15px; line-height: 1.6;
  white-space: pre-line; max-width: 65ch;
}
.pd-desc:last-child { margin-bottom: 0; }
.pd-carousel { position: relative; margin-top: 4px; }
.pdc-viewport { overflow: hidden; border: 1px solid var(--b4); border-radius: var(--r-card); background: var(--tile); }
.pdc-track { display: flex; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.pdc-slide { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block; cursor: zoom-in; background: var(--tile); }
.pdc-slide.pdc-failed { visibility: hidden; }
.pdc-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; font-size: 22px; line-height: 1;
  color: var(--paper); background: rgba(23,50,74,0.55); background-clip: padding-box;
  border: 1px solid var(--on-navy-gold); border-radius: var(--r-pill); cursor: pointer;
  transition: background .18s ease, transform .06s ease;
}
.pdc-arrow:hover { background: rgba(217,180,90,0.28); }
.pdc-arrow:active { transform: translateY(-50%) scale(0.96); }
.pdc-prev { left: 10px; }
.pdc-next { right: 10px; }
.pdc-dots { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
.pdc-dot { width: 8px; height: 8px; padding: 0; border-radius: var(--r-pill); border: 1px solid var(--b2); background: transparent; cursor: pointer; transition: transform .06s ease, background .18s ease; }
.pdc-dot.is-active { background: var(--ink); border-color: var(--ink); }
.pdc-dot:active { transform: scale(0.9); }

.lightbox {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: rgba(11,26,39,0.86); padding: 24px;
}
.lightbox.hidden { display: none; }

/* Shared fullscreen photo gallery (product carousel + Bounty Board) over the
   .lightbox overlay above. Own lb-* element classes. */
.lb-img {
  max-width: 92vw; max-height: 88vh; object-fit: contain;
  border-radius: var(--r-card); box-shadow: 0 20px 60px -20px rgba(0,0,0,0.7);
  touch-action: pinch-zoom; cursor: zoom-in;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.lb-img.is-zoomed { cursor: zoom-out; }
.lb-close {
  position: absolute; top: 16px; right: 20px; padding: 8px 16px;
  font-family: var(--display); font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--paper); background: transparent;
  border: 1px solid var(--on-navy-gold); border-radius: var(--r-pill); cursor: pointer;
}
.lb-close:hover { background: rgba(217,180,90,0.18); }
.lb-prev, .lb-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; font-size: 24px; line-height: 1;
  color: var(--paper); background: rgba(23,50,74,0.55); background-clip: padding-box;
  border: 1px solid var(--on-navy-gold); border-radius: var(--r-pill); cursor: pointer;
}
.lb-prev:hover, .lb-next:hover { background: rgba(217,180,90,0.28); }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-counter {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  font-family: var(--display); font-size: 12.5px; letter-spacing: 0.5px;
  color: var(--paper); background: rgba(23,50,74,0.55);
  border: 1px solid var(--on-navy-gold); border-radius: var(--r-pill); padding: 4px 14px;
}

/* Add-email prompt inside the unlock/edit detail */
.add-email-box { margin: 6px 0 4px; padding: 14px 16px; background: var(--tile); border: 1px dashed var(--b4); border-radius: var(--r-card); }
.add-email-copy { margin: 0 0 10px; font-size: 14px; color: var(--body); }
.ae-note { margin: 8px 0 0; font-size: 13px; color: var(--ok-bg); }

/* GCash payment card on confirmation screen */
.pay-sum { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; padding: 12px 14px; border: 1px solid #e6ddc7; border-radius: 10px; }
.pay-sum-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--body); }
.pay-sum-row strong { color: var(--ink); }
.pay-sum-row.is-balance { border-top: 1px dashed #e6ddc7; margin-top: 4px; padding-top: 8px; }
.pay-sum-row.is-balance strong { color: var(--red); }
.pay-card {
  margin: 18px 26px 4px;
  padding: 18px 20px 20px;
  background: var(--tile);
  border: 1px solid var(--b3);
  border-radius: var(--r-card);
  text-align: center;
}
.pay-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.pay-amount { font-size: 13px; color: var(--body); margin-top: 4px; }
.pay-amount strong { color: var(--red); }
.pay-qr {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
  margin: 14px auto 0;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-product);
}
.pay-deadline { margin-top: 12px; font-size: 12.5px; color: var(--muted); font-family: var(--serif); }
.pay-deadline.is-overdue { color: var(--red); font-weight: 600; }
.pay-skip {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 26px 0; font-size: 13.5px; color: var(--body); cursor: pointer;
}
.pay-skip input[type="checkbox"] {
  width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--red); cursor: pointer;
}
.pay-skipped { margin: 0; font-size: 12.5px; color: var(--muted); font-family: var(--serif); }
.pay-received {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 26px 4px; padding: 12px 16px;
  background: var(--ok-bg); border: 1px solid var(--ok-border);
  border-radius: var(--r-card); color: var(--ok-text); font-size: 13px;
}
.pay-received svg { flex: 0 0 auto; }
.pay-sent-wrap { margin: 12px 26px 0; }
#pay-sent-error { margin: 6px 0 0; }
.pay-submitted {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 26px 4px; padding: 12px 16px;
  background: var(--tile); border: 1px solid var(--b3);
  border-radius: var(--r-card); color: var(--ink); font-size: 13px; font-family: var(--serif);
}
.pd-deadline {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--gold);
  font-family: var(--serif);
  font-style: italic;
}

/* ==========================================================================
   Dashboard login screen (email + one-time code)
   ========================================================================== */
.dash-login-card {
  width: 100%; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px;
  background: var(--paper); border: 1px solid var(--b1);
  box-shadow: 0 1px 0 #fffaf0 inset, 0 18px 40px -22px rgba(23,50,74,0.55);
  border-radius: var(--r-card); padding: clamp(24px, 5vw, 40px);
}
.dash-copy { color: var(--muted); line-height: 1.6; }
.dash-remember { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--body); margin: 2px 0 4px; cursor: pointer; }
.dash-remember input { width: 16px; height: 16px; accent-color: var(--ink); }
.dash-signing { text-align: center; color: var(--muted); font-family: var(--display); letter-spacing: 0.3px; padding: 8px 0; }
/* Solid secondary buttons (Back / Resend) so they read clearly, not as faint outlines. */
.dash-login-card .btn-outline { background: var(--tile); border-color: var(--b2); }
.dash-login-card .btn-outline:hover { background: var(--b1); }
/* Batch 1 legacy lookup entry (TEMPORARY): sits on the dark backdrop OUTSIDE the
   card, so it needs its own high-contrast gold chip (navy-on-gold, like the
   masthead) instead of the faint .text-link muted underline. Remove with the feature. */
.dash-batch1-link {
  display: block; width: fit-content; max-width: 100%; margin: 20px auto 0;
  padding: 12px 22px; font-family: var(--serif); font-size: 14.5px; line-height: 1.4;
  text-align: center; cursor: pointer; text-decoration: none;
  color: var(--ink); background: var(--gold-3); border: 1px solid var(--gold-2);
  border-radius: var(--r-pill); box-shadow: 0 10px 24px -12px rgba(0,0,0,0.6);
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
.dash-batch1-link:hover { background: var(--gold-2); color: var(--paper); }
.dash-batch1-link:active { transform: translateY(1px); }

/* ==========================================================================
   Dashboard order list + drill-in back-link
   ========================================================================== */
.dash-list { width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.dash-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 16px 18px; border: 1px solid var(--b1); border-radius: 12px; background: var(--field); cursor: pointer; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.dash-row:hover { border-color: rgba(0,0,0,0.28); }
.dash-row:active { transform: translateY(-1px); }
.dash-row-name { font-weight: 600; }
.dash-row-product { font-size: 0.9em; opacity: 0.75; margin-top: 2px; }
.dash-row-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dash-row-bal { font-size: 0.85em; opacity: 0.8; }
.dash-empty {
  max-width: 480px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center;
  background: var(--paper); border: 1px solid var(--b1);
  box-shadow: 0 1px 0 #fffaf0 inset, 0 18px 40px -22px rgba(23,50,74,0.55);
  border-radius: var(--r-card); padding: clamp(24px, 5vw, 40px); color: var(--muted);
}
/* Navigation controls that sit on the dark hero (not on a parchment panel). */
.dash-back, .dash-signout, .dash-home {
  display: block; width: fit-content; padding: 9px 16px;
  font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--paper); background: rgba(23,50,74,0.6);
  border: 1px solid var(--on-navy-gold); border-radius: var(--r-input);
  cursor: pointer; box-shadow: 0 6px 18px rgba(9,20,30,0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}
.dash-back:hover, .dash-signout:hover, .dash-home:hover { background: var(--ink); }
.dash-back:active, .dash-signout:active, .dash-home:active { transform: translateY(-1px); }
.dash-back { margin: 0 0 14px; }
.dash-signout { margin: 22px auto 0; }
.dash-home { margin: 10px auto 0; }
@media (max-width: 767px) { .dash-list { padding-left: 4px; padding-right: 4px; } }

/* ===== Customer invoice ===== */
.invoice-actions { display: flex; gap: 12px; justify-content: flex-end; width: 100%; max-width: 720px; margin: 0 auto 16px; }
.invoice-doc {
  width: 100%; max-width: 720px; margin: 0 auto; background: var(--paper);
  border: 1px solid var(--b1); border-radius: var(--r-card); padding: 32px;
  color: var(--body); box-shadow: var(--shadow-card);
}
.inv-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 2px solid var(--b1); padding-bottom: 16px; }
.inv-brand { font-family: var(--display); font-size: 20px; font-weight: 700; }
.inv-tag { font-size: 13px; color: var(--muted); margin-top: 2px; }
.inv-head-right { text-align: right; }
.inv-kind { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: 0.06em; }
.inv-no { font-size: 13px; color: var(--muted); margin-top: 2px; }
.inv-date { font-size: 13px; margin-top: 2px; }
.inv-date span { color: var(--muted); }
.inv-section-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 6px; }
.inv-billto { padding: 16px 0; border-bottom: 1px solid var(--b1); }
.inv-bt-name { font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.inv-bt-row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; padding: 2px 0; }
.inv-bt-row span:first-child { color: var(--muted); }
.inv-lines { padding: 16px 0 8px; }
.inv-line-head { display: flex; justify-content: space-between; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); border-bottom: 1px solid var(--b1); padding-bottom: 6px; }
.inv-line { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; padding: 10px 0; }
.inv-totals { border-top: 2px solid var(--b1); padding-top: 12px; }
.inv-total-row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; padding: 3px 0; }
.inv-total-strong { font-weight: 700; font-size: 16px; border-top: 1px solid var(--b1); margin-top: 6px; padding-top: 8px; }
.inv-balance { margin-top: 20px; text-align: center; }
.inv-balance-note { font-size: 14px; margin-bottom: 12px; }
.inv-qr { width: 180px; height: auto; border-radius: 8px; }
.inv-paid-note { margin-top: 20px; font-weight: 600; text-align: center; }
.inv-foot { margin-top: 24px; font-size: 12px; color: var(--muted); text-align: center; }

@media print {
  body { background: #fff; }
  #masthead, .inv-noprint { display: none !important; }
  .invoice-doc { max-width: none; margin: 0; border: none; border-radius: 0; box-shadow: none; background: #fff; color: #000; padding: 0; }
  .inv-billto, .inv-lines, .inv-totals, .inv-balance { page-break-inside: avoid; }
  .inv-tag, .inv-no, .inv-date span, .inv-section-label, .inv-bt-row span:first-child, .inv-foot { color: #333; }
}

.inv-send-status { max-width: 720px; margin: -4px auto 12px; text-align: right; font-size: 14px; color: var(--ok-bg); }
.inv-send-status.err { color: var(--red); }

/* ===== Order progress tracker (detail) ===== */
.tracker { margin: 4px 0 20px; }
.track-pay { margin-bottom: 18px; }
.track-pay-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.track-pay-state { font-size: 14px; color: var(--ink); font-weight: 600; }
.track-pay-state.is-verifying { color: var(--gold); animation: track-pulse 1.8s ease-in-out infinite; }
.track-pay-amt { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.track-bar { height: 10px; background: var(--tile); border: 1px solid var(--b1); border-radius: var(--r-pill); overflow: hidden; }
.track-bar-fill { display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--gold), var(--gold-2)); transform-origin: left;
  transform: scaleX(var(--pct)); animation: track-fill .8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.track-bar-fill.is-verifying { animation: track-fill .8s cubic-bezier(0.16, 1, 0.3, 1) both, track-pulse 1.8s ease-in-out infinite; }

.track-timeline { display: flex; align-items: center; }
.track-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; }
.track-line { flex: 1 1 auto; height: 2px; background: var(--b1); margin: 0 6px; margin-bottom: 20px; }
.track-node { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--b1); background: var(--field);
  display: inline-flex; align-items: center; justify-content: center; transition: background .3s cubic-bezier(0.16,1,0.3,1), border-color .3s cubic-bezier(0.16,1,0.3,1); }
.track-node svg { width: 12px; height: 12px; }
.track-label { font-size: 12px; color: var(--muted); }
.track-step.is-done .track-node { background: var(--gold-2); border-color: var(--gold-2); }
.track-step.is-current .track-node { background: var(--field); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,125,43,0.18); }
.track-step.is-current .track-label { color: var(--ink); font-weight: 600; }
.track-step.is-verifying .track-node { animation: track-pulse 1.8s ease-in-out infinite; }

@keyframes track-fill { from { transform: scaleX(0); } }
@keyframes track-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.cv-controls { display: grid; gap: 12px; margin: 16px 0; }
/* The "or browse a set" label sits on the dark backdrop -> brighten it (muted gold is
   too dim here) so it reads clearly. */
.cv-controls .field-label { color: #f0e4c4; font-size: 13px; font-weight: 700; }
/* Loose text sits directly on the dark crew backdrop -> use light cream, not muted. */
.cv-rate { font-size: 0.82rem; color: #e9dcbb; margin: 2px 0 12px; }
.cv-loading, .cv-more { color: #e9dcbb; padding: 12px 2px; font-size: 0.9rem; }
.cv-results { display: grid; gap: 10px; }
/* Each result is an opaque parchment card so the Japanese text + price read clearly
   over the backdrop (mirrors .product-card / .detail panels). */
.cv-card {
  display: flex; gap: 14px; align-items: center;
  background: var(--paper); border: 1px solid var(--b1); border-radius: var(--r-card);
  padding: 12px 14px; box-shadow: 0 8px 20px -14px rgba(0,0,0,0.45);
}
.cv-thumb { width: 60px; height: auto; border-radius: 6px; border: 1px solid var(--b1); flex-shrink: 0; }
.cv-body { min-width: 0; flex: 1; }
.cv-id { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.cv-name { font-weight: 600; color: var(--ink); margin: 2px 0 5px; overflow-wrap: anywhere; }
.cv-php { font-family: var(--display); font-size: 1.2rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.cv-jpy { font-size: 0.82rem; color: var(--muted); margin-top: 1px; }
.cv-asof { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }

/* ==========================================================================
   Bounty Board (user marketplace) — section shell (Task 9)
   Cards/filters/form/interest are filled in by Tasks 10-13.
   ========================================================================== */
.bounty-jump {
  display: block; width: fit-content; margin: 16px auto 0; background: none; cursor: pointer;
  font-family: var(--display); font-weight: 600; letter-spacing: 0.5px; font-size: 12px;
  text-transform: uppercase; color: var(--on-navy-gold); border: 1px solid var(--gold-3);
  border-radius: var(--r-pill); padding: 8px 18px; transition: background 0.2s ease, transform 0.2s ease;
}
.bounty-jump:hover { background: rgba(217,180,90,0.14); }
.bounty-jump:active { transform: translateY(-1px); }

.bounty-board {
  display: block; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(217,180,90,0.35);
}
.bounty-head { text-align: center; margin-bottom: 18px; }
.bounty-head h2 {
  font-family: var(--display); font-weight: 600; color: var(--paper);
  font-size: 22px; margin: 0 0 6px; text-shadow: 0 2px 14px rgba(9,20,30,0.7);
}
.bounty-sub {
  margin: 0 auto; color: var(--on-navy-blue); max-width: 400px; font-size: 14px; line-height: 1.5;
  text-shadow: 0 1px 10px rgba(9,20,30,0.55);
}
.bounty-controls {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0 0 18px;
}
.bounty-controls .bounty-filter {
  flex: 1 1 160px; min-width: 0; color: #f0e4c4; font-size: 13px; font-weight: 700;
}
.bounty-controls .field { margin-top: 6px; }
@media (max-width: 767px) {
  .bounty-controls .bounty-filter { flex: 1 1 100%; }
}
.bounty-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
}
.bounty-card.skeleton {
  background: var(--paper); border: 1px solid var(--b1); border-radius: var(--r-card);
  padding: 14px; display: flex; flex-direction: column; gap: 10px; animation: none;
}
.bounty-card.skeleton .sk-img {
  height: 120px; border-radius: var(--r-input);
  background: linear-gradient(90deg, #eadfc0 25%, #f3ecd6 37%, #eadfc0 63%);
  background-size: 800px 100%; animation: shimmer 1.3s infinite linear;
}
.bounty-card.skeleton .sk-line {
  height: 12px; border-radius: 3px;
  background: linear-gradient(90deg, #eadfc0 25%, #f3ecd6 37%, #eadfc0 63%);
  background-size: 800px 100%; animation: shimmer 1.3s infinite linear;
}
.bounty-card.skeleton .sk-line.short { width: 60%; }
.bounty-empty {
  grid-column: 1 / -1; background: var(--tile); border: 1px dashed var(--b2); border-radius: var(--r-card);
  padding: 32px 24px; text-align: center; color: var(--muted); font-size: 14.5px; line-height: 1.5;
}
.bounty-empty p { margin: 0 0 14px; }
.bounty-error {
  text-align: center; color: var(--red); font-size: 14px; line-height: 1.6;
}

.bounty-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--b1); border-radius: var(--r-card);
  box-shadow: var(--shadow-product); overflow: hidden;
}
.b-new {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  font-family: var(--display); font-weight: 600; letter-spacing: 1px; font-size: 10.5px;
  text-transform: uppercase; color: var(--paper); background: var(--red);
  border: 1px solid var(--red-border); border-radius: var(--r-pill); padding: 3px 10px;
}
.b-img {
  aspect-ratio: 4 / 3; background: var(--tile); border-bottom: 1px solid var(--b1); line-height: 0;
}
.b-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-img.is-clickable { cursor: zoom-in; }
.b-img.is-clickable:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.b-noimg {
  background: repeating-linear-gradient(135deg, var(--tile) 0 10px, var(--b1) 10px 20px);
}
.b-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.b-title {
  font-family: var(--display); font-weight: 600; color: var(--ink); font-size: 17px; margin: 0;
}
.b-bounty { margin: 0; font-family: var(--display); font-weight: 600; color: var(--gold); font-size: 14px; }
.b-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.b-badge {
  font-family: var(--display); font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--ink); background: var(--tile); border: 1px solid var(--b2);
  border-radius: var(--r-pill); padding: 3px 9px;
}
.b-badge.b-set { color: var(--paper); background: var(--ink); border-color: var(--ink-border); }
.b-badge.b-cardnum { color: var(--gold); border-color: var(--gold); }
.b-desc {
  margin: 0; color: var(--body); font-size: 13.5px; line-height: 1.5;
  overflow-wrap: anywhere;
}
.b-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.b-time { font-size: 12px; color: var(--muted); }
.b-interest {
  display: inline-flex; align-items: center; gap: 6px; background: none; cursor: pointer;
  border: 1px solid var(--b2); border-radius: var(--r-pill); padding: 5px 10px;
  font-family: var(--display); font-size: 12.5px; color: var(--ink);
  transition: transform 0.2s ease, background 0.2s ease;
}
.b-interest:hover { background: var(--tile); }
.b-interest:active { transform: translateY(1px); }
.b-heart {
  position: relative; width: 12px; height: 12px; flex: 0 0 auto;
  background: var(--muted-2);
  clip-path: path('M6 11 C1 7.5 0 5 0 3 C0 1 1.5 0 3 0 C4.3 0 5.4 0.8 6 2 C6.6 0.8 7.7 0 9 0 C10.5 0 12 1 12 3 C12 5 11 7.5 6 11 Z');
  transition: background 0.2s ease;
}
.b-heart::before {
  content: ''; position: absolute; inset: 0; transform: scale(0.6); transform-origin: center;
  background: var(--paper);
  clip-path: path('M6 11 C1 7.5 0 5 0 3 C0 1 1.5 0 3 0 C4.3 0 5.4 0.8 6 2 C6.6 0.8 7.7 0 9 0 C10.5 0 12 1 12 3 C12 5 11 7.5 6 11 Z');
}
.b-interest.is-marked .b-heart { background: var(--gold-3); }
.b-interest.is-marked .b-heart::before { background: transparent; }
.b-offer { padding: 9px 18px; font-size: 12.5px; }

/* ---- Bounty offer button + modal ---- */
.b-offer-row { margin-top: 12px; }
.b-offer { width: 100%; }
.b-sold-badge { display:inline-block; padding:9px 18px; border:1px solid var(--b2); border-radius:var(--r-sm,8px); color:var(--muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; }

.offer-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(28, 20, 8, 0.55); padding: 20px;
  opacity: 1; transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.offer-modal.hidden { display: none; }
.offer-card {
  position: relative; width: 100%; max-width: 420px;
  max-height: 90vh; overflow-y: auto;
  background: var(--paper, #fffdf6); border: 1px solid var(--b2, #d8c9a0);
  border-radius: var(--r-lg, 16px); padding: 28px 24px;
  box-shadow: 0 24px 60px -30px rgba(40, 28, 8, 0.6);
}
.of-close {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; color: var(--muted, #7a6c50);
  font: inherit; cursor: pointer; padding: 6px;
}
.of-title { font-family: var(--display, 'Cinzel', serif); margin: 0 0 6px; }
.of-sub { color: var(--muted, #7a6c50); margin: 0 0 18px; font-size: 0.9rem; }
.of-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.of-hint { color: var(--muted, #7a6c50); font-size: 0.82rem; margin: 2px 0 0; }
@media (max-width: 480px) { .offer-card { padding: 22px 16px; } }

/* ==========================================================================
   Bounty Board — post-a-bounty form (Task 12)
   ========================================================================== */
.bounty-head-actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: stretch; margin-top: 14px;
}
.bounty-post-btn { margin-top: 0; }
/* Guide link styled as a secondary "ghost" button that reads clearly on the dark board backdrop. */
.bounty-guide-btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: transparent; color: var(--paper); border-color: var(--on-navy-gold);
}
.bounty-guide-btn:hover { background: rgba(217,180,90,0.14); color: var(--paper); }
.bounty-guide-btn svg { color: var(--on-navy-gold); }
.bounty-form {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--paper); border: 1px solid var(--b1); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); padding: 22px 24px; margin-bottom: 22px;
  animation: riseIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bf-heading { margin: 0; font-family: var(--display); font-weight: 600; color: var(--ink); font-size: 19px; }
.bf-sub { margin: -10px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.bf-field { display: flex; flex-direction: column; gap: 6px; }
.bf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .bf-row { grid-template-columns: 1fr; } }
.bf-file { padding: 9px 12px; cursor: pointer; }
.bf-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.bf-thumb {
  position: relative; width: 84px; height: 84px; border-radius: var(--r-input);
  overflow: hidden; border: 1px solid var(--b2); background: var(--tile);
}
.bf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-thumb-remove {
  position: absolute; bottom: 0; left: 0; right: 0; background: rgba(23,50,74,0.82);
  color: var(--paper); border: none; font-family: var(--display); font-size: 10px;
  letter-spacing: 0.5px; text-transform: uppercase; padding: 4px 0; cursor: pointer;
}
.bf-thumb-remove:active { transform: translateY(1px); }
.bf-hint { margin: 0; font-size: 12px; color: var(--muted-2); }
.bf-count { margin: 0; text-align: right; font-size: 11.5px; color: var(--muted-2); }
.bf-count-over { color: var(--red); }
.bf-price-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.bf-price-field { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bf-offers-row {
  display: flex; align-items: center; gap: 8px; padding-bottom: 11px;
  font-size: 13.5px; color: var(--body); cursor: pointer;
}
.bf-offers-row input { width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer; }
/* Honeypot: off-screen, not display:none, so bots that skip hidden fields still fill it in. */
.bf-honeypot {
  position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px;
  overflow: hidden; white-space: nowrap;
}
.bf-code-step { display: flex; flex-direction: column; gap: 10px; }
.bf-code-step .bf-hint { font-size: 13.5px; color: var(--body); }
.bounty-form-done { margin-bottom: 22px; }
.bounty-form-done .btn-outline { margin-top: 4px; }

/* ---- Deal deep-link pages ---- */
.deal-card {
  width: 100%; max-width: 520px; margin: 0 auto;
  background: var(--paper); border: 1px solid var(--b1); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); padding: 24px 22px 30px;
}
/* The shared .pay-card carries side margins for the order flow; inside the deal panel
   let it fill the panel width so the QR box lines up with the fields. */
.deal-card .pay-card { margin-left: 0; margin-right: 0; }
.deal-sub { color: var(--muted, #7a6c50); margin: 0 0 18px; }
.deal-loading { text-align: center; color: var(--muted, #7a6c50); padding: 32px; }
.of-deal-detail { margin-top: 6px; font-size: 0.85rem; color: var(--ink, #2a2a2a); }
.deal-report { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--b2); }
.deal-report-form { margin-top: 12px; }
.deal-reported { color: var(--gold); font-style: italic; }

.pay-proof-input { display: block; width: 100%; margin: 8px 0; color: var(--ink); }
.pay-proof-preview { display: block; max-width: 220px; width: 100%; border-radius: var(--r-card); border: 1px solid var(--b2); margin-bottom: 8px; }
.pay-proof-preview.hidden { display: none; }
#pay-sent[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ==========================================================================
   Floating Contact button — always visible, fixed bottom-right (mobile + desktop)
   ========================================================================== */
.contact-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.contact-fab__menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
/* Collapsed: actions hidden and non-interactive (aria-label still exposes them). */
.contact-fab:not(.is-open) .contact-fab__menu { pointer-events: none; }
.contact-fab__menu li {
  opacity: 0; transform: translateY(12px) scale(0.9);
  transition: opacity .28s cubic-bezier(0.16, 1, 0.3, 1),
              transform .28s cubic-bezier(0.16, 1, 0.3, 1);
}
.contact-fab.is-open .contact-fab__menu li { opacity: 1; transform: translateY(0) scale(1); }
/* Staggered rise: the item nearest the toggle leads, the top item trails. */
.contact-fab.is-open .contact-fab__menu li:nth-child(1) { transition-delay: .12s; }
.contact-fab.is-open .contact-fab__menu li:nth-child(2) { transition-delay: .06s; }
.contact-fab.is-open .contact-fab__menu li:nth-child(3) { transition-delay: 0s; }

.contact-fab__action { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.contact-fab__label {
  font-family: var(--display); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink); background: var(--paper); border: 1px solid var(--b1);
  border-radius: var(--r-pill); padding: 6px 13px; white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(9, 20, 30, 0.5);
}
.contact-fab__icon, .contact-fab__toggle {
  width: 48px; height: 48px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); background: var(--ink); color: var(--on-navy-gold);
  border: 1px solid var(--on-navy-gold);
  box-shadow: 0 10px 22px -10px rgba(9, 20, 30, 0.6), 0 1px 0 rgba(255, 250, 240, 0.15) inset;
  transition: background .18s ease, transform .08s ease, box-shadow .18s ease;
}
.contact-fab__icon svg, .contact-fab__toggle svg { width: 22px; height: 22px; display: block; }
.contact-fab__toggle { cursor: pointer; }
.contact-fab__action:hover .contact-fab__icon, .contact-fab__toggle:hover { background: var(--ink-hover); }
.contact-fab__action:active .contact-fab__icon, .contact-fab__toggle:active { transform: scale(0.96); }

/* Toggle glyph swap: chat bubble when closed, X when open (turns to the red seal). */
.contact-fab__toggle-close { display: none; }
.contact-fab.is-open .contact-fab__toggle-open { display: none; }
.contact-fab.is-open .contact-fab__toggle-close { display: inline-flex; }
.contact-fab.is-open .contact-fab__toggle { background: var(--red); border-color: var(--red-border); }

.contact-fab__toggle:focus-visible,
.contact-fab__action:focus-visible .contact-fab__icon {
  outline: 2px solid var(--gold-3); outline-offset: 3px;
}

@media (max-width: 600px) {
  .contact-fab { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-fab__menu li { transition: opacity .01ms; transform: none; }
  .contact-fab.is-open .contact-fab__menu li { transform: none; }
}

/* ==========================================================================
   Floating "Main Menu" button — fixed bottom-left, mirrors the Contact FAB on
   the opposite corner. Shown only inside a game; hidden on the hub and before
   any game context is set (both via the data-game selector below).
   ========================================================================== */
.menu-fab {
  position: fixed; left: 22px; bottom: 22px; z-index: 900;
  display: none; align-items: center; gap: 10px;
  padding: 0; border: none; background: none; cursor: pointer;
  font-family: var(--display);
}
html[data-game]:not([data-game="hub"]) .menu-fab { display: inline-flex; }
.menu-fab__icon {
  width: 48px; height: 48px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); background: var(--ink); color: var(--on-navy-gold);
  border: 1px solid var(--on-navy-gold);
  box-shadow: 0 10px 22px -10px rgba(9, 20, 30, 0.6), 0 1px 0 rgba(255, 250, 240, 0.15) inset;
  transition: background .18s ease, transform .08s ease;
}
.menu-fab__icon svg { width: 22px; height: 22px; display: block; }
.menu-fab__label {
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink); background: var(--paper); border: 1px solid var(--b1);
  border-radius: var(--r-pill); padding: 6px 13px; white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(9, 20, 30, 0.5);
}
.menu-fab:hover .menu-fab__icon { background: var(--ink-hover); }
.menu-fab:active .menu-fab__icon { transform: scale(0.96); }
.menu-fab:focus-visible .menu-fab__icon { outline: 2px solid var(--gold-3); outline-offset: 3px; }

@media (max-width: 600px) {
  .menu-fab { left: 16px; bottom: 16px; }
}

/* In-app-browser nudge: a one-time bar shown only inside Messenger/Facebook/
   Instagram webviews, where backend requests are flaky. Prompts opening the page
   in a real browser. Sits above the masthead; dismissible. */
.inapp-nudge {
  width: 100%; max-width: 720px; margin: 0 auto 20px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  background: var(--ink); color: #f2ead6;
  border: 1px solid var(--ink-border); border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 12px 14px; font-family: var(--serif); font-size: 14px; line-height: 1.45;
}
.inapp-nudge-icon { flex: none; color: var(--gold-3); display: inline-flex; }
.inapp-nudge-text { flex: 1 1 240px; min-width: 0; }
.inapp-nudge-text strong { color: var(--gold-3); font-weight: 600; }
.inapp-nudge-copy {
  flex: none; cursor: pointer; font-family: var(--serif); font-size: 13px;
  color: var(--ink); background: var(--gold-3);
  border: 1px solid var(--gold); border-radius: var(--r-pill);
  padding: 7px 15px; white-space: nowrap;
  transition: background 0.2s ease, transform 0.15s ease;
}
.inapp-nudge-copy:hover { background: var(--gold-2); }
.inapp-nudge-copy:active { transform: translateY(1px); }
.inapp-nudge-close {
  flex: none; margin-left: auto; cursor: pointer;
  color: #cdbfa0; background: transparent; border: 0; padding: 4px;
  display: inline-flex; border-radius: 4px; transition: color 0.2s ease, transform 0.15s ease;
}
.inapp-nudge-close:hover { color: #f2ead6; }
.inapp-nudge-close:active { transform: translateY(1px); }

/* Community group-chat invite on the Order Manifest (confirmed slots) */
.community-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 0;
  padding: 16px 18px;
  border: 1px solid #d9cdb4;
  border-left: 4px solid #d9b45a;
  border-radius: 12px;
  background: #fbf6ea;
  color: #2a2118;
  text-decoration: none;
  box-shadow: 0 8px 20px -12px rgba(42, 33, 24, 0.35);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.community-cta:hover { box-shadow: 0 10px 24px -12px rgba(42, 33, 24, 0.45); }
.community-cta:active { transform: translateY(1px); }
.community-cta-icon { flex: 0 0 auto; display: flex; }
.community-cta-body { display: flex; flex-direction: column; gap: 2px; }
.community-cta-body strong { font-size: 15px; }
.community-cta-body > span { font-size: 13px; color: #6b5d45; line-height: 1.4; }
.community-cta-arrow { margin-left: auto; flex: 0 0 auto; color: #9c2b23; font-size: 18px; }
@media (max-width: 480px) {
  .community-cta-arrow { display: none; }
}

/* ==========================================================================
   Theme-scoped heading overrides — Pokemon / Hub
   The base masthead/section-heading rules above (.masthead h1, .subtitle,
   .screen-head h2/p, .head-or, .masthead .eyebrow) were tuned for the dark
   One Piece crew-photo backdrop and use light text colors. Pokemon and Hub
   have no dark backdrop (near-white --page-grad), so those light colors are
   unreadable there. These additive overrides recolor headings to dark,
   legible text for those two themes only — the One Piece rules above are
   untouched.
   ========================================================================== */
html[data-game="pokemon"] .masthead .eyebrow { color: var(--gold); }
html[data-game="pokemon"] .masthead h1 { color: var(--gold); text-shadow: none; }
/* Pokemon storefront sits over a dark backdrop image -> light text for legibility. */
html[data-game="pokemon"] .masthead .subtitle { color: rgba(245, 247, 252, 0.85); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
html[data-game="pokemon"] .screen-head h2 { color: #f4f6fb; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.78); }
html[data-game="pokemon"] .screen-head p { color: rgba(245, 247, 252, 0.82); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72); }
html[data-game="pokemon"] .screen-head .head-or { color: rgba(245, 247, 252, 0.8); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72); }

html[data-game="hub"] .masthead .eyebrow { color: var(--ink); }
html[data-game="hub"] .masthead h1 { color: var(--ink); text-shadow: none; }
html[data-game="hub"] .masthead .subtitle { color: var(--muted); text-shadow: none; }
html[data-game="hub"] .screen-head h2 { color: var(--ink); text-shadow: none; }
html[data-game="hub"] .screen-head p { color: var(--muted); text-shadow: none; }
html[data-game="hub"] .screen-head .head-or { color: var(--muted); text-shadow: none; }
/* Hub sits over the full-bleed artwork: frosted translucent cards with a soft
   halo behind the headings. One shared fill for every card (One Piece, Pokemon,
   and any future game) keeps the contrast identical regardless of whether warm
   or bright art sits behind a given card — the backdrop no longer tints it. */
html[data-game="hub"] .game-card {
  background: rgba(255, 255, 255, 0.68);
  -webkit-backdrop-filter: blur(6px) saturate(108%);
  backdrop-filter: blur(6px) saturate(108%);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 12px 32px -16px rgba(18, 28, 46, 0.5);
}
html[data-game="hub"] .game-card:hover { border-color: #ffffff; }
html[data-game="hub"] .masthead .eyebrow,
html[data-game="hub"] .masthead h1,
html[data-game="hub"] .game-hub-title {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 3px rgba(0, 0, 0, 0.5);
}
/* Translucent panel behind each hub heading so the white text stays readable
   over the busy artwork. */
html[data-game="hub"] .masthead h1,
html[data-game="hub"] .game-hub-title,
html[data-game="hub"] #mast-eyebrow {
  display: inline-block;
  background: rgba(16, 24, 40, 0.46);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 16px;
  padding: 6px 24px;
}
html[data-game="hub"] #mast-eyebrow { padding: 3px 14px; border-radius: 999px; }
/* Mobile: shift the artwork toward the right so the left-side characters
   (Pikachu + the ship's figurehead) stay in frame instead of being cropped. */
@media (max-width: 767px) {
  html[data-game="hub"] body::before { background-position: 32% center; }
  /* Pokemon characters sit center-right; shift the crop toward them so they show on narrow screens. */
  html[data-game="pokemon"] body::before { background-position: 70% center; }
}