/* Wondering Imp v0.8.3 — installable PWA mobile polish */
:root{--pwa-safe-top:env(safe-area-inset-top,0px);--pwa-safe-right:env(safe-area-inset-right,0px);--pwa-safe-bottom:env(safe-area-inset-bottom,0px);--pwa-safe-left:env(safe-area-inset-left,0px)}
@media(display-mode:standalone){body{overscroll-behavior-y:none}.sidebar{padding-left:max(18px,var(--pwa-safe-left))}.mobile-nav{padding-bottom:max(8px,var(--pwa-safe-bottom))}.toast{bottom:calc(22px + var(--pwa-safe-bottom))}}
.top-actions .route-locked:after{display:none!important;content:none!important}
@media(display-mode:standalone) and (max-width:780px){.topbar{height:calc(68px + var(--pwa-safe-top));min-height:calc(68px + var(--pwa-safe-top));padding:calc(10px + var(--pwa-safe-top)) max(14px,var(--pwa-safe-right)) 10px max(14px,var(--pwa-safe-left));align-items:center}.top-actions{align-items:center}.top-actions .saved-button,.top-actions .treasure-alert-button,.top-actions .inbox-button{align-self:center}}
.pwa-install-card{margin:0 0 18px;background:linear-gradient(135deg,#12372f,#1d4d40);border:1px solid #315f52;border-radius:20px;color:#fff;padding:17px 18px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;box-shadow:0 12px 32px rgba(18,55,47,.14)}
.pwa-install-card[hidden]{display:none!important}.pwa-install-mark{width:56px;height:56px;border-radius:16px;background:#f7f1e1;display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}.pwa-install-mark img{width:52px;height:52px;object-fit:contain}.pwa-install-copy strong{display:block;font-family:Georgia,serif;font-size:19px;color:#fff}.pwa-install-copy p{margin:4px 0 0;color:#d5e3de;font-size:12px;line-height:1.45}.pwa-install-actions{display:flex;gap:8px;align-items:center}.pwa-install-actions button{white-space:nowrap}.pwa-install-card .pwa-dismiss{border:1px solid #ffffff35;background:transparent;color:#e1ebe7;border-radius:10px;padding:9px 11px;font-weight:800}.pwa-install-card .pwa-install-now{border:0;background:#dba934;color:#17372f;border-radius:10px;padding:10px 13px;font-weight:900}.pwa-install-card .pwa-install-now:hover{filter:brightness(1.04)}
.pwa-modal{position:fixed;inset:0;z-index:260;background:rgba(11,31,26,.72);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:18px}.pwa-modal.show{display:flex}.pwa-modal-card{position:relative;width:min(520px,100%);max-height:88vh;overflow:auto;background:#f7f1e1;border:1px solid #d7c8a8;border-radius:22px;padding:24px;color:#17372f;box-shadow:0 28px 90px rgba(0,0,0,.35)}.pwa-modal-close{position:absolute;right:14px;top:14px;width:34px;height:34px;border:0;border-radius:50%;background:#eae1cf;color:#17372f;font-size:20px}.pwa-modal-head{display:flex;gap:12px;align-items:center;padding-right:36px}.pwa-modal-head img{width:54px;height:54px;border-radius:15px;background:#12372f}.pwa-modal-card h2{font-family:Georgia,serif;margin:0;font-size:27px}.pwa-modal-card>p{color:#607068;line-height:1.55;font-size:13px}.pwa-steps{display:grid;gap:9px;margin:16px 0}.pwa-step{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:flex-start;background:#fff;border:1px solid #ded3be;border-radius:13px;padding:11px}.pwa-step b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#12372f;color:#e2b54a;font-size:13px}.pwa-step strong{display:block;font-size:13px}.pwa-step span{display:block;color:#68746e;font-size:12px;line-height:1.45;margin-top:2px}.pwa-modal-note{background:#fff4d5;border:1px solid #ead498;border-radius:12px;padding:11px 12px;font-size:11px;line-height:1.45;color:#6b5c36}.pwa-modal-card .pwa-done{width:100%;border:0;border-radius:11px;background:#12372f;color:#fff;padding:12px;font-weight:900;margin-top:12px}
.pwa-network-banner{position:fixed;top:0;left:260px;right:0;z-index:245;background:#8e4038;color:#fff;text-align:center;padding:7px 12px;font-size:11px;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.12)}.pwa-network-banner[hidden]{display:none!important}.pwa-update-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:250;background:#12372f;color:#fff;border:1px solid #315f52;border-radius:14px;padding:11px 12px;box-shadow:0 15px 40px rgba(0,0,0,.22);display:flex;align-items:center;gap:10px;font-size:12px}.pwa-update-toast button{border:0;border-radius:9px;background:#dba934;color:#17372f;padding:8px 10px;font-weight:900}
@media(max-width:780px){.pwa-install-card{grid-template-columns:48px 1fr;margin-bottom:14px;padding:13px}.pwa-install-mark{width:48px;height:48px;border-radius:14px}.pwa-install-mark img{width:45px;height:45px}.pwa-install-copy strong{font-size:17px}.pwa-install-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.pwa-install-actions button{width:100%}.pwa-network-banner{left:0;padding-top:calc(7px + var(--pwa-safe-top))}.pwa-update-toast{bottom:calc(78px + var(--pwa-safe-bottom));width:calc(100% - 26px);justify-content:space-between}.pwa-modal{padding-top:calc(18px + var(--pwa-safe-top));padding-bottom:calc(18px + var(--pwa-safe-bottom))}}
@media(max-width:480px){.pwa-install-card{grid-template-columns:1fr}.pwa-install-mark{display:none}.pwa-install-actions{grid-column:auto}.pwa-modal-card{padding:20px 17px}.pwa-modal-card h2{font-size:24px}}

/* === Wondering Imp v0.8.4 — mobile size polish === */
@media(max-width:780px){
  /* Approx. 50% larger mobile mascot/logo: 38px -> 57px. */
  .mobile-brand img{width:57px;height:57px;flex:0 0 57px}
  .mobile-brand{min-width:57px}

  /* Give the larger logo enough breathing room without colliding with actions. */
  .topbar{height:82px;min-height:82px;padding-top:10px;padding-bottom:10px}

  /* Larger, easier-to-tap bottom navigation. */
  body{padding-bottom:88px}
  .mobile-nav{height:84px}
  .mobile-nav button{font-size:27px;gap:3px;min-height:72px;padding:7px 2px 8px}
  .mobile-nav button small{font-size:11px;font-weight:700;line-height:1.05}
}

@media(display-mode:standalone) and (max-width:780px){
  /* Preserve iPhone status-bar + Home Indicator safe areas. */
  .topbar{
    height:calc(82px + var(--pwa-safe-top));
    min-height:calc(82px + var(--pwa-safe-top));
    padding:calc(10px + var(--pwa-safe-top)) max(14px,var(--pwa-safe-right)) 10px max(14px,var(--pwa-safe-left));
  }
  body{padding-bottom:calc(88px + var(--pwa-safe-bottom))}
  .mobile-nav{
    height:calc(84px + var(--pwa-safe-bottom));
    padding-bottom:var(--pwa-safe-bottom);
  }
}

/* Keep small phones usable if the top action row becomes tight. */
@media(max-width:390px){
  .mobile-brand img{width:54px;height:54px;flex-basis:54px}
  .mobile-brand{min-width:54px}
  .top-actions{gap:4px}
  .top-actions button{padding-left:8px;padding-right:8px}
}

/* v0.8.4 combined polish — larger desktop/site brand icon, text unchanged */
@media(min-width:781px){
  .brand img{width:87px;height:87px}
}
@media(min-width:781px) and (max-height:920px){
  .brand img{width:75px;height:75px}
}

/* Wondering Imp v0.8.5 — Founding Collector Beta Rewards */

.founding-collector-tag{display:inline-flex;align-items:center;gap:7px;width:max-content;max-width:100%;margin:7px 0 3px;padding:6px 12px;border:1px solid #d8b54b;border-radius:999px;background:linear-gradient(180deg,#f8dc7d 0%,#c99d2f 52%,#af7f19 100%);box-shadow:inset 0 1px 0 #fff5c5,0 3px 9px #5b421b2b;color:#2a2412;font-family:Georgia,"Times New Roman",serif;font-size:10px;font-weight:900;letter-spacing:.015em;line-height:1}.founding-tag-crown{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fff8ddcc;color:#6c5114;font-size:13px;box-shadow:inset 0 0 0 1px #9d771d55}.founding-collector-tag.public{margin-top:7px}.founding-collector-tag.preview{margin-top:6px}.founding-collector-tag.profile-own{margin:5px 0 1px}.profile-founding-tag-slot:empty{display:none}.reward-avatar-wrap.founding-border{filter:drop-shadow(0 5px 10px #17382e33) drop-shadow(0 0 6px #d2a73566)}.reward-border-choice img[src*="founding_collector_border"]{background:radial-gradient(circle,#fffaf0 0 53%,#173d32 54% 100%)}
@media(max-width:650px){.founding-collector-tag{font-size:9px;padding:6px 10px}.founding-tag-crown{width:19px;height:19px;font-size:12px}}

/* v0.8.6 — Profile frame display + Founding Collector identity polish */
.reward-preview-status{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin:3px 0 8px;min-height:0}
.reward-preview-status .reward-preview-none{display:block;margin:0;color:#bfd0c8;line-height:1.25}
.reward-preview-status .reward-title-plaque.preview{display:flex;width:max-content;margin:0}
.reward-preview-status .founding-collector-tag.preview{display:flex;margin:0}
.reward-preview-none.pins-empty{display:block;margin:7px 0 0}

/* Render the collector's selected frame around the real avatar elements used by the
   profile page and persistent bottom-left account control. */
.avatar.reward-framed{overflow:visible;isolation:isolate;z-index:0}
.avatar.reward-framed::after{content:"";position:absolute;inset:-9px;background-image:var(--reward-frame);background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none;z-index:3;filter:drop-shadow(0 2px 4px #071d1728)}
.avatar.large.reward-framed::after{inset:-17px}
.avatar.reward-framed.founding-border::after{filter:drop-shadow(0 3px 5px #071d1738) drop-shadow(0 0 5px #d2a73566)}
.avatar.reward-framed>img{position:relative;z-index:1;border-radius:50%}
.profile-mini .avatar.reward-framed{margin:9px 9px 9px 8px;flex:0 0 auto}
.profile-card .avatar.large.reward-framed{margin:17px;flex:0 0 auto}

/* Give the SVG frame enough room in generated public/preview avatar wrappers. */
.reward-avatar-wrap{background-size:contain;background-repeat:no-repeat}
.reward-avatar-wrap>.avatar{position:relative;z-index:1}

@media(max-width:650px){
  .reward-preview-status{gap:6px;margin-bottom:7px}
  .profile-mini .avatar.reward-framed{margin:8px 8px 8px 7px}
}

/* Wondering Imp v0.8.7 — reliable profile-frame rendering + install banner polish */

/* Persistent avatars now use the frame artwork as the avatar background itself.
   This avoids browser/PWA inconsistencies with pseudo-element frame overlays. */
.avatar.reward-framed{
  position:relative;
  display:grid;
  place-items:center;
  overflow:visible;
  background-color:transparent!important;
  background-image:var(--reward-frame);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  box-shadow:none;
  flex:0 0 auto;
}
.avatar.reward-framed::after{display:none!important;content:none!important}
.avatar.reward-framed .avatar-core{
  position:absolute;
  left:50%;top:50%;
  width:68%;height:68%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:var(--gold);
  color:var(--forest3);
  font-weight:800;
  box-shadow:0 1px 5px rgba(7,29,23,.18);
  z-index:1;
}
.avatar.reward-framed .avatar-core.has-photo{background:#e9e2d3}
.avatar.reward-framed .avatar-core img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.profile-mini .avatar.reward-framed{width:52px;height:52px;margin:0;flex-basis:52px}
#profileAvatar.avatar.large.reward-framed,.profile-card .avatar.large.reward-framed{width:112px;height:112px;margin:0;font-size:22px;flex-basis:112px}
.avatar.reward-framed.founding-border{filter:drop-shadow(0 3px 5px rgba(7,29,23,.28)) drop-shadow(0 0 5px rgba(210,167,53,.38))}

/* Generated preview/public avatars use the same root-relative frame URL and sizing. */
.reward-avatar-wrap{background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}

/* Make the border control describe the real state rather than showing a misleading
   "No border" action beside a selected border. */
.reward-border-head{align-items:center}
.reward-border-active{display:flex;align-items:center;gap:13px;flex-wrap:wrap;justify-content:flex-end}
.reward-border-active>span{font-size:11px;color:#53665e;background:#eef4ef;border:1px solid #d2e0d5;border-radius:999px;padding:7px 10px;white-space:nowrap}
.reward-border-active .text-btn{padding:6px 0;color:#8a4c3f}
.reward-border-empty{font-size:11px;color:var(--muted);font-weight:700}

/* Cleaner install badge: circular branded mark, no white/cream rounded-square tile. */
.pwa-install-mark{
  position:relative;
  width:62px;height:62px;
  border-radius:50%;
  background:transparent;
  border:2px solid #d8b54b;
  padding:3px;
  overflow:visible;
  box-shadow:0 4px 13px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,242,166,.35);
}
.pwa-install-mark::after{
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid rgba(216,181,75,.45);
  border-radius:50%;
  pointer-events:none;
}
.pwa-install-mark img{width:100%;height:100%;object-fit:contain;border-radius:50%;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
.pwa-modal-head img{background:transparent;border:2px solid #d8b54b;border-radius:50%;padding:2px}

@media(max-width:780px){
  .profile-mini .avatar.reward-framed{width:50px;height:50px;flex-basis:50px}
  .pwa-install-mark{width:54px;height:54px;border-radius:50%}
}
@media(max-width:480px){
  .pwa-install-mark{display:grid;width:52px;height:52px;justify-self:start}
  .pwa-install-card{grid-template-columns:52px 1fr}
  .pwa-install-actions{grid-column:1/-1}
}


/* Wondering Imp v0.8.8 — calibrated avatar openings for illustrated frames */
/* The border artwork was designed with decorative crowns/leaves/medallions, so the
   portrait opening is not at the exact centre of every square asset. v0.8.8 uses
   per-frame geometry supplied by app-v0880.js and one common avatar layout. */
.avatar.reward-framed{
  background-size:100% 100%!important;
  background-position:center!important;
}
.avatar.reward-framed .avatar-core{
  left:var(--reward-core-x,50%)!important;
  top:var(--reward-core-y,50%)!important;
  width:var(--reward-core-size,62%)!important;
  height:var(--reward-core-size,62%)!important;
  transform:translate(-50%,-50%)!important;
  box-sizing:border-box;
}
.reward-avatar-wrap{
  position:relative!important;
  display:inline-block!important;
  background-size:100% 100%!important;
  background-position:center!important;
  overflow:visible!important;
}
.reward-avatar-wrap>.avatar{
  position:absolute!important;
  left:var(--reward-core-x,50%)!important;
  top:var(--reward-core-y,50%)!important;
  width:var(--reward-core-size,62%)!important;
  height:var(--reward-core-size,62%)!important;
  transform:translate(-50%,-50%)!important;
  margin:0!important;
  border:0!important;
  box-shadow:0 1px 5px rgba(7,29,23,.16)!important;
  z-index:1;
}
.reward-avatar-wrap>.avatar.large{font-size:20px!important}
.profile-photo-preview.reward-framed{width:104px;height:104px;margin:-6px;overflow:visible}
.profile-photo-editor{grid-template-columns:104px 1fr}

/* The three common progression frames are deliberately kept especially tight so
   the photograph sits inside the metal ring rather than on top of it. */
.avatar.reward-framed[data-reward-border="bronze_collector"] .avatar-core,
.avatar.reward-framed[data-reward-border="silver_collector"] .avatar-core,
.avatar.reward-framed[data-reward-border="gold_collector"] .avatar-core{box-shadow:none}

@media(max-width:780px){
  .profile-photo-preview.reward-framed{width:96px;height:96px;margin:-2px}
  .profile-photo-editor{grid-template-columns:96px 1fr}
}

/* Wondering Imp v0.8.9 — true oval frame openings */
.avatar.reward-framed{
  overflow:hidden!important;
}
.avatar.reward-framed .avatar-core{
  left:var(--reward-core-x,50%)!important;
  top:var(--reward-core-y,50%)!important;
  width:var(--reward-core-w,62%)!important;
  height:var(--reward-core-h,72%)!important;
  transform:translate(-50%,-50%)!important;
  border-radius:50%!important;
  box-shadow:none!important;
}
.avatar.reward-framed .avatar-core img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:50%!important;
}
.reward-avatar-wrap{
  overflow:hidden!important;
}
.reward-avatar-wrap>.avatar{
  left:var(--reward-core-x,50%)!important;
  top:var(--reward-core-y,50%)!important;
  width:var(--reward-core-w,62%)!important;
  height:var(--reward-core-h,72%)!important;
  transform:translate(-50%,-50%)!important;
  border-radius:50%!important;
  overflow:hidden!important;
  background:var(--gold)!important;
  box-shadow:none!important;
}
.reward-avatar-wrap>.avatar.has-photo img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:50%!important;
}
/* Make the frame art sit above the live portrait while preserving the exact
   illustrated opening. Persistent avatars use the frame as their own background. */
.avatar.reward-framed{background-size:100% 100%!important;background-position:center!important}
.reward-avatar-wrap{background-size:100% 100%!important;background-position:center!important}


/* Wondering Imp v0.8.10 — normalized transparent profile frames
   All frames now share one centred portrait opening. The artwork is always an
   overlay above the photo, never a background crop underneath it. */
.avatar.reward-framed{
  position:relative!important;
  overflow:visible!important;
  background-image:none!important;
  background:none!important;
}
.avatar.reward-framed .avatar-core{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:72%!important;
  height:72%!important;
  transform:translate(-50%,-50%)!important;
  border-radius:50%!important;
  overflow:hidden!important;
  z-index:1!important;
  box-shadow:none!important;
}
.avatar.reward-framed .avatar-core img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:50%!important;
}
.avatar.reward-framed::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background-image:var(--reward-frame)!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:100% 100%!important;
  pointer-events:none!important;
  z-index:3!important;
}
.reward-avatar-wrap{
  position:relative!important;
  display:inline-block!important;
  overflow:visible!important;
  background:none!important;
  background-image:none!important;
}
.reward-avatar-wrap>.avatar{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:72%!important;
  height:72%!important;
  transform:translate(-50%,-50%)!important;
  margin:0!important;
  border:0!important;
  border-radius:50%!important;
  overflow:hidden!important;
  z-index:1!important;
  background:var(--gold)!important;
  box-shadow:none!important;
}
.reward-avatar-wrap>.avatar img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:50%!important;
}
.reward-avatar-wrap::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background-image:var(--reward-frame)!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:100% 100%!important;
  pointer-events:none!important;
  z-index:3!important;
}
.reward-border-choice img{
  object-fit:contain!important;
  object-position:center!important;
}