:root {
  --growth-ink: #30271f;
  --growth-paper: #fff9ed;
  --growth-line: rgba(86, 63, 39, .18);
  --growth-brass: #c58a38;
  --growth-green: #4c7658;
  --growth-red: #a44d3c;
}

.game-card-kicker { color: #8a6841; font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }

.bookcoin-event-notice {
  width: min(1180px, calc(100% - 28px));
  margin: 14px auto 0;
  padding: 14px 16px;
  color: var(--growth-ink);
  background: linear-gradient(135deg, #fff7dc, #f4e2b6);
  border: 1px solid rgba(128, 86, 31, .3);
  border-left: 5px solid var(--growth-brass);
  box-shadow: 0 10px 22px rgba(79, 48, 20, .08);
}

.bookcoin-event-notice-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.bookcoin-event-notice-heading strong { font-size: 17px; }
.bookcoin-event-list { display: grid; gap: 8px; }
.bookcoin-event-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(170px, auto) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--growth-line);
}
.bookcoin-event-row > div { display: grid; gap: 3px; }
.bookcoin-event-row > div span { color: #6b5c4c; font-size: 11px; }
.bookcoin-event-protected { color: #7b4e1f; font-size: 12px; font-weight: 700; }
.bookcoin-event-status { grid-column: 1 / -1; margin: 0; color: var(--growth-green); font-size: 12px; min-height: 1em; }

.quick-bookcoin-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 16px;
  padding: 11px 12px;
  background: linear-gradient(135deg, #fff8df, #f6e7bd);
  border: 1px solid rgba(128, 86, 31, .24);
  border-left: 4px solid var(--growth-brass);
}
.quick-bookcoin-copy { display: grid; gap: 3px; min-width: 0; }
.quick-bookcoin-copy strong { color: #62431f; font-size: 14px; }
.quick-bookcoin-copy span { color: #786855; font-size: 11px; line-height: 1.45; }
.quick-bookcoin-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; }
.quick-bookcoin-button .bookcoin-icon { width: 18px; height: 18px; }

.bookcoin-redeem-drawer { max-width: 520px; }
.bookcoin-redeem-guide {
  margin-bottom: 14px;
  padding: 12px 14px;
  color: #5f4b36;
  background: #fff8e8;
  border: 1px solid rgba(128, 86, 31, .18);
}
.bookcoin-redeem-guide strong { color: #70491d; }
.bookcoin-redeem-guide ol { margin: 8px 0 0; padding-left: 20px; font-size: 12px; line-height: 1.65; }
.bookcoin-redeem-modal-list { display: grid; gap: 10px; }
.bookcoin-redeem-card { display: grid; gap: 9px; padding: 12px; background: rgba(255, 255, 255, .7); border: 1px solid var(--growth-line); }
.bookcoin-redeem-card-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.bookcoin-redeem-card-heading strong { color: #7b4e1f; font-size: 16px; }
.bookcoin-redeem-card-heading span { color: #786855; font-size: 11px; }
.bookcoin-redeem-field { display: grid; gap: 5px; color: #604c38; font-size: 12px; font-weight: 700; }
.bookcoin-redeem-field input { width: 100%; text-transform: uppercase; letter-spacing: .08em; }
.bookcoin-redeem-card .redeem-event-claim { width: 100%; }
.bookcoin-redeem-empty { margin: 8px 0 14px; color: #786855; font-size: 13px; line-height: 1.6; }

.character-growth-panel {
  display: grid;
  gap: 14px;
  margin: 14px 0 18px;
  padding: 16px;
  color: var(--growth-ink);
  background: radial-gradient(circle at 80% 0%, rgba(208, 167, 92, .22), transparent 34%), var(--growth-paper);
  border: 1px solid var(--growth-line);
  box-shadow: 0 12px 26px rgba(73, 51, 30, .08);
}
.character-growth-hero { display: grid; grid-template-columns: 1fr 154px; gap: 18px; align-items: center; }
.character-growth-copy { min-width: 0; }
.character-growth-copy h2 { margin: 5px 0 6px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(21px, 3vw, 30px); line-height: 1.15; }
.character-growth-copy p { max-width: 62ch; margin: 0; color: #6c5a47; line-height: 1.6; }
.character-growth-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.character-growth-meta span { padding: 5px 8px; color: #6e4b26; background: #f5e8c9; border: 1px solid rgba(126, 83, 32, .18); font-size: 11px; }
.character-growth-art { display: grid; place-items: center; min-height: 150px; overflow: hidden; background: #f0e3cc; border: 1px solid var(--growth-line); }
.character-growth-art img { display: block; width: 100%; height: 150px; object-fit: contain; }
.character-growth-art img[hidden] { display: none !important; }
.character-growth-art canvas { display: block; width: 100%; height: 150px; object-fit: contain; }
.character-growth-art div { color: var(--growth-brass); font-size: 62px; }
.character-growth-roster { display: grid; gap: 12px; }
.character-growth-select-row { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto; align-items: center; gap: 10px; }
.character-growth-select-row label { color: #604c38; font-size: 12px; font-weight: 700; }
.character-growth-guide { display: grid; gap: 4px; padding: 10px 12px; color: #604c38; background: #fff5d9; border-left: 4px solid var(--growth-brass); font-size: 12px; line-height: 1.55; }
.character-growth-guide strong { color: #70491d; }
.character-growth-guide small { color: #786855; font-size: 11px; }
.character-growth-season { display: grid; gap: 9px; padding: 11px 12px; background: #eef3df; border: 1px solid rgba(76, 118, 88, .25); }
.character-growth-season > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.character-growth-season > div:first-child strong { color: #365f42; }
.character-growth-season > div:first-child span { color: #65715d; font-size: 11px; }
.character-growth-task-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.character-growth-task { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px; padding: 7px 8px; color: #6d6b53; background: rgba(255, 255, 255, .65); border: 1px solid rgba(76, 118, 88, .18); font-size: 11px; }
.character-growth-task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.character-growth-task b { color: #365f42; white-space: nowrap; }
.character-growth-task-claim { width: 100%; min-height: 28px; padding: 4px 6px; color: #365f42; background: #fff8df; border: 1px solid rgba(76, 118, 88, .35); cursor: pointer; font-size: 10px; font-weight: 800; }
.character-growth-task-claim:disabled { color: #7d8a78; cursor: default; opacity: .75; }
.character-growth-task.is-complete { color: #365f42; background: #dfead2; }
.character-growth-rare-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 4px; border-top: 1px solid var(--growth-line); }
.character-growth-rare-heading small, .character-growth-rare-heading span { color: #786855; font-size: 11px; }
.character-growth-rare-preview { display: grid; place-items: center; min-height: 180px; overflow: hidden; background: #201a2b; border: 1px solid rgba(197, 138, 56, .36); }
.character-growth-rare-preview img { display: block; width: 100%; max-height: 360px; object-fit: contain; }
.character-growth-rare-placeholder { display: grid; place-items: center; min-height: 140px; color: #e7cf9d; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.character-growth-rare-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.character-growth-rare-card { display: grid; gap: 5px; min-height: 112px; padding: 10px; background: rgba(255, 255, 255, .65); border: 1px solid var(--growth-line); }
.character-growth-rare-card.is-locked { opacity: .72; }
.character-growth-rarity { color: var(--growth-brass); letter-spacing: .1em; font-size: 11px; }
.character-growth-rare-card strong { font-size: 13px; }
.character-growth-rare-card small { color: #786855; line-height: 1.35; }
.character-growth-rare-card button { min-height: 36px; color: #75624c; background: #e9dfce; border: 1px solid rgba(90, 69, 46, .2); }
.character-growth-rare-card button:not(:disabled) { color: #fff8e8; background: #7b4e1f; border-color: #7b4e1f; }

@media (max-width: 700px) {
  .bookcoin-event-notice { width: calc(100% - 20px); margin-top: 10px; padding: 12px; }
  .bookcoin-event-notice-heading { display: grid; gap: 4px; }
  .bookcoin-event-row { grid-template-columns: 1fr auto; }
  .bookcoin-event-row button { grid-column: 1 / -1; width: 100%; }
  .quick-bookcoin-entry { align-items: stretch; flex-direction: column; }
  .quick-bookcoin-button { width: 100%; }
  .character-growth-panel { padding: 12px; }
  .character-growth-hero { grid-template-columns: 1fr 96px; gap: 10px; }
  .character-growth-art { min-height: 112px; }
  .character-growth-art img, .character-growth-art canvas { height: 112px; }
  .character-growth-select-row { grid-template-columns: 1fr; align-items: stretch; }
  .character-growth-select-row button { width: 100%; }
  .character-growth-rare-heading { display: grid; gap: 4px; }
  .character-growth-task-list { grid-template-columns: 1fr 1fr; }
  .character-growth-rare-preview { min-height: 125px; }
  .character-growth-rare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The passport is a secondary management surface. The illustrated scene/shop
   above is the game surface; this section should read like a compact profile,
   not push the player back into a form-first screen. */
.shop-growth-passport .character-growth-panel { padding: 12px; background: #fffaf0; border-color: #d6c39d; box-shadow: none; }
.shop-growth-passport .character-growth-hero { grid-template-columns: minmax(0, 1fr) 128px; gap: 14px; }
.shop-growth-passport .character-growth-copy h2 { font-size: clamp(18px, 2.5vw, 26px); }
.shop-growth-passport .character-growth-copy p { font-size: 12px; }
.shop-growth-passport .character-growth-art { min-height: 128px; background: #ead8b5; border-color: #c9aa72; border-radius: 9px; }
.shop-growth-passport .character-growth-art canvas { height: 128px; }
.shop-growth-passport .character-growth-meta span { padding: 4px 6px; font-size: 10px; }
@media (max-width: 700px) {
  .shop-growth-passport .character-growth-hero { grid-template-columns: minmax(0, 1fr) 98px; gap: 9px; }
  .shop-growth-passport .character-growth-art { min-height: 104px; }
  .shop-growth-passport .character-growth-art canvas { height: 104px; }
}

/* Growth passport art is an identity portrait, not a miniature asset scene.
   Pet/house/car/effect ownership stays in the metadata chips beside it. */
.shop-growth-passport .character-growth-art {
  position: relative;
  min-height: 160px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: radial-gradient(circle at 50% 18%, #f8edcf, #e2c58f 72%);
  border-color: #c9aa72;
}
.shop-growth-passport .character-growth-art-label {
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 8px;
  padding: 3px 6px;
  color: #795a35;
  background: rgba(255, 248, 226, .86);
  border: 1px solid rgba(159, 121, 67, .32);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
}
.shop-growth-passport .character-growth-art canvas {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}
.shop-growth-passport .character-growth-art img,
.shop-growth-passport .character-growth-art img[hidden] { display: none !important; }
@media (max-width: 700px) {
  .shop-growth-passport .character-growth-art {
    min-height: 138px;
    aspect-ratio: 4 / 5;
  }
  .shop-growth-passport .character-growth-art canvas { height: 100%; }
}

/* Approved unified My drawer */
.my-profile-hero{display:grid;gap:16px}.my-profile-hero>div,.myPersonalDetails{padding:16px;border:1px solid #d5bb87;border-radius:16px;background:#fff9e9}#myIdentityCard .header-profile-stack{display:flex!important;align-items:center;gap:16px;width:100%;position:static}#myIdentityCard .profile-avatar{width:72px;height:72px}.my-current-character{display:grid;grid-template-columns:minmax(110px,1fr) minmax(100px,1fr);gap:10px;align-items:center}.my-current-character h2{grid-column:1/-1;font-size:20px}.my-current-character canvas{width:100%;height:220px;grid-row:2/4;min-width:0}.my-profile-links{display:grid;grid-template-columns:1fr 1fr;gap:12px}.my-profile-links button,.my-current-character button{min-height:48px;border:1px solid #cbb482;border-radius:12px;padding:12px;background:#f6e8c7;color:#345742}.my-profile-links span{display:block;font-size:12px;margin-top:8px}#myPersonalDetails{margin-top:16px;padding:16px;border:1px solid #d5bb87;border-radius:16px}#myGrowthPassport{margin-top:18px}#tab-profile .shop-growth-passport-heading>span{display:none}.my-photo-upload input{max-width:100%;margin-top:12px}.my-photo-upload label{display:block}.my-photo-upload p{font-size:13px}@media(min-width:900px){#tab-profile #profileContainer{max-width:900px;margin:auto}}

#myGrowthPassport .character-growth-hero{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:14px}#myGrowthPassport .character-growth-copy{display:contents}#myGrowthPassport .game-card-kicker{grid-column:2;font-size:10px}#myGrowthPassport #characterGrowthTitle{grid-column:2;font-size:20px;margin:0}#myGrowthPassport #characterGrowthCopy{grid-column:2;font-size:13px;margin:0}#myGrowthPassport .character-growth-art{grid-column:1;grid-row:1/4;min-height:0;width:110px;padding:0}#myGrowthPassport .character-growth-art-label{display:none}#myGrowthPassport #characterGrowthArtCanvas{width:108px;height:156px}#myGrowthPassport #characterGrowthMeta{grid-column:1/-1;width:100%}#myGrowthPassport .growth-passport-assets{grid-template-columns:repeat(4,minmax(0,1fr))}#myGrowthPassport .shop-growth-passport-heading h2{font-size:24px}.my-photo-upload input::file-selector-button{border:1px solid #cbb482;border-radius:10px;background:#f5e6c8;padding:10px;color:#345742}

html body.bookclub-app #myIdentityCard .header-profile-stack{width:100%;min-width:0;gap:14px}html body.bookclub-app #myIdentityCard .user-pill{flex:0 0 64px;margin:0}html body.bookclub-app #myIdentityCard .header-avatar-growth{flex:1;min-width:0;width:auto;max-width:none;font-size:14px}#myAccountName{display:block;font-size:20px;color:#493521;margin-bottom:8px}html body.bookclub-app #myIdentityCard .header-avatar-growth span{white-space:normal;font-size:13px}