/* Pufflings — cozy guild theme. Hand-rolled, no framework (see CLAUDE.md).
   Fonts: Fredoka (display) + Nunito (body), loaded in base.html. */

:root{
  /* Re-skinned core tokens — existing components inherit these automatically */
  --bg:          #f8ecd5;  /* subtle inner / hover surface */
  --card:        #fdf5e6;  /* parchment card surface */
  --ink:         #6e5946;  /* warm brown text */
  --ink-soft:    #a08a73;
  --accent:      #e295a8;  /* rose */
  --accent-dark: #b56b7d;  /* deep rose (links) */
  --line:        #e3cda6;  /* parchment line */
  --discord:     #5865f2;

  /* Cozy-specific tokens */
  --sage:        #d9e6cb;
  --sage-icon:   #bcd0a6;
  --wood:        #d2a878;
  --wood-2:      #AE8260;
  --wood-dark:   #987255;
  --wood-edge:   #6f4f33;
  --wood-shadow: #8a6342;
  --parch-2:     #f8ecd5;
  --rose:        #f2bcc8;
  --rose-deep:   #e295a8;
  --rose-ink:    #b56b7d;
  --sky-1:       #d4ecf3;
  --sky-2:       #eaf6ea;
  --mint:        #bfe0c4;
  --butter:      #f7e6b8;
  --lilac:       #d9cdea;
  --ink-faint:   #c2af98;
  --tab:         #f8ecd2;
  --tab-line:    #e0c79c;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:"Nunito", system-ui, sans-serif;
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
  background-color:var(--sage);
  background-image:
    radial-gradient(circle at 12px 12px, var(--sage-icon) 2.5px, transparent 3px),
    radial-gradient(circle at 42px 42px, var(--sage-icon) 2.5px, transparent 3px),
    radial-gradient(circle at 72px 20px, transparent 6px, var(--sage-icon) 6px, var(--sage-icon) 7.5px, transparent 8px),
    radial-gradient(circle at 30px 64px, transparent 6px, var(--sage-icon) 6px, var(--sage-icon) 7.5px, transparent 8px);
  background-size:90px 90px;
  background-attachment:fixed;
  min-height:100vh;
  padding:28px 18px 40px;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--accent-dark); }
a:hover{ color:var(--accent); }
h1,h2,h3{ line-height:1.25; font-family:"Fredoka"; font-weight:600; }
h1{ font-size:1.6rem; }
[x-cloak]{ display:none !important; }

/* ---------- Wooden corkboard frame ---------- */
.frame{
  width:100%;
  max-width:1060px;
  margin:0 auto;
  border-radius:34px;
  padding:18px;
   background-image: url("../images/background.webp");
  background-repeat: repeat;
  background-size: 512px 512px;
  /* background: */
    /* repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 6px, rgba(0,0,0,.035) 6px 12px), */
    /* linear-gradient(160deg, var(--wood) 0%, var(--wood-2) 45%, var(--wood-dark) 100%); */
  border:3px solid var(--wood-edge);
  box-shadow:
    inset 0 0 0 6px rgba(255,255,255,.16),
    inset 0 0 22px rgba(111,79,51,.35),
    0 18px 40px rgba(86,99,66,.35);
}

/* ---------- Sky banner ---------- */
.banner{
  position:relative;
  height:160px;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(180deg, var(--sky-1) 0%, #e4f2ec 60%, var(--sky-2) 100%);
  border:3px solid var(--wood-edge);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.45), inset 0 -10px 24px rgba(120,160,140,.18);
  display:flex; align-items:center; justify-content:center;
}
.cloud{ position:absolute; background:rgba(255,255,255,.85); border-radius:50%; }
.cloud::before,.cloud::after{ content:""; position:absolute; background:inherit; border-radius:50%; }
.c1{ width:56px; height:56px; top:34px; left:90px; }
.c1::before{ width:40px; height:40px; top:14px; left:-26px; }
.c1::after{ width:50px; height:50px; top:10px; left:30px; }
.c2{ width:44px; height:44px; top:60px; right:120px; }
.c2::before{ width:30px; height:30px; top:12px; left:-20px; }
.c2::after{ width:38px; height:38px; top:8px; left:24px; }
.c3{ width:30px; height:30px; top:26px; right:60px; opacity:.8; }
.c3::after{ width:24px; height:24px; top:6px; left:18px; }

.title-plaque{
  position:relative; z-index:2; text-decoration:none;
  background:var(--card); border:3px solid var(--wood-dark); border-radius:20px;
  padding:12px 34px 14px;
  box-shadow:0 6px 0 var(--wood-shadow), inset 0 0 0 3px rgba(255,255,255,.5);
  text-align:center;
}
.title-plaque .kicker{ display:block; font-family:"Fredoka"; font-weight:500; font-size:11px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--rose-ink); margin-bottom:1px; }
.title-plaque .plaque-title{ display:block; font-family:"Fredoka"; font-weight:700; font-size:34px;
  line-height:1; color:var(--ink); text-shadow:0 2px 0 #fff, 0 3px 0 var(--line); }

/* ---------- Nav tabs ---------- */
.tabs{
  margin:16px 4px;
  background:linear-gradient(180deg, var(--wood-2), var(--wood-dark));
  border:3px solid var(--wood-edge);
  border-radius:16px;
  padding:8px 12px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.22), inset 0 -3px 8px rgba(111,79,51,.4);
}
.tab{
  font-family:"Fredoka"; font-weight:500; font-size:15px;
  color:var(--ink); background:var(--tab);
  border:2.5px solid var(--tab-line); border-radius:11px;
  padding:7px 16px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 2px 0 rgba(111,79,51,.25);
  transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.tab:hover{ transform:translateY(-1px); background:#fff6e6; color:var(--ink); }
.tab.active{ background:var(--rose); border-color:var(--rose-deep); color:var(--rose-ink); box-shadow:0 2px 0 var(--rose-deep); }
.tab-cta{ background:var(--rose-deep); border-color:var(--rose-ink); color:#fff; box-shadow:0 2px 0 var(--rose-ink); }
.tab-cta:hover{ background:var(--rose-ink); color:#fff; }
.tab .caret{ font-size:10px; opacity:.7; }
.tab-spacer{ flex:1; }
.inline-form{ display:inline; margin:0; }

/* nav dropdown */
.dd{ position:relative; }
.dd-menu{
  position:absolute; top:calc(100% + 8px); left:0; z-index:30;
  background:var(--card); border:2.5px solid var(--wood-dark); border-radius:14px;
  padding:6px; min-width:180px; display:flex; flex-direction:column; gap:2px;
  box-shadow:0 10px 22px rgba(111,79,51,.28);
}
.dd-menu a{
  font-family:"Nunito"; font-weight:700; font-size:14px; text-align:left;
  color:var(--ink); text-decoration:none; border-radius:9px; padding:8px 12px; white-space:nowrap;
}
.dd-menu a:hover{ background:var(--parch-2); color:var(--rose-ink); }
.dd-menu-right{ left:auto; right:0; }
.dd-logout{
  font-family:"Nunito"; font-weight:700; font-size:14px; text-align:left; width:100%;
  color:var(--ink); background:none; border:none; border-radius:9px; padding:8px 12px;
  cursor:pointer; white-space:nowrap;
}
.dd-logout:hover{ background:var(--parch-2); color:var(--rose-ink); }
.dd-divider{ border:none; border-top:1.5px solid var(--wood-light,#e8d9c4); margin:4px 6px; }
/* Inline wallet chip shown in the nav button next to the username */
.nav-wallet{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700;
  color:var(--ink-soft); margin-left:8px; }
.nav-coin{ display:inline-block; width:12px; height:12px; border-radius:50%;
  border:1.5px solid rgba(0,0,0,.12); vertical-align:middle; }
.nav-coin.gold{ background:radial-gradient(circle at 35% 30%, #ffe7a0, #e9b84b); }
.nav-coin.star{ background:radial-gradient(circle at 35% 30%, #e3d3f6, #a98fd6); margin-left:6px; }

/* ---------- Main + footer ---------- */
.site-main{ width:100%; margin:0; padding:0; }
.site-footer{ display:flex; justify-content:center; margin-top:18px; }
.ribbon{
  background:var(--card); border:3px solid var(--wood-dark); border-radius:999px;
  padding:9px 28px; font-family:"Fredoka"; font-weight:500; font-size:14px; color:var(--ink-soft);
  box-shadow:0 4px 0 var(--wood-shadow), inset 0 0 0 2px rgba(255,255,255,.5);
}
.ribbon b{ color:var(--rose-ink); font-weight:600; }

/* ---------- Home layout ---------- */
.content{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:16px;
}

@media (min-width: 820px){
  .content{
    grid-template-columns:minmax(0, 1fr) 300px;
  }
}

.panel{
  background:var(--card); border:3px solid var(--wood-edge); border-radius:20px;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.4); padding:8px;
}
.panel-inner{ border:2px dashed var(--line); border-radius:14px; padding:22px 24px; height:100%; }

.welcome{ display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; }
@media (max-width: 420px) {
.welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap:10px;
  }

  .welcome-left {
    margin: 0 auto;
    /* Optional: Ensure it doesn't exceed the container width */
    max-width: 100%; 
  }
}
.welcome-left{ flex:0 0 auto; max-width:120px; text-align:center; }
.avatar{
  width:118px; height:118px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff, var(--lilac));
  border:4px solid var(--wood-dark);
  box-shadow:0 4px 0 rgba(111,79,51,.18), inset 0 0 0 3px rgba(255,255,255,.6);
  margin:0 auto 8px; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.avatar .sprite{ width:60px; height:60px; border-radius:46% 46% 42% 42%;
  background:linear-gradient(160deg,#f6c9d6,#e29ab0); position:relative; }
.avatar .sprite::before{ content:""; position:absolute; width:46px; height:30px; left:7px; top:-14px;
  background:#c8b0e6; border-radius:50%; }
.avatar .sprite::after{ content:""; position:absolute; width:8px; height:8px; border-radius:50%;
  background:#fff; box-shadow:18px 0 0 #fff, 2px 0 0 2px #6e5946, 20px 0 0 2px #6e5946; top:20px; left:14px; }
.avatar img{ width:100%; height:100%; object-fit:cover; }
.welcome-left .who{ font-family:"Fredoka"; font-weight:600; font-size:15px; color:var(--ink); }
.welcome-left .role{ font-size:12px; color:var(--ink-soft); font-weight:700; }

.welcome-body{ flex:1; min-width:auto; }
.greeting{ font-family:"Fredoka"; font-weight:500; font-size:21px; color:var(--ink); margin:2px 0 8px; }
.greeting b{ color:var(--rose-ink); font-weight:600; }
.lede{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 6px; max-width:46ch; }
.lede strong{ color:var(--ink); font-weight:800; }

.wallet{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; align-items:center; }
.coin{ display:inline-flex; align-items:center; gap:7px; background:var(--parch-2);
  border:2px solid var(--line); border-radius:999px; padding:5px 13px 5px 6px; font-weight:800; font-size:14px; color:var(--ink); }
.coin .dot{ width:20px; height:20px; border-radius:50%; border:2px solid rgba(0,0,0,.12); }
.coin .dot.gold{ background:radial-gradient(circle at 35% 30%, #ffe7a0, #e9b84b); }
.coin .dot.star{ background:radial-gradient(circle at 35% 30%, #e3d3f6, #a98fd6); }
.coin small{ color:var(--ink-soft); font-weight:700; }

.sec-head{ display:flex; align-items:center; gap:10px; margin:26px 0 14px; }
.sec-head h2{ font-size:20px; margin:0; }
.sec-head .rule{ flex:1; height:2px; border-radius:2px;
  background:repeating-linear-gradient(90deg, var(--line) 0 7px, transparent 7px 12px); }
.sec-head .seeall{ font-family:"Fredoka"; font-size:12.5px; color:var(--rose-ink); font-weight:500; text-decoration:none; }
.sec-head .seeall:hover{ text-decoration:underline; }

.pgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:560px){ .pgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .pgrid{ grid-template-columns:repeat(1,1fr); } }
.pcard{ background:var(--parch-2); border:2.5px solid var(--line); border-radius:15px;
  overflow:hidden; text-decoration:none; color:inherit; display:block;
  box-shadow:0 2px 0 rgba(111,79,51,.12); transition:transform .14s ease, box-shadow .14s ease, border-color .14s; }
.pcard:hover{ transform:translateY(-3px); box-shadow:0 10px 18px rgba(111,79,51,.22); border-color:var(--rose-deep); }
.pthumb{ height:96px; display:flex; align-items:center; justify-content:center; }
.pthumb .blob{ width:58px; height:58px; border-radius:48% 48% 44% 44%; position:relative;
  background:linear-gradient(160deg,#f6c9d6,#e29ab0); box-shadow:inset -6px -6px 0 rgba(0,0,0,.06); }
.pthumb .blob::after{ content:""; position:absolute; width:7px; height:7px; border-radius:50%;
  background:#5b4636; top:24px; left:15px; box-shadow:17px 0 0 #5b4636; }
.pthumb img{ width:100%; height:100%; object-fit:cover; }
.pinfo{ padding:9px 11px 11px; background:var(--card); border-top:2px solid var(--line); }
.pid{ font-family:"Fredoka"; font-size:10.5px; letter-spacing:.08em; color:var(--ink-faint); font-weight:500; }
.pname{ font-family:"Fredoka"; font-weight:600; font-size:15px; color:var(--ink); line-height:1.15; margin:1px 0 4px; }
.pmeta{ display:flex; gap:5px; flex-wrap:wrap; }
.chip{ font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:999px; color:#fff; white-space:nowrap; }
.chip.species{ background:var(--ink-soft); }
.rare-Common{ background:#9bbf8a; } .rare-Uncommon{ background:#6fb0c9; }
.rare-Rare{ background:#9b8fd6; } .rare-Super{ background:#e0a24e; } .rare-Ultra{ background:var(--rose-deep); }

/* sidebar */
.side-title{ font-size:18px; color:var(--ink); display:flex; align-items:center; gap:8px; margin:0 0 14px; }
.side-title .pin{ width:11px; height:11px; border-radius:50%; background:var(--rose-deep); box-shadow:0 0 0 3px rgba(226,149,168,.3); }
.happenings{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:7px; }
.happenings a{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink);
  font-weight:700; font-size:14px; padding:8px 10px; border-radius:11px; border:2px solid transparent;
  transition:background .14s, transform .14s; }
.happenings a:hover{ background:var(--parch-2); border-color:var(--line); transform:translateX(2px); }
.hicon{ width:30px; height:30px; border-radius:9px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(111,79,51,.18); box-shadow:inset 0 -2px 0 rgba(0,0,0,.06); font-size:15px; }
.happenings small{ display:block; font-weight:600; font-size:11.5px; color:var(--ink-soft); }

.shift{ background:linear-gradient(165deg,#fbeede,#f6e3c4); border:2.5px solid var(--line);
  border-radius:14px; padding:13px 14px; margin-bottom:16px; }
.shift h4{ font-family:"Fredoka"; font-weight:600; font-size:14px; margin:0 0 3px; color:var(--ink); display:flex; align-items:center; gap:7px; }
.shift p{ font-size:12px; color:var(--ink-soft); margin:0 0 10px; line-height:1.45; font-weight:600; }
.shift-btn{ width:100%; font-family:"Fredoka"; font-weight:600; font-size:14px; color:#fff;
  background:var(--rose-deep); border:none; border-radius:11px; padding:9px; cursor:pointer;
  box-shadow:0 3px 0 var(--rose-ink); transition:transform .1s, box-shadow .1s; }
.shift-btn:hover{ transform:translateY(-1px); }
.shift-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--rose-ink); }
.shift-btn.done{ background:var(--mint); color:#3f6b48; box-shadow:0 3px 0 #82ab8c; cursor:default; }
.shift-btn.done:hover{ transform:none; }

.cal{ background:var(--parch-2); border:2.5px solid var(--line); border-radius:14px; overflow:hidden; }
.cal-head{ background:var(--rose); color:var(--rose-ink); font-family:"Fredoka"; font-weight:600;
  font-size:13px; text-align:center; padding:7px; letter-spacing:.04em; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px; padding:8px; }
.cal-grid span{ font-size:10.5px; text-align:center; padding:3px 0; font-weight:800; color:var(--ink); border-radius:6px; }
.cal-grid .dow{ color:var(--ink-faint); }
.cal-grid .today{ background:var(--rose-deep); color:#fff; }
.cal-grid .event{ background:var(--butter); color:#8a6c2f; }

/* coming-soon placeholder */
.soon{ text-align:center; padding:34px 18px 40px; }
.soon-badge{ font-size:46px; line-height:1; margin-bottom:10px; }
.soon h1{ margin:0 0 8px; }
.soon .lede{ margin:0 auto 20px; max-width:42ch; }
.soon-links{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ================================================================
   Existing component classes — inherit the re-skinned tokens above.
   Kept intact so masterlists, profiles, forms and detail pages
   pick up the cozy palette without per-page edits.
   ================================================================ */

/* Cards */
.card{ background:var(--card); border:3px solid var(--wood-edge); border-radius:20px;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.4); padding:1.6rem; margin:16px 4px; }
.card.narrow{ max-width:480px; margin-left:auto; margin-right:auto; }
.hero{ text-align:center; padding:2.5rem 1.5rem; }

/* Buttons */
.button, button.button{
  display:inline-block; background:var(--accent); color:#fff; border:none; border-radius:999px;
  padding:0.5rem 1.2rem; font:inherit; font-family:"Fredoka"; font-weight:600; text-decoration:none; cursor:pointer;
  box-shadow:0 3px 0 var(--accent-dark);
}
.button:hover, button.button:hover{ background:var(--accent-dark); color:#fff; }
.button-discord{ background:var(--discord); box-shadow:0 3px 0 #4752c4; }
.button-discord:hover{ background:#4752c4; }
.button-secondary{ background:var(--wood); color:#fff; box-shadow:0 3px 0 var(--wood-dark); }
.button-secondary:hover{ background:var(--wood-dark); color:#fff; }
.link-button{ background:none; border:none; padding:0; font:inherit; color:var(--accent-dark); text-decoration:underline; cursor:pointer; }
.link-button:hover{ color:var(--accent); }

/* Forms */
form div{ margin-bottom:0.9rem; }
label{ display:block; font-weight:800; margin-bottom:0.25rem; }
input[type="text"], input[type="url"], input[type="email"], input[type="number"], textarea, select{
  width:100%; padding:0.45rem 0.6rem; border:2px solid var(--line); border-radius:10px;
  background:#fff; font:inherit; color:var(--ink);
}
input[type="number"]{ -moz-appearance:textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button{ opacity:1; }
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--accent); }
.errorlist{ color:#b03030; margin:0.2rem 0; padding-left:1.1rem; }
.helptext{ color:var(--ink-soft); font-size:0.85rem; }

/* Trait attach (item-driven trait picker) */
.trait-attach fieldset{ border:2px solid var(--line); border-radius:12px; padding:0.75rem 1rem; margin-bottom:1rem; }
.trait-attach legend{ font-weight:800; padding:0 0.4rem; }
.trait-attach .trait-keep{ display:block; font-weight:400; margin-bottom:0.25rem; }
.trait-attach .trait-keep input{ width:auto; margin-right:0.4rem; }
.trait-item-line{ display:flex; gap:0.5rem; align-items:flex-start; margin-bottom:0.5rem; flex-wrap:wrap; }
.ta-field{ position:relative; flex:1 1 12rem; min-width:10rem; }
.ta-list{ list-style:none; margin:0.15rem 0 0; padding:0.2rem; position:absolute; z-index:20;
  left:0; right:0; max-height:14rem; overflow-y:auto; background:#fff; border:2px solid var(--line);
  border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.12); }
.ta-opt{ padding:0.35rem 0.5rem; border-radius:8px; cursor:pointer; }
.ta-opt:hover{ background:var(--card); }
.ta-opt.muted{ cursor:default; }

/* Messages */
.messages{ list-style:none; padding:0; margin:0 4px 1rem; }
.message{ padding:0.6rem 1rem; border-radius:12px; border:2px solid var(--line); background:var(--card); margin-bottom:0.5rem; }
.message.success{ border-color:#b5d6a7; background:#f0f7ea; }
.message.error{ border-color:#e0a8a8; background:#fbeeee; }

/* Profile */
.profile-header{ display:flex; align-items:flex-start; gap:1rem; flex-wrap:nowrap; }
.profile-header-name{ display:flex; flex-direction:column; justify-content:center; flex-grow: 2; }
.profile-header-name h1{ margin:0 0 0.15rem; }
.profile-header-name p{ margin:0; }
.profile-bio{ margin-top:1rem; }
.avatar.profile, .profile-header .avatar{ width:96px; height:96px; flex-shrink:0; }
.avatar-placeholder{ display:flex; align-items:center; justify-content:center; font-size:2.2rem; background:var(--bg); }
.bio{ white-space:pre-line; }
.muted{ color:var(--ink-soft); }

/* Trophy showcase */
.player-title{ font-size:0.8rem; font-weight:800; padding:0.1rem 0.55rem; border-radius:999px; color:#fff; background:var(--accent-dark, #888); vertical-align:middle; }
.showcase-heading{ margin-top:1.3rem; }
.showcase-grid{ list-style:none; display:flex; flex-wrap:wrap; gap:0.8rem; padding:0; margin:0.5rem 0 0; }
.showcase-item{ display:flex; flex-direction:column; align-items:center; gap:0.3rem; width:88px; text-align:center; }
.showcase-item img, .showcase-item .thumb-placeholder{ width:56px; height:56px; border-radius:12px; object-fit:cover; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:1.6rem; }
.showcase-name{ font-size:0.75rem; font-weight:700; }

/* Profile edit form */
.form-section-heading{ margin-top:1.5rem; }

/* Masterlist filters — collapsible wrapper */
.filter-toggle{
  display:flex; align-items:center; gap:0.5rem;
  background:none; border:none; padding:0.4rem 0; margin-bottom:1rem;
  font:inherit; font-family:"Fredoka"; font-weight:600; font-size:1rem;
  color:var(--ink); cursor:pointer; user-select:none;
}
.filter-toggle .caret{ font-size:10px; opacity:.7; transition:transform .18s; }
.filter-toggle[aria-expanded="true"] .caret{ transform:rotate(180deg); }
.filter-body{ margin-bottom:1.3rem; }

/* Masterlist filters */
.filters{ display:flex; flex-wrap:wrap; gap:0.9rem; align-items:flex-end; }
.filters > div{ margin-bottom:0; }
.filters select{ min-width:160px; }

/* Multi-select autocomplete widget */
.ms-wrapper{ position:relative; min-width:180px; max-width:280px; border:2px solid var(--line); border-radius:10px;
  background:#fff; padding:0.3rem 0.4rem; display:flex; flex-wrap:wrap; align-items:center; gap:0.3rem; cursor:text; }
.ms-wrapper:focus-within{ border-color:var(--accent); }
.ms-tags{ display:flex; flex-wrap:wrap; gap:0.25rem; }
.ms-tag{ display:inline-flex; align-items:center; gap:0.2rem; background:var(--bg); border:1px solid var(--line);
  border-radius:999px; padding:0.1rem 0.45rem; font-size:0.8rem; white-space:nowrap; }
.ms-tag-remove{ background:none; border:none; cursor:pointer; font-size:0.9rem; color:var(--ink-soft); padding:0; line-height:1; }
.ms-tag-remove:hover{ color:var(--accent); }
/* Single-select: show value as plain text, not a pill bubble */
.ms-wrapper--single .ms-tag{ background:transparent; border:none; border-radius:0; padding:0.2rem 0.3rem; font-size:inherit; }
.ms-wrapper--single .ms-tag-remove{ font-size:0.75rem; opacity:0.6; }
.ms-wrapper--single .ms-tag-remove:hover{ opacity:1; color:var(--accent); }
.ms-input{ flex:1 1 60px; border:none !important; outline:none !important; padding:0.2rem 0.3rem !important;
  font:inherit; min-width:60px; width:auto; background:transparent; }
.ms-dropdown{ position:absolute; top:100%; left:-2px; right:-2px; margin:2px 0 0; padding:0; list-style:none;
  background:#fff; border:2px solid var(--line); border-radius:10px; max-height:200px; overflow-y:auto; z-index:10;
  box-shadow:0 4px 12px rgba(111,79,51,.18); }
.ms-option{ padding:0.4rem 0.7rem; cursor:pointer; font-size:0.9rem; }
.ms-option:hover{ background:var(--bg); color:var(--accent-dark); }
.ms-option-more{ color:var(--ink-faint); font-style:italic; cursor:default; pointer-events:none; }
.ms-option-more:hover{ background:none; color:var(--ink-faint); }
.ms-hidden{ display:none; }

/* Trait masterlist */
.trait-grid{ list-style:none; padding:0; margin:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
.trait-card{ border:2.5px solid var(--line); border-radius:14px; overflow:hidden; background:var(--bg);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s; }
.trait-card:hover{ transform:translateY(-3px); box-shadow:0 10px 18px rgba(111,79,51,.2); border-color:var(--rose-deep); }
.trait-thumb{ aspect-ratio:1 / 1; background:var(--card); border-bottom:2px solid var(--line); }
.trait-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.trait-info{ padding:0.7rem 0.8rem; }
.trait-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; }
.trait-name{ font-weight:800; }
.rarity-chip{ font-size:0.75rem; font-weight:800; padding:0.1rem 0.55rem; border-radius:999px; color:#fff; background:var(--chip, #888); }
.loot-drops{ margin-top:1rem; }
.loot-toggle{ display:inline-flex; align-items:center; gap:0.4rem; background:none; border:none; padding:0; font:inherit; font-weight:800; cursor:pointer; color:var(--accent-dark); }
.loot-table{ margin-top:0.6rem; }
.loot-rarity{ margin:0.7rem 0 0.3rem; font-size:0.9rem; }
.loot-list{ list-style:none; margin:0; padding:0; }
.loot-row{ display:flex; align-items:center; gap:0.6rem; padding:0.25rem 0; border-bottom:1px solid var(--border, #eee); }
.loot-row a{ flex:1; text-decoration:none; color:inherit; font-weight:600; }
.loot-row a:hover{ color:var(--accent-dark); }
.loot-qty{ font-size:0.85rem; color:#666; }
.loot-rate{ font-variant-numeric:tabular-nums; font-weight:800; min-width:3.5rem; text-align:right; }
.trait-link{ display:block; text-decoration:none; color:inherit; }
.trait-link:hover .trait-name{ color:var(--accent-dark); }
.trait-sub{ margin:0.4rem 0 0; font-size:0.85rem; }
.trait-desc{ margin:0.5rem 0 0; font-size:0.9rem; }
.result-count{ margin-top:1rem; }
.empty{ padding:1rem 0; }

/* Puffling masterlist */
.puffling-grid{ list-style:none; padding:0; margin:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); }
.puffling-card{ border:2.5px solid var(--line); border-radius:14px; overflow:hidden; background:var(--bg);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s; }
.puffling-card:hover{ transform:translateY(-3px); box-shadow:0 10px 18px rgba(111,79,51,.2); border-color:var(--rose-deep); }
.puffling-thumb{ aspect-ratio:1 / 1; background:var(--card); border-bottom:2px solid var(--line); }
.puffling-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.4rem; }
.puffling-info{ padding:0.7rem 0.8rem; }
.puffling-id{ font-size:0.78rem; color:var(--ink-soft); display:block; }
.puffling-name{ font-weight:800; }
.puffling-sub{ margin:0.25rem 0 0; font-size:0.85rem; }
.puffling-link{ display:block; text-decoration:none; color:inherit; }
.puffling-link:hover .puffling-name{ color:var(--accent-dark); }

/* Item masterlist / inventory */
.item-grid{ list-style:none; padding:0; margin:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); }
.item-card{ border:2.5px solid var(--line); border-radius:14px; overflow:hidden; background:var(--bg);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s; }
.item-card:hover{ box-shadow:0 10px 18px rgba(111,79,51,.2); border-color:var(--rose-deep); }
.item-thumb{ aspect-ratio:1 / 1; background:var(--card); border-bottom:2px solid var(--line); }
.item-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.item-info{ padding:0.7rem 0.8rem; }
.item-name{ font-weight:800; }
.item-sub{ margin:0.25rem 0 0; font-size:0.85rem; }
.item-link{ display:block; text-decoration:none; color:inherit; }
.item-link:hover .item-name{ color:var(--accent-dark); }

/* Collections */
.collection-section{ margin-top:1.5rem; }
.collection-section:first-child{ margin-top:0; }
.collection-progress{ font-weight:700; }
.item-card-missing{ opacity:0.45; filter:grayscale(1); }
.item-card-placeholder{ pointer-events:none; }
.item-card-action{ padding:0 0.8rem 0.8rem; }
.item-card-action .button{ width:100%; display:block; text-align:center; }

/* Puffling detail */
.breadcrumb{ margin:0 0 1rem; font-size:0.9rem; }
.detail-layout{ display:flex; flex-wrap:wrap; gap:1.5rem; }
.detail-art{ flex:1 1 280px; max-width:360px; }
.detail-art img, .detail-art-placeholder{ width:100%; border-radius:14px; border:2.5px solid var(--line); display:block; }
.detail-art-placeholder{ aspect-ratio:1 / 1; display:flex; align-items:center; justify-content:center; font-size:4rem; background:var(--bg); }
.detail-body{ flex:1 1 320px; }
.detail-header{  display: flex; flex-direction: column; align-items:center; gap:0.6rem; }
.detail-header h1{ margin:0.2rem 0; }
.detail-actions{margin:0.4rem 0; }
.status-badge{ font-size:0.75rem; font-weight:800; padding:0.1rem 0.6rem; border-radius:999px; border:2px solid var(--line);
  text-transform:uppercase; letter-spacing:0.03em; }
.status-pending{ background:#fbf3dc; border-color:#e8d29a; }
.status-rejected{ background:#fbeeee; border-color:#e0a8a8; }
.status-retired{ background:#eee; border-color:#ccc; }
.detail-meta{ display:grid; grid-template-columns:auto 1fr; gap:0.35rem 1rem; margin:1rem 0 0; }
.detail-meta dt{ font-weight:800; color:var(--ink-soft); }
.detail-meta dd{ margin:0; }
.detail-description{ margin-top:1rem; }
.detail-section{ margin-top:1.8rem; border-top:2px solid var(--line); padding-top:1.2rem; }
.detail-section h2{ font-size:1.1rem; margin:0 0 0.7rem; }
.trait-chips{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.5rem; }
.ownership-log{ margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:0.4rem; }
.log-note{ display:block; font-size:0.88rem; color:var(--ink-soft); }
.button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
  box-shadow: none;
  filter: grayscale(1);
}

/* User masterlist */
.user-grid{ list-style:none; padding:0; margin:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
.user-card{ border:2.5px solid var(--line); border-radius:14px; background:var(--bg); }
.user-link{ display:flex; align-items:center; gap:0.8rem; padding:0.8rem; text-decoration:none; color:inherit; }
.user-link:hover .user-name{ color:var(--accent-dark); }
.avatar-sm{ width:52px; height:52px; border-width:2px; }
.user-name{ font-weight:800; }
.user-sub{ margin:0.15rem 0 0; font-size:0.85rem; }

/* Pufflings on a profile */
.pending-heading{ font-size:1rem; margin:1.4rem 0 0.7rem; color:var(--ink-soft); }

/* ---------- Design-approval queue ---------- */
.status-approved{ background:#e8f6e4; border-color:#9ed092; }
.queue-list{ list-style:none; padding:0; margin:1rem 0 0; display:flex; flex-direction:column; gap:0.6rem; }
.queue-item{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0.7rem 1rem; border:2px solid var(--line); border-radius:14px; background:#fffdf8; }
.queue-main{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0.5rem; }
.queue-kind{ font-size:0.7rem; font-weight:800; text-transform:uppercase; letter-spacing:0.03em;
  padding:0.1rem 0.55rem; border-radius:999px; background:#eef0ff; border:2px solid #cdd3f5; }
.review-actions textarea{ width:100%; }
.review-buttons{ display:flex; gap:0.8rem; margin-top:0.8rem; }
.button-danger{ background:#c46a6a; box-shadow:0 3px 0 #a04e4e; }
.button-danger:hover{ background:#a04e4e; }

/* Profile: my design submissions list */
.submission-list{ list-style:none; padding:0; margin:0.8rem 0 0; display:flex; flex-direction:column; gap:0.6rem; }
.submission-item{ display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 0.8rem;
  padding:0.7rem 1rem; border:2px solid var(--line); border-radius:14px; background:#fffdf8; }
.submission-main{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0.4rem; flex:1 1 auto; }
.submission-name{ font-weight:700; }
.submission-feedback{ width:100%; margin-top:0.3rem; font-size:0.85rem;
  background:#fff5f5; border:1.5px solid #e0a8a8; border-radius:8px; padding:0.4rem 0.7rem; }

/* Pagination */
.pagination{ display:flex; align-items:center; gap:0.8rem; margin-top:1rem; font-size:0.9rem; }
.page-link{ color:var(--accent-dark); text-decoration:none; font-weight:700; }
.page-link:hover{ color:var(--accent); }
.page-current{ color:var(--ink-soft); }

/* Mod grant form */
.grant-line{ border:2px solid var(--line); border-radius:12px; padding:1rem; margin-bottom:0.8rem;
  background:#fffdf8; }
.grant-line-fields{ display:flex; flex-wrap:wrap; gap:0.7rem; align-items:flex-start; }
.grant-field{ display:flex; flex-direction:column; gap:0.25rem; }
.grant-field label{ font-size:0.82rem; font-weight:700; color:var(--ink-soft); }
.grant-field-qty{ width:120px; }
.grant-field-qty input{ width:100%; }
.grant-field-sb label{ font-size:0.9rem; font-weight:600; color:var(--ink); display:flex; gap:0.35rem; align-items:center; }
.grant-field-remove{ align-self:flex-end; }
.grant-actions-row{ display:flex; gap:0.8rem; margin-bottom:1rem; }
.button-sm{ font-size:0.82rem; padding:0.3rem 0.75rem; }
.form-hint{ font-size:0.85rem; }

/* Gift / item log */
.log-list{ list-style:none; padding:0; margin:0.8rem 0 0; display:flex; flex-direction:column; gap:0.6rem; }
.log-entry{ padding:0.7rem 1rem; border:2px solid var(--line); border-radius:12px; background:#fffdf8; }
.log-main{ display:flex; align-items:center; gap:0.5rem; font-weight:600; }
.log-qty{ font-family:"Fredoka"; font-size:1rem; color:var(--ink-soft); }
.log-positive{ color:#4a9a5a; }
.log-meta{ font-size:0.85rem; margin-top:0.2rem; }

/* Item log table */
.item-log-table{ width:100%; border-collapse:collapse; font-size:0.88rem; margin-top:0.6rem; }
.item-log-table th{ text-align:left; padding:0.4rem 0.6rem; border-bottom:2px solid var(--line);
  color:var(--ink-soft); font-weight:600; white-space:nowrap; }
.item-log-table td{ padding:0.4rem 0.6rem; border-bottom:1px solid var(--line); vertical-align:top; }
.item-log-table tr:last-child td{ border-bottom:none; }
.log-time{ white-space:nowrap; }
.log-delta{ font-weight:700; white-space:nowrap; }
.log-gain{ color:#3a8c52; }
.log-loss{ color:#c46a6a; }


.alert{ padding:0.8rem 1.2rem; border-radius:12px; margin-bottom:1rem; font-weight:600; }
.alert-warning{ background:#fff8e1; border:2px solid #f0c040; color:#7a5800; }

/* ---------- Nav wallet / currency chips ---------- */
.nav-wallet{ display:inline-flex; align-items:center; gap:0.4rem; margin-left:0.4rem; }
.nav-currency{ display:inline-flex; align-items:center; gap:0.25rem; font-size:0.82rem;
  font-weight:700; background:rgba(255,255,255,.35); border:1.5px solid rgba(255,255,255,.55);
  border-radius:999px; padding:0.1rem 0.5rem; }
.nav-currency-icon{ width:16px; height:16px; object-fit:contain; }
.wallet-currency-icon{ width:22px; height:22px; object-fit:contain; vertical-align:middle; }

/* ---------- Inventory section headers ---------- */
.inventory-section{ margin-top:1.8rem; }
.inventory-section:first-child{ margin-top:0; }
.inventory-section-title{ font-size:1rem; font-weight:700; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:0.05em; margin:0 0 0.8rem; }

/* ---------- Item badges (Soulbound / Tradeable) ---------- */
.badge{ display:inline-block; font-size:0.72rem; font-weight:800; text-transform:uppercase;
  letter-spacing:0.04em; padding:0.1rem 0.55rem; border-radius:999px; border:1.5px solid; }
.badge-soulbound{ background:#fff3f3; border-color:#e0a8a8; color:#a04e4e; }
.badge-tradeable{ background:#f0f8f0; border-color:#9ed092; color:#3a6e30; }

/* ---------- Inventory item-card modal ---------- */
.modal-overlay{ position:fixed; inset:0; z-index:200; background:rgba(80,60,40,.45);
  display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal-box{ background:var(--card); border:3px solid var(--wood-edge); border-radius:18px;
  box-shadow:0 20px 50px rgba(80,60,40,.35); max-width:520px; width:100%;
  max-height:90vh; overflow-y:auto; padding:1.5rem; position:relative; }
.modal-close{ position:absolute; top:0.7rem; right:0.9rem; background:none; border:none;
  font-size:1.2rem; cursor:pointer; color:var(--ink-soft); line-height:1; padding:0.2rem 0.4rem; }
.modal-close:hover{ color:var(--ink); }
.modal-item-header{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.2rem; }
.modal-item-header .modal-thumb{ width:80px; height:80px; flex-shrink:0; border-radius:10px;
  border:2px solid var(--line); overflow:hidden; background:var(--bg); }
.modal-item-header .modal-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.modal-item-name{ margin:0 0 0.2rem; font-size:1.1rem; }
.modal-action-section{ border-top:1.5px solid var(--line); margin-top:0.8rem; padding-top:0.8rem; }
.modal-action-section summary{ cursor:pointer; font-weight:700; font-size:0.92rem;
  color:var(--accent-dark); list-style:none; user-select:none; }
.modal-action-section summary::-webkit-details-marker{ display:none; }
.modal-action-section summary::before{ content:"▸ "; font-size:0.8rem; }
.modal-action-section[open] summary::before{ content:"▾ "; }
.modal-action-section[open] summary{ color:var(--ink); }
.modal-action-body{ padding-top:0.7rem; }
.modal-action-danger summary{ color:#c46a6a; }
.modal-action-danger[open] summary{ color:#a04e4e; }

/* ---------- Shop card grid ---------- */
.shop-grid{ list-style:none; padding:0; margin:0; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); }
.shop-grid > li{ list-style:none; }
.shop-card{ border:2.5px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--bg); transition:box-shadow .14s ease, border-color .14s; }
.shop-card:hover{ box-shadow:0 10px 18px rgba(111,79,51,.2); border-color:var(--rose-deep); }
.shop-card-face{ cursor:pointer; display:block; }
.shop-card-thumb{ aspect-ratio:1/1; background:var(--card); border-bottom:2px solid var(--line); }
.shop-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.shop-card-info{ padding:0.6rem 0.75rem; }
.shop-card-name{ font-weight:800; font-size:0.9rem; display:block; }
.shop-card-price{ margin:0.25rem 0 0; font-size:0.82rem; color:var(--ink-soft);
  display:flex; align-items:center; gap:0.25rem; }
.shop-price-icon{ width:14px; height:14px; object-fit:contain; }
.shop-card--out-of-stock .shop-card-face{ opacity:0.55; filter:grayscale(0.7); }
.shop-card--out-of-stock:hover{ border-color:var(--line); box-shadow:none; }
.shop-buy-form{ display:flex; gap:0.6rem; align-items:flex-end; flex-wrap:wrap; margin-top:1rem; }
.shop-buy-form > div{ margin-bottom:0; }
.qty-input{ width:5rem !important; }

/* ---------- Currency inline icon (shop prices) ---------- */
.currency-inline{ display:inline-flex; align-items:center; gap:0.2rem; }
.currency-inline img{ width:16px; height:16px; object-fit:contain; vertical-align:middle; }

/* ---------- Credit toggle (design submit / update / mod edit) ---------- */
.credit-toggle{ margin-top:0.35rem; }
.credit-toggle-buttons{ display:inline-flex; gap:0; border:2px solid var(--line); border-radius:8px;
  overflow:hidden; margin-bottom:0.5rem; }
.credit-type-btn{ background:var(--bg); border:none; padding:0.3rem 0.85rem;
  font:inherit; font-size:0.85rem; font-weight:700; cursor:pointer;
  color:var(--ink-soft); transition:background .12s, color .12s; }
.credit-type-btn:first-child{ border-right:2px solid var(--line); }
.credit-type-btn.active{ background:var(--rose); color:#fff; }
.credit-type-btn:hover:not(.active){ background:var(--card); color:var(--ink); }

/* ---------- Current image preview (update / mod edit forms) ---------- */
.current-image-preview{ display:flex; align-items:flex-start; gap:0.75rem;
  margin-bottom:0.6rem; padding:0.6rem; background:var(--card); border-radius:8px;
  border:1.5px solid var(--line); }
.current-image-thumb{ width:80px; height:80px; object-fit:contain;
  border-radius:6px; border:1.5px solid var(--line); flex-shrink:0; }

/* ---------- Side-by-side mod review ---------- */
.review-compare{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem;
  margin:1rem 0; }
@media(max-width:640px){ .review-compare{ grid-template-columns:1fr; } }
.review-col{ border:2px solid var(--line); border-radius:12px; padding:1rem; }
.review-col-current{ border-color:var(--line); }
.review-col-proposed{ border-color:var(--rose); background:rgba(var(--rose-rgb, 230,150,160),.05); }
.review-col-title{ font-size:0.85rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; margin:0 0 0.75rem; color:var(--ink-soft); }

/* Diff highlighting in mod review side-by-side */
.diff-added{ font-weight:700; color:var(--mint, #3a9c56); }
.diff-removed{ text-decoration:line-through; color:var(--ink-soft); }
.diff-changed{ color:var(--ink-soft); font-style:italic; }
.diff-image-new{ outline:2px solid var(--mint, #3a9c56); border-radius:8px; }

/* ---------- Small compact item card (inventory + shop) ---------- */
.item-sm-grid{ list-style:none; padding:0; margin:0; display:grid; gap:0.55rem;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
.trade-columns{ display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.trade-col h3{ margin:0 0 0.5rem; }
.trade-legend{ display:flex; flex-wrap:wrap; gap:0.4rem 0.8rem; align-items:center; }
.trade-badges{ white-space:nowrap; }
.trade-badge{ font-size:0.85em; cursor:help; }
.item-sm-card{ border:2.5px solid var(--line); border-radius:14px; background:var(--bg);
  overflow:hidden; transition:border-color .14s, box-shadow .14s; }
.item-sm-card:hover{ border-color:var(--rose-deep); box-shadow:0 4px 12px rgba(111,79,51,.15); }
.item-sm-face{ display:flex; align-items:center; gap:0.7rem; padding:0.6rem 0.7rem; cursor:pointer; text-decoration: none;}
.item-sm-thumb{ width:48px; height:48px; flex-shrink:0; border-radius:8px;
  border:1.5px solid var(--line); overflow:hidden; background:var(--card);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.item-sm-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.item-sm-info{ min-width:0; flex:1; }
.item-sm-info .badge{ margin-top:0.3rem; }
.item-sm-name{ font-weight:800; font-size:0.9rem; line-height:1.2; }
.item-sm-sub{ font-size:0.78rem; color:var(--ink-soft); margin:0.1rem 0 0;
  display:flex; align-items:center; gap:0.25rem; }
.item-sm-sub img{ width:13px; height:13px; object-fit:contain; }
.item-sm-card--out-of-stock .item-sm-face{ opacity:0.55; filter:grayscale(0.7); }
.item-sm-card--out-of-stock:hover{ border-color:var(--line); box-shadow:none; }

/* ---------- Generic card grid (multi-column) ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:1.5rem; margin-top:1rem; }

/* ---------- Shop directory cards ---------- */
.shop-card-image{ border-radius:10px; overflow:hidden; margin-bottom:0.75rem; }
.shop-card-image img{ width:100%; max-height:180px; object-fit:contain; display:block; }
.shop-card-body{ display:flex; flex-direction:column; gap:0.4rem; }
.shop-detail-banner{ border-radius:12px; overflow:hidden; margin-bottom:1.5rem; }
.shop-detail-banner img{ width:100%; max-height:320px; object-fit:contain; display:block; }

/* ---------- NPC masterlist cards ---------- */
.npc-card-portrait{ border-radius:10px; overflow:hidden; margin-bottom:0.75rem; }
.npc-card-portrait img{ width:100%; max-height:220px; object-fit:cover; display:block; }

/* ---------- Hamburger nav (mobile) ---------- */
.hamburger-btn{ display:none; margin-left:auto; }
@media (min-width:661px){
  .nav-items{ display:contents; }
}
@media (max-width:660px){
  .hamburger-btn{ display:inline-flex; }
  .nav-items{
    display:none; width:100%; flex-direction:column; gap:4px; margin-top:4px;
    border-top:1.5px solid rgba(255,255,255,.15); padding-top:6px;
  }
  .nav-items--open{ display:flex; }
  .nav-items .tab-spacer{ display:none; }
  .nav-items .tab{ text-align:left; justify-content:space-between; width:100%; }
  .nav-items .dd{ width:100%; }
  .nav-items .dd-menu{
    position:static; width:100%; box-shadow:none;
    border:1.5px solid var(--line); margin-top:4px; padding:4px;
  }
}

/* ---------- Lootbox inline reveal (inventory) ---------- */
.lootbox-inline-reveal{
  padding:1.2rem 1.5rem; background:var(--card); border:2px solid var(--rose);
  border-radius:12px; margin-bottom:1rem; text-align:center;
  animation:lootbox-pop 0.4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes lootbox-pop{
  from{ transform:scale(0.7) translateY(12px); opacity:0; }
  to{ transform:scale(1) translateY(0); opacity:1; }
}
.lootbox-reveal-heading{ font-weight:800; font-size:1.05rem; color:var(--rose-deep); margin:0 0 0.6rem; }
.lootbox-reveal-prize{
  display:inline-flex; align-items:center; gap:0.6rem;
  background:var(--bg); border:1.5px solid var(--line); border-radius:10px;
  padding:0.5rem 1rem; text-decoration:none; color:inherit;
  transition:border-color .14s, box-shadow .14s;
}
.lootbox-reveal-prize:hover{ border-color:var(--rose-deep); box-shadow:0 2px 8px rgba(111,79,51,.12); }
.lootbox-prize-qty{ font-size:1.15rem; font-weight:800; color:var(--rose-deep); }
.lootbox-prize-name{ font-weight:600; }

/* ---------- Puffling description edit link ---------- */
.description-edit-link{ margin-top:0.5rem; }
.text-link{ color:var(--rose-deep); font-size:0.85rem; text-decoration:underline; }

/* ---------- Humanoid form: relationship bar, crystal, art toggle ---------- */
.relationship-bar{
  display:inline-block; width:100%; max-width:160px; height:10px; vertical-align:middle;
  background:var(--bg); border:1px solid var(--line); border-radius:999px;
  overflow:hidden; margin-right:0.5rem;
}
@media (max-width: 640px){
  .relationship-bar{ max-width:120px; }
}
@media (max-width: 420px){
  .relationship-bar{ max-width:100px; }
}
.relationship-bar-fill{
  height:100%; background:var(--accent); border-radius:999px;
  transition:width 0.3s ease;
}
.heartcrystal-missing{ filter:grayscale(1); opacity:0.6; }
.art-toggle{ margin-top:0.6rem; text-align:center; }
.art-locked-hint{ margin-top:0.6rem; text-align:center; }

/* Humanoid-form locked state: blur the art and overlay a lock message */
.humanoid-locked-container{ position:relative; }
.humanoid-locked-art img,
.humanoid-locked-art .detail-art-placeholder{
  filter:blur(8px);
  opacity:0.55;
  pointer-events:none;
}
.humanoid-locked-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1rem;
  background:rgba(253,245,230,0.55);
  font-weight:700;
  font-size:0.9rem;
  color:var(--ink);
  border-radius:14px;
}

/* Humanoid art in mod queue review */
.review-humanoid{ margin-top:1rem; }
.review-humanoid-label{ font-size:0.8rem; margin-bottom:0.3rem; }

/* Orphaned Seeker: grayscale + blur the art so it reads as inactive */
.seeker-art--orphaned img,
.seeker-art--orphaned .detail-art-placeholder{ filter:blur(3px) grayscale(1); opacity:0.55; }
.seeker-card--orphaned .puffling-thumb{ filter:blur(2px) grayscale(1); opacity:0.6; }

/* ---------- Quest cards (meta layer) ---------- */
.quest-card{ position:relative; }
.quest-card--new{ border-color:var(--cd-accent, #e8a); box-shadow:0 0 0 2px var(--cd-accent, #e8a) inset; }
.quest-new-badge{ position:absolute; top:.5rem; right:.5rem; background:var(--cd-accent, #e8a); color:#fff;
  font-size:.7rem; font-weight:700; letter-spacing:.05em; padding:.15rem .5rem; border-radius:999px; }
.quest-card-banner img{ width:100%; height:140px; object-fit:cover; border-radius:8px; display:block; }
.quest-meta{ display:grid; grid-template-columns:max-content 1fr; gap:.15rem .75rem; font-size:.85rem; margin:.3rem 0; }
.quest-meta dt{ font-weight:600; }
.quest-meta dd{ margin:0; }
.quest-reward-list{ list-style:none; padding:0; margin:.1rem 0 .4rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.quest-reward-list li{ display:inline-flex; align-items:center; gap:.25rem; font-size:.85rem;
  background:rgba(0,0,0,.05); padding:.1rem .45rem; border-radius:6px; }
.quest-reward-icon{ width:18px; height:18px; object-fit:contain; }
.quest-unavailable{ font-size:.85rem; }
.qb-reward-row{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; padding:.4rem 0;
  border-bottom:1px solid rgba(0,0,0,.08); }