:root {
  --parchment: #f3e3c0;
  --parchment-dark: #e6d2a8;
  --ink: #3a2c1a;
  --ink-soft: #6b5640;
  --board: #3a2614;
  --board-dark: #271808;
  --seal: #8a2b1e;
  --gold: #c8911c;
  --common: #5f7a4f; --common-bg: #e7ead0;
  --rare: #2f6fb0; --rare-bg: #d8e6f3;
  --epic: #7a3fb0; --epic-bg: #e7daf3;
  --legendary: #b9791a; --legendary-bg: #f6e7c4;
  --danger: #a3302a;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; font-family: 'Spectral', Georgia, serif; color: var(--ink);
  background-color: #221913;
  background-image:
    radial-gradient(ellipse at 50% -8%, rgba(120,90,50,0.16), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.25) 0, rgba(0,0,0,0.25) 2px, transparent 2px, transparent 64px),
    linear-gradient(180deg, #2a1f15, #18110b);
}
.noticeboard {
  position: relative; margin: 46px auto; max-width: 1180px; padding: 16px; border-radius: 6px;
  background-color: #6b4a26;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.14) 0, rgba(0,0,0,0.14) 1px, transparent 1px, transparent 9px),
    linear-gradient(180deg, #82592f, #573a1f);
  box-shadow: 0 22px 48px rgba(0,0,0,0.6), inset 0 2px 2px rgba(255,220,170,0.18), inset 0 -4px 5px rgba(0,0,0,0.45);
}
.noticeboard-roof {
  position: absolute; top: -27px; left: -12px; right: -12px; height: 34px;
  background-color: #3f4a44;
  background-image:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.22) 0, rgba(0,0,0,0.22) 1px, transparent 1px, transparent 7px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 15px, rgba(0,0,0,0.14) 15px, rgba(0,0,0,0.14) 17px),
    linear-gradient(180deg, #4d5953, #333c37);
  clip-path: polygon(50% 0, 100% 56%, 100% 100%, 0 100%, 0 56%);
  box-shadow: 0 7px 11px rgba(0,0,0,0.45);
}
.noticeboard-cork {
  padding: 30px 26px; border-radius: 3px;
  background-color: #463618;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(255,228,170,0.06), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.42 0 0 0 0 0.22 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: auto, 170px 170px;
  background-repeat: no-repeat, repeat;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.35);
}
.noticeboard-cork .board { padding: 4px 0 0; }
a { color: inherit; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px); border-bottom: 2px solid rgba(200,145,28,0.4);
  background: rgba(0,0,0,0.25);
}
.brand { font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 2px; font-size: 22px; color: #f6e6c2; text-decoration: none; }
.topnav { display: flex; align-items: center; gap: 16px; }
.topnav form { margin: 0; }
.me { display: inline-flex; align-items: center; gap: 7px; color: #e7d5ab; font-size: 15px; text-decoration: none; }
.me:hover { color: #fff; }
.navlink { color: #d8c39a; text-decoration: none; font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 1px; }
.navlink:hover { color: #fff; }
.linkbtn { background: none; border: none; cursor: pointer; padding: 0; }
.page { padding: 8px clamp(16px, 4vw, 40px) 48px; max-width: 1280px; margin: 0 auto; }

.stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; padding: 22px 0 4px; }
.stat { min-width: 110px; text-align: center; background: rgba(243,227,192,0.08); border: 1px solid rgba(200,145,28,0.35); border-radius: 10px; padding: 10px 18px; }
.stat .num { font-family: 'Cinzel', serif; font-size: 26px; color: #f6e6c2; line-height: 1; }
.stat .lbl { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #d3bd92; margin-top: 4px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; justify-content: center; padding: 22px 0 8px; }
.tabs { display: flex; gap: 6px; background: rgba(0,0,0,0.25); padding: 4px; border-radius: 999px; }
.tab { border: none; background: transparent; color: #d8c39a; font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 1px; padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: all .15s ease; }
.tab:hover { color: #fff; }
.tab.active { background: var(--gold); color: #2a1b08; }
select.filter { font-family: 'Spectral', serif; font-size: 14px; color: var(--ink); background: var(--parchment); border: 1px solid var(--ink-soft); border-radius: 8px; padding: 8px 10px; cursor: pointer; }

button.primary { font-family: 'Cinzel', serif; letter-spacing: 1px; font-size: 14px; color: #2a1b08; background: linear-gradient(180deg, #e7b73f, var(--gold)); border: 1px solid #8a5e10; border-radius: 8px; padding: 10px 18px; cursor: pointer; box-shadow: 0 2px 0 #6f4a0c; transition: transform .1s ease, box-shadow .1s ease; }
button.primary:hover { transform: translateY(-1px); box-shadow: 0 3px 0 #6f4a0c; }
button.primary:active { transform: translateY(1px); box-shadow: 0 1px 0 #6f4a0c; }
button.primary.block { width: 100%; margin-top: 6px; }

.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; padding: 22px 0 40px; }
.empty { grid-column: 1 / -1; text-align: center; color: #c8b189; font-style: italic; padding: 40px 0; }

.quest {
  position: relative; isolation: isolate;
  padding: 24px 22px 16px;
  display: flex; flex-direction: column; gap: 10px; cursor: pointer;
  transition: transform .12s ease; touch-action: pan-y;
}
.quest:hover { transform: translateY(-3px); }
.quest::before { content: ""; position: absolute; top: -12px; left: 50%; width: 20px; height: 20px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 38% 30%, #ff9485 0%, #e23b2e 40%, #b81f17 74%, #7e120c 100%); box-shadow: 0 4px 6px rgba(0,0,0,0.5), inset -2px -2px 4px rgba(0,0,0,0.3), inset 2px 2px 4px rgba(255,255,255,0.45); z-index: 3; }
.quest:nth-child(4n+2)::before { background: radial-gradient(circle at 38% 30%, #8fb6e6 0%, #3a7bc8 40%, #245d9e 74%, #163d6b 100%); }
.quest:nth-child(4n+3)::before { background: radial-gradient(circle at 38% 30%, #9fd07a 0%, #5aa233 40%, #3d7a1f 74%, #285212 100%); }
.quest:nth-child(4n)::before { background: radial-gradient(circle at 38% 30%, #f6cd72 0%, #e0a32f 40%, #b87d1a 74%, #8a5a12 100%); }
.quest.done { opacity: 0.82; }
.q-paper {
  position: absolute; inset: 0; z-index: -1; border-radius: 2px;
  background-color: #ecdcb4;
  background-image:
    repeating-linear-gradient(0deg, rgba(120,90,40,0.06) 0, rgba(120,90,40,0.06) 1px, transparent 1px, transparent 27px),
    radial-gradient(circle at 22% 14%, rgba(120,80,30,0.10), transparent 45%),
    radial-gradient(circle at 82% 88%, rgba(80,52,18,0.16), transparent 52%),
    linear-gradient(165deg, #f1e2bf, #e2cb98);
  filter: url(#torn-1) drop-shadow(0 9px 15px rgba(0,0,0,0.45));
}
.quest:nth-child(3n+2) .q-paper { filter: url(#torn-2) drop-shadow(0 9px 15px rgba(0,0,0,0.45)); }
.quest:nth-child(3n) .q-paper { filter: url(#torn-3) drop-shadow(0 9px 15px rgba(0,0,0,0.45)); }

.q-title { font-family: 'Texturina', 'Cinzel', serif; font-weight: 600; font-size: 23px; line-height: 1.14; color: #3f2d18; margin: 0; padding-right: 60px; }
.q-rank { position: absolute; top: 15px; right: 15px; z-index: 1; }
.q-rank-seal { position: relative; display: block; width: 46px; height: 46px; border-radius: 50%; color: #f6dca6; box-shadow: inset 0 2px 5px rgba(255,255,255,0.28), inset 0 -3px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.45); }
.rank-star { position: absolute; transform: translate(-50%, -50%); font-size: 12px; line-height: 1; }
.q-rank-seal[data-stars="1"] .rank-star:nth-child(1) { left: 50%; top: 50%; }
.q-rank-seal[data-stars="2"] .rank-star:nth-child(1) { left: 35%; top: 35%; }
.q-rank-seal[data-stars="2"] .rank-star:nth-child(2) { left: 65%; top: 65%; }
.q-rank-seal[data-stars="3"] .rank-star:nth-child(1) { left: 50%; top: 29%; }
.q-rank-seal[data-stars="3"] .rank-star:nth-child(2) { left: 32%; top: 66%; }
.q-rank-seal[data-stars="3"] .rank-star:nth-child(3) { left: 68%; top: 66%; }
.q-rank-seal[data-stars="4"] .rank-star:nth-child(1) { left: 33%; top: 33%; }
.q-rank-seal[data-stars="4"] .rank-star:nth-child(2) { left: 67%; top: 33%; }
.q-rank-seal[data-stars="4"] .rank-star:nth-child(3) { left: 33%; top: 67%; }
.q-rank-seal[data-stars="4"] .rank-star:nth-child(4) { left: 67%; top: 67%; }
.q-rank-seal[data-stars="5"] .rank-star:nth-child(1) { left: 31%; top: 31%; }
.q-rank-seal[data-stars="5"] .rank-star:nth-child(2) { left: 69%; top: 31%; }
.q-rank-seal[data-stars="5"] .rank-star:nth-child(3) { left: 50%; top: 50%; }
.q-rank-seal[data-stars="5"] .rank-star:nth-child(4) { left: 31%; top: 69%; }
.q-rank-seal[data-stars="5"] .rank-star:nth-child(5) { left: 69%; top: 69%; }
.q-rank.common .q-rank-seal { background: radial-gradient(circle at 35% 30%, #9a978c, #74716a 62%, #565249); }
.q-rank.uncommon .q-rank-seal { background: radial-gradient(circle at 35% 30%, #7bb24f, #4f8a2f 62%, #386521); }
.q-rank.rare .q-rank-seal { background: radial-gradient(circle at 35% 30%, #5a93c8, #2f6fb0 62%, #21527f); }
.q-rank.epic .q-rank-seal { background: radial-gradient(circle at 35% 30%, #9d63c6, #7a3fb0 62%, #5a2d86); }
.q-rank.legendary .q-rank-seal { background: radial-gradient(circle at 35% 30%, #dda948, #b9791a 62%, #8a5912); box-shadow: inset 0 2px 5px rgba(255,255,255,0.3), inset 0 -3px 6px rgba(0,0,0,0.4), 0 0 14px rgba(201,145,28,0.55), 0 2px 4px rgba(0,0,0,0.45); }
.q-divider { display: flex; align-items: center; gap: 8px; margin: 0; }
.q-divider::before, .q-divider::after { content: ""; height: 1px; flex: 1; background: rgba(120,90,40,0.4); }
.q-fleur { color: #a6803a; font-size: 13px; }
.q-for { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; color: #6b5640; }
.q-for-label { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #8a6a3a; }
.q-for-names { color: #5a4630; }
.q-for .due { margin-left: auto; }
.badge { flex-shrink: 0; font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid; }
.badge.common { color: var(--common); background: var(--common-bg); border-color: var(--common); }
.badge.rare { color: var(--rare); background: var(--rare-bg); border-color: var(--rare); }
.badge.epic { color: var(--epic); background: var(--epic-bg); border-color: var(--epic); }
.badge.legendary { color: var(--legendary); background: var(--legendary-bg); border-color: var(--legendary); box-shadow: 0 0 10px rgba(185,121,26,0.4); }

.q-desc { font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin: 0; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; color: var(--ink-soft); align-items: center; }
.who { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.person { display: inline-flex; align-items: center; gap: 5px; }
.seal { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; color: #fff; }
.seal.big { width: 38px; height: 38px; font-size: 16px; }
.arrow { opacity: 0.5; }
.due { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.due.soon { color: #b06a12; }
.due.over { color: var(--seal); }

.pbar { height: 12px; background: rgba(58,44,26,0.18); border-radius: 999px; overflow: hidden; border: 1px solid rgba(58,44,26,0.25); }
.pfill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7aa34f, #c8911c); transition: width .25s ease; }
.q-progress { display: flex; align-items: center; gap: 10px; }
.q-progress .pbar { flex-grow: 1; }
.q-progress .pcount { font-family: 'Cinzel', serif; font-size: 12px; color: var(--ink); min-width: 40px; text-align: right; }
.q-foot { display: flex; align-items: baseline; gap: 7px; }
.q-reward-label { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #8a6a3a; flex-shrink: 0; }
.q-reward { font-size: 13.5px; color: #6b5640; font-style: italic; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.stamp { position: absolute; top: 14px; right: 14px; font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 2px; color: var(--seal); border: 3px double var(--seal); border-radius: 8px; padding: 3px 10px; font-size: 14px; transform: rotate(-12deg); opacity: 0.85; z-index: 2; }

.overlay { position: fixed; inset: 0; background: rgba(15,9,3,0.72); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.modal { width: min(540px, 100%); max-height: 92vh; overflow-y: auto; background: linear-gradient(170deg, var(--parchment), var(--parchment-dark)); border: 2px solid #8a5e10; border-radius: 12px; padding: 26px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.modal h2 { font-family: 'Cinzel', serif; margin: 0 0 18px; color: var(--ink); font-size: 24px; text-align: center; }

.detail { position: relative; }
.detail .closeX { position: absolute; top: -6px; right: -4px; background: none; border: none; font-size: 26px; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 4px 8px; }
.detail .closeX:hover { color: var(--ink); }
.detail h2 { text-align: left; margin: 0 30px 4px 0; }
.d-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 8px 0 16px; font-size: 14px; color: var(--ink-soft); align-items: center; }
.d-desc { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0 0 18px; }
.d-posted { font-size: 13px; color: var(--ink-soft); margin: 2px 0 16px; }
.d-box { background: rgba(255,255,255,0.35); border: 1px solid rgba(58,44,26,0.2); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.d-box .label { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.d-box .label .pcount { font-size: 15px; color: var(--ink); }
.d-controls { display: flex; align-items: center; gap: 14px; }
.d-controls .pbar { flex-grow: 1; height: 16px; }
.d-reward { display: flex; align-items: center; gap: 10px; }
.d-reward::before { content: "\2605"; font-size: 22px; color: var(--gold); }
.d-reward .r-meta { display: flex; flex-direction: column; }
.d-reward .r-label { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
.d-reward .r-text { font-size: 16px; color: var(--ink); }
.d-box.claimed { background: var(--legendary-bg); border-color: var(--legendary); }
.d-box.claimed::before { color: var(--legendary); }
.d-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.step-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ink-soft); background: var(--parchment); color: var(--ink); font-size: 21px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .12s ease; flex-shrink: 0; }
.step-btn:hover { background: var(--parchment-dark); }
.step-btn:disabled { opacity: 0.35; cursor: default; }

.act { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.5px; border: 1px solid var(--ink-soft); background: transparent; color: var(--ink-soft); border-radius: 6px; padding: 8px 14px; cursor: pointer; transition: all .12s ease; }
.act:hover { background: var(--ink); color: var(--parchment); }
.act.complete { border-color: var(--common); color: var(--common); margin-right: auto; }
.act.complete:hover { background: var(--common); color: #fff; }
.act.reopen { border-color: var(--rare); color: var(--rare); margin-right: auto; }
.act.reopen:hover { background: var(--rare); color: #fff; }
.act.danger { border-color: var(--danger); color: var(--danger); }
.act.danger:hover { background: var(--danger); color: #fff; }

.field { margin-bottom: 14px; }
.field label, .field > span { display: block; font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px; }
.field input, .field textarea, .field select { width: 100%; font-family: 'Spectral', serif; font-size: 15px; color: var(--ink); background: rgba(255,255,255,0.4); border: 1px solid var(--ink-soft); border-radius: 7px; padding: 9px 11px; }
.field textarea { resize: vertical; min-height: 60px; }
.field.colorfield input { height: 42px; padding: 4px; cursor: pointer; }
.row { display: flex; gap: 12px; }
.row .field { flex: 1; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--ink-soft); border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 14px; color: var(--ink-soft); user-select: none; }
.check input { accent-color: var(--seal); margin: 0; width: 15px; height: 15px; }
.check:has(input:checked) { background: rgba(138,43,30,0.12); border-color: var(--seal); color: var(--ink); }
.check.standalone { margin-bottom: 16px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
button.ghost { font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: 1px; background: transparent; border: 1px solid var(--ink-soft); color: var(--ink-soft); border-radius: 8px; padding: 10px 18px; cursor: pointer; }
button.ghost:hover { background: rgba(58,44,26,0.08); }
.err, .field > span.err { display: block; font-family: 'Spectral', serif; font-weight: 600; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--danger); margin: 4px 0 0; }
.form-error > div + div { margin-top: 3px; }

.login-page { display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: min(380px, 100%); margin-top: 12vh; background: linear-gradient(170deg, var(--parchment), var(--parchment-dark)); border: 2px solid #8a5e10; border-radius: 14px; padding: 30px; box-shadow: 0 24px 60px rgba(0,0,0,0.6); }
.login-card h1 { font-family: 'Cinzel', serif; text-align: center; color: var(--ink); margin: 0; font-size: 30px; letter-spacing: 2px; }
.login-sub { text-align: center; color: var(--ink-soft); font-style: italic; margin: 4px 0 20px; }
.login-card .field span { display: block; }
.remember { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); margin: 4px 0 14px; }
.form-error { background: rgba(163,48,42,0.12); border: 1px solid var(--danger); color: var(--danger); border-radius: 7px; padding: 9px 12px; font-size: 14px; margin-bottom: 14px; }

.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 14px; }
.admin-head h2 { font-family: 'Cinzel', serif; color: #f6e6c2; margin: 0; letter-spacing: 1px; }
.user-list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 40px; }
.user-row { display: flex; align-items: center; gap: 14px; background: linear-gradient(170deg, var(--parchment), var(--parchment-dark)); border: 1px solid #b89a63; border-radius: 10px; padding: 14px 16px; }
.user-main { flex-grow: 1; min-width: 0; }
.user-name { font-family: 'Cinzel', serif; font-size: 17px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.user-email { font-size: 14px; color: var(--ink-soft); }
.user-stats { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.user-actions { display: flex; gap: 8px; }
.tag-admin { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--legendary); background: var(--legendary-bg); border: 1px solid var(--legendary); border-radius: 999px; padding: 2px 8px; }
@media (max-width: 560px) { .user-row { flex-wrap: wrap; } .user-stats { width: 100%; order: 3; } }

.board-head { display: flex; align-items: baseline; gap: 16px; padding: 18px 0 0; }
.back-link { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 1px; color: #d8c39a; text-decoration: none; white-space: nowrap; }
.back-link:hover { color: #fff; }
.board-title { font-family: 'Cinzel', serif; color: #f6e6c2; margin: 0; letter-spacing: 1px; font-size: 24px; }

.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; padding: 22px 0 40px; }
.board-card {
  text-decoration: none; display: flex; flex-direction: column; gap: 11px;
  background: linear-gradient(170deg, var(--parchment), var(--parchment-dark));
  border: 1px solid #b89a63; border-radius: 10px; padding: 20px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.4), inset 0 0 30px rgba(150,110,50,0.12);
  transition: transform .12s ease, box-shadow .12s ease;
}
.board-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(0,0,0,0.5), inset 0 0 30px rgba(150,110,50,0.12); }
.board-card h3 { font-family: 'Cinzel', serif; font-weight: 600; font-size: 21px; color: var(--ink); margin: 0; }
.bc-desc { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); margin: 0; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bc-members { display: flex; flex-wrap: wrap; gap: 4px; }
.bc-foot { display: flex; gap: 16px; font-family: 'Cinzel', serif; font-size: 12.5px; letter-spacing: 0.5px; color: var(--ink-soft); border-top: 1px solid rgba(58,44,26,0.15); padding-top: 11px; margin-top: 2px; }

[x-cloak] { display: none !important; }
.filter-group { display: flex; flex-direction: column; gap: 3px; }
.filter-label { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #d3bd92; padding-left: 3px; }

.multiselect { position: relative; }
.ms-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: 'Spectral', serif; font-size: 15px; color: var(--ink); background: rgba(255,255,255,0.4); border: 1px solid var(--ink-soft); border-radius: 7px; padding: 9px 11px; cursor: pointer; text-align: left; }
.ms-toggle:hover { background: rgba(255,255,255,0.55); }
.ms-caret { opacity: 0.6; }
.ms-menu { position: absolute; z-index: 5; left: 0; right: 0; margin-top: 4px; max-height: 220px; overflow-y: auto; background: var(--parchment); border: 1px solid var(--ink-soft); border-radius: 7px; box-shadow: 0 12px 26px rgba(0,0,0,0.4); padding: 4px; }
.ms-option { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 5px; cursor: pointer; font-size: 15px; color: var(--ink); }
.ms-option:hover { background: rgba(58,44,26,0.08); }
.ms-option input { accent-color: var(--seal); width: 15px; height: 15px; margin: 0; }
.ms-empty { display: block; padding: 8px 10px; color: var(--ink-soft); font-style: italic; font-size: 14px; }

.board.draggable .quest { cursor: grab; }
.quest-chosen { cursor: grabbing; }
.quest-ghost { opacity: 0.3; }
.quest-hidden-clone { opacity: 0 !important; pointer-events: none !important; }
.quest-floating-wrap { position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none; will-change: transform; }
.quest-floating { margin: 0; width: 100%; transform-origin: 50% 0; transition: rotate 0.07s ease-out; box-shadow: none !important; }
.quest-floating .q-paper { filter: url(#torn-1) drop-shadow(0 22px 38px rgba(0,0,0,0.55)) !important; }

.sig-tangerine { font-family: 'Tangerine', cursive; }
.sig-great-vibes { font-family: 'Great Vibes', cursive; }
.sig-pinyon-script { font-family: 'Pinyon Script', cursive; }
.sig-allura { font-family: 'Allura', cursive; }
.sig-mr-de-haviland { font-family: 'Mr De Haviland', cursive; }
.sig-rouge-script { font-family: 'Rouge Script', cursive; }

.q-sign { text-align: right; line-height: 1; margin-top: 2px; }
.q-sign span { font-size: 27px; color: #4a3520; }

.profile-card { width: min(560px, 100%); margin: 8px auto 40px; background: linear-gradient(170deg, #f3e3c0, #e6d2a8); border: 2px solid #8a5e10; border-radius: 12px; padding: 26px; box-shadow: 0 14px 34px rgba(0,0,0,0.4); }
.form-ok { background: rgba(95,122,79,0.18); border: 1px solid #5f7a4f; color: #3c5a2e; border-radius: 7px; padding: 9px 12px; font-size: 14px; margin-bottom: 14px; }
.sig-preview { margin-top: 8px; padding: 16px; background: #f6ead0; border: 1px dashed #9a7a4a; border-radius: 7px; font-size: 38px; line-height: 1.5; color: #3a2c1a; min-height: 66px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-transform: none; letter-spacing: normal; }
.sig-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 4px; }
.sig-option { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 74px; padding: 12px 12px 8px; border: 1px solid #9a7a4a; border-radius: 8px; cursor: pointer; background: #f6ead0; overflow: hidden; }
.sig-option .sig-sample { font-size: 27px; line-height: 1.4; color: #3a2c1a; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: normal; }
.sig-option .sig-name { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #9a7a4a; }
.sig-option input { position: absolute; opacity: 0; pointer-events: none; }
.sig-option.selected { border-color: #8a2b1e; background: #f9efd9; box-shadow: 0 0 0 1px #8a2b1e; }

@media (max-width: 640px) {
  .topbar { padding: 10px 14px; }
  .brand { font-size: 18px; letter-spacing: 1px; }
  .topnav { gap: 13px; }
  .page { padding: 6px 10px 36px; }
  .noticeboard { margin: 28px 6px; padding: 9px; }
  .noticeboard-roof { top: -18px; height: 24px; left: -8px; right: -8px; }
  .noticeboard-cork { padding: 18px 12px; }
  .board { grid-template-columns: 1fr; gap: 26px; padding-top: 6px; }
  .toolbar { gap: 8px; }
  .filter-group { flex: 1 1 42%; }
  .filter-group .filter { width: 100%; }
  .toolbar > .primary { flex: 1 1 100%; }
  .stat { flex: 1 1 40%; min-width: 0; }
  .modal { padding: 20px; }
  .row { flex-direction: column; }
  .q-paper, .quest:nth-child(3n+2) .q-paper, .quest:nth-child(3n) .q-paper { filter: drop-shadow(0 6px 10px rgba(0,0,0,0.4)) !important; }
}

.item-row { display: flex; gap: 8px; margin-bottom: 8px; }
.item-row input { flex: 1; }
.item-del { flex-shrink: 0; width: 38px; border: 1px solid var(--ink-soft); background: rgba(255,255,255,0.3); color: var(--danger); border-radius: 7px; font-size: 20px; line-height: 1; cursor: pointer; }
.item-del:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.item-add { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.5px; border: 1px dashed var(--ink-soft); background: transparent; color: var(--ink-soft); border-radius: 7px; padding: 8px 14px; cursor: pointer; }
.item-add:hover { background: rgba(58,44,26,0.08); color: var(--ink); }

.checklist { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.check-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid rgba(58,44,26,0.25); border-radius: 8px; cursor: pointer; background: rgba(255,255,255,0.3); color: var(--ink); }
.check-item:hover { background: rgba(255,255,255,0.5); }
.check-box { flex-shrink: 0; width: 22px; height: 22px; border: 1.5px solid var(--ink-soft); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; }
.check-item.done .check-box { background: var(--common); border-color: var(--common); }
.check-item.done .check-label { text-decoration: line-through; color: var(--ink-soft); }
.check-label { font-size: 15px; }

.stage-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.stage-item { display: flex; align-items: center; gap: 11px; color: var(--ink-soft); }
.stage-dot { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ink-soft); background: var(--parchment); display: inline-flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-size: 13px; color: var(--ink-soft); }
.stage-item.done .stage-dot { background: var(--common); border-color: var(--common); color: #fff; }
.stage-item.current .stage-dot { border-color: var(--gold); color: var(--ink); box-shadow: 0 0 0 3px rgba(200,145,28,0.25); }
.stage-item.done .stage-label, .stage-item.current .stage-label { color: var(--ink); }
.stage-item.current .stage-label { font-weight: 600; }
.stage-label { font-size: 15px; }
.stage-controls { display: flex; gap: 10px; margin-top: 14px; }