:root {
  color-scheme: dark;
  --bg: #0b0d19;
  --panel: #131625;
  --panel-hi: #191d30;
  --panel-light: #20253a;
  --ink: #f0f2fa;
  --ink-soft: #9da4bb;
  --muted: #646c84;
  --violet: #b35bff;
  --violet-hi: #d19dff;
  --blue: #47c9ee;
  --red: #f45164;
  --line: rgb(172 184 216 / 14%);
  --font: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-family: var(--font);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  background-color: var(--bg);
  background-image: linear-gradient(rgb(95 119 173 / 3%) 1px, transparent 1px), linear-gradient(90deg, rgb(95 119 173 / 3%) 1px, transparent 1px), radial-gradient(ellipse at 83% 27%, rgb(92 39 141 / 15%), transparent 36%);
  background-size: 44px 44px, 44px 44px, auto;
  color: var(--ink);
}
button, input { font: inherit; }
a { color: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.site-shell { width: min(1100px, calc(100% - 72px)); margin-inline: auto; }
.site-header { height: 76px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand-mark { position: relative; width: 25px; height: 25px; display: inline-block; overflow: hidden; border: 1px solid var(--violet); transform: rotate(45deg); }
.brand-mark i { position: absolute; inset: 4px; border: 1px solid var(--blue); }
.brand-mark i:last-child { inset: 8px; border-color: var(--violet-hi); }
.brand-name { font-size: 13px; font-weight: 850; letter-spacing: .09em; }
.brand-name span { color: var(--violet-hi); }
.header-right { display: flex; align-items: center; gap: 19px; }
.game-tag, .server-status, .eyebrow, .panel-kicker, .side-label, .mission-count, .drop-label, .drop-foot, .data-note, .last-sync { font-family: var(--font-mono); }
.game-tag { color: #77809a; font-size: 9px; letter-spacing: .13em; }
.server-status { display: inline-flex; gap: 8px; align-items: center; color: #8acda5; font-size: 9px; letter-spacing: .04em; }
.server-status i, .side-lamp { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #6fd18d; box-shadow: 0 0 11px rgb(111 209 141 / 65%); }
.server-status.is-offline { color: #ff8894; }
.server-status.is-offline i { background: var(--red); box-shadow: 0 0 9px rgb(244 81 100 / 55%); }
.board-section { padding: 49px 4.4% 55px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 15px; color: #929ab3; font-size: 9px; font-weight: 700; letter-spacing: .17em; }
.eyebrow-line { width: 20px; height: 1px; display: inline-block; background: var(--violet); box-shadow: 0 0 8px rgb(179 91 255 / 66%); }
#today-date { color: #69738c; }
h1, h2, p { margin-top: 0; }
.board-heading h1 { margin: 0 0 9px; font-size: clamp(39px, 5.5vw, 59px); line-height: 1.1; font-weight: 880; letter-spacing: -.055em; }
.title-highlight { color: var(--violet-hi); text-shadow: 0 0 23px rgb(179 91 255 / 20%); }
.title-dot, .fun-heading h2 span { color: var(--blue); }
.board-intro { margin: 0 0 26px; color: var(--ink-soft); font-size: 12px; line-height: 1.8; }
.board-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(215px, .75fr); gap: 16px; align-items: stretch; }
.mission-panel { position: relative; min-width: 0; padding: 23px 25px 17px; border: 1px solid rgb(176 188 221 / 15%); background: linear-gradient(145deg, rgb(25 29 48 / 98%), rgb(17 20 34 / 98%)); box-shadow: 0 18px 60px rgb(0 0 0 / 18%); }
.mission-panel::before, .mission-panel::after, .board-side::before, .board-side::after { position: absolute; width: 13px; height: 13px; content: ""; pointer-events: none; }
.mission-panel::before { top: -1px; left: -1px; border-top: 2px solid var(--violet); border-left: 2px solid var(--violet); }
.mission-panel::after { right: -1px; bottom: -1px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); }
.mission-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.panel-kicker { margin: 0 0 8px; color: #7f88a2; font-size: 8px; letter-spacing: .14em; }
.small-crosshair { margin-right: 4px; color: var(--blue); font-size: 15px; vertical-align: -1px; }
.mission-top h2 { margin: 0; font-size: 20px; font-weight: 760; letter-spacing: .02em; }
.mission-count { margin-top: 4px; padding: 6px 8px; color: #97d6e8; border: 1px solid rgb(71 201 238 / 18%); background: rgb(71 201 238 / 5%); font-size: 8px; letter-spacing: .06em; white-space: nowrap; }
.add-form { display: flex; gap: 8px; margin-bottom: 9px; }
.add-form input { min-width: 0; height: 41px; flex: 1; padding: 0 12px; color: var(--ink); border: 1px solid rgb(167 180 214 / 17%); border-radius: 1px; background: rgb(5 8 17 / 46%); font-size: 11px; }
.add-form input::placeholder { color: #747d94; }
.add-form input:focus { border-color: rgb(71 201 238 / 65%); outline: none; box-shadow: 0 0 0 3px rgb(71 201 238 / 9%); }
.add-button { width: 42px; height: 41px; border: 1px solid rgb(179 91 255 / 48%); border-radius: 1px; background: rgb(179 91 255 / 14%); color: var(--violet-hi); cursor: pointer; font-size: 22px; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.add-button:hover { border-color: var(--violet); background: rgb(179 91 255 / 25%); transform: translateY(-1px); }
.add-button:active { transform: scale(.96); }
.todo-list { min-height: 166px; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.todo-item { min-height: 45px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid rgb(167 180 214 / 9%); }
.todo-item:last-child { border-bottom: 0; }
.todo-check { width: 15px; height: 15px; flex: 0 0 auto; accent-color: var(--violet); cursor: pointer; }
.todo-label { min-width: 0; flex: 1; overflow-wrap: anywhere; color: #dce0ed; font-size: 11px; line-height: 1.55; }
.todo-item.is-done .todo-label { color: #727b91; text-decoration: line-through; text-decoration-color: #8e7bab; }
.delete-reminder { width: 27px; height: 27px; flex: 0 0 auto; border: 0; background: transparent; color: #768098; cursor: pointer; font-size: 17px; opacity: .62; }
.delete-reminder:hover { color: #ff8192; opacity: 1; }
.list-loading, .empty-list { display: grid; min-height: 166px; place-items: center; color: #788199; font-size: 11px; }
.mission-bottom { min-height: 24px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 9px; border-top: 1px solid rgb(167 180 214 / 9%); }
.data-note { color: #828ba3; font-size: 8px; letter-spacing: .02em; }
.data-note span { margin-right: 5px; color: var(--blue); }
.last-sync { color: #67718a; font-size: 8px; white-space: nowrap; }
.error-note { margin: 8px 0 0; color: #ff8b96; font-size: 10px; line-height: 1.6; }
.board-side { position: relative; min-height: 294px; display: flex; flex-direction: column; justify-content: center; padding: 25px 22px; overflow: hidden; border: 1px solid rgb(116 83 173 / 23%); background: radial-gradient(ellipse at 89% 9%, rgb(147 54 203 / 21%), transparent 42%), linear-gradient(155deg, #181526, #10121e 75%); }
.board-side::before { top: -1px; right: -1px; border-top: 2px solid var(--violet); border-right: 2px solid var(--violet); }
.board-side::after { bottom: -1px; left: -1px; border-bottom: 2px solid var(--blue); border-left: 2px solid var(--blue); }
.side-label { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: #9a8eae; font-size: 8px; letter-spacing: .13em; }
.side-lamp { width: 5px; height: 5px; }
.side-quote { position: relative; z-index: 1; margin: 0 0 20px; font-size: 23px; font-weight: 800; line-height: 1.43; letter-spacing: .04em; }
.side-divider { width: 100%; height: 1px; margin-bottom: 13px; background: linear-gradient(90deg, rgb(179 91 255 / 50%), transparent); }
.quick-check { display: flex; align-items: center; gap: 11px; margin: 7px 0; color: #d3d5e3; font-size: 10px; line-height: 1.6; }
.quick-check small { color: #848aa0; font-size: 8px; }
.quick-icon { width: 24px; height: 24px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid rgb(179 91 255 / 24%); color: var(--violet-hi); font-size: 15px; }
.quick-icon.blue { border-color: rgb(71 201 238 / 24%); color: var(--blue); }
.corner-mark { position: absolute; width: 18px; height: 18px; border: 1px solid rgb(179 91 255 / 19%); transform: rotate(45deg); }
.corner-a { right: 20px; top: 34px; }
.corner-b { right: 33px; top: 47px; border-color: rgb(71 201 238 / 19%); }
.fun-section { padding: 15px 4.4% 55px; border-top: 1px solid var(--line); }
.fun-heading { margin-bottom: 19px; }
.fun-heading .eyebrow { margin-bottom: 9px; }
.fun-heading h2 { margin: 0; font-size: 23px; letter-spacing: -.02em; }
.fun-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.drop-card { position: relative; min-height: 205px; display: flex; flex-direction: column; align-items: flex-start; padding: 20px 22px; overflow: hidden; border: 1px solid rgb(71 201 238 / 15%); background: linear-gradient(135deg, rgb(20 34 48 / 94%), rgb(23 23 40 / 95%)); transition: border-color .22s ease, transform .22s ease; }
.drop-card::after { position: absolute; right: -18px; bottom: -53px; width: 136px; height: 136px; border: 1px dashed rgb(71 201 238 / 22%); border-radius: 50%; content: ""; }
.drop-card.is-fresh { border-color: rgb(179 91 255 / 65%); transform: translateY(-2px); }
.compliment-card { border-color: rgb(179 91 255 / 20%); background: linear-gradient(135deg, rgb(34 25 48 / 96%), rgb(23 23 40 / 95%)); }
.drop-label { color: var(--blue); font-size: 9px; letter-spacing: .11em; }
.drop-label span { margin-right: 5px; color: var(--violet-hi); }
.drop-text { position: relative; z-index: 1; margin: 13px 0 9px; color: #e4e8f3; font-size: 15px; font-weight: 700; line-height: 1.65; }
.drop-foot { margin-top: auto; padding-top: 12px; color: #69768a; font-size: 8px; }
.drop-card .action-button { margin-top: 13px; }

.action-button { min-height: 38px; padding: 0 12px; border: 1px solid rgb(179 91 255 / 36%); border-radius: 1px; cursor: pointer; font-size: 10px; font-weight: 700; transition: background .15s ease, transform .15s ease, border-color .15s ease; }
.action-button span { margin-right: 7px; color: var(--blue); }
.action-button:hover { border-color: var(--violet); transform: translateY(-1px); }
.action-primary { background: rgb(179 91 255 / 13%); color: #eee3fa; }
.action-primary:hover { background: rgb(179 91 255 / 22%); }
.action-quiet { border-color: rgb(174 185 217 / 16%); background: transparent; color: #b3bbcf; }
.action-quiet span { color: var(--violet-hi); }

.site-footer { min-height: 73px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); }
.footer-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.footer-brand .brand-mark { width: 18px; height: 18px; }
.footer-brand .brand-mark i { inset: 3px; }
.footer-brand .brand-mark i:last-child { inset: 6px; }
.site-footer p, .site-footer a { margin: 0; color: #747d94; font-size: 8px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--blue); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); border: 0; }
.mobile-break { display: none; }


@media (min-width: 1200px) { .site-shell { width: min(1100px, calc(100% - 96px)); } }
@media (max-width: 720px) {
  .site-shell { width: min(100% - 38px, 560px); }
  .site-header { height: 67px; }
  .game-tag { display: none; }
  .board-section { padding: 38px 1% 41px; }
  .board-heading h1 { font-size: clamp(38px, 10vw, 55px); }
  .mobile-break { display: initial; }
  .board-intro { max-width: 420px; font-size: 11px; }
  .board-layout { grid-template-columns: 1fr; gap: 11px; }
  .mission-panel { padding: 19px 18px 14px; }
  .board-side { min-height: 185px; padding: 18px 20px; }
  .side-quote { margin-bottom: 14px; font-size: 20px; }
  .quick-check { margin: 4px 0; }
  .fun-section { padding: 7px 1% 37px; }
  .fun-layout { grid-template-columns: 1fr 1fr; gap: 10px; }
  .drop-card { min-height: 218px; padding: 16px 14px; }
  .action-button { padding-inline: 8px; font-size: 9px; }
  .site-footer { min-height: 79px; flex-wrap: wrap; padding-block: 13px; }
  .site-footer p { order: 3; width: 100%; }
}
@media (max-width: 390px) {
  .site-shell { width: calc(100% - 28px); }
  .server-status { font-size: 8px; }
  .mission-top h2 { font-size: 18px; }
  .mission-panel { padding-inline: 14px; }
  .mission-count { font-size: 7px; }
  .mission-bottom { align-items: flex-start; flex-direction: column; gap: 4px; }
  .fun-layout { grid-template-columns: 1fr; }
  .drop-card { min-height: 185px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Sealed message UI */
.whisper-section { padding: 20px 4.4% 50px; border-top: 1px solid var(--line); }
.whisper-heading { max-width: 660px; margin-bottom: 20px; }
.whisper-heading .eyebrow { margin-bottom: 9px; }
.whisper-heading h2 { margin: 0 0 8px; font-size: 25px; letter-spacing: -.03em; }
.whisper-heading h2 span { color: var(--violet-hi); }
.whisper-heading > p:last-child { margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.8; }
.whisper-layout { display: grid; grid-template-columns: minmax(245px, .86fr) minmax(0, 1.14fr); gap: 13px; align-items: start; }
.whisper-compose, .whisper-inbox { min-width: 0; padding: 18px; border: 1px solid rgb(172 184 216 / 14%); background: linear-gradient(145deg, rgb(25 29 48 / 94%), rgb(16 18 30 / 96%)); }
.compose-head, .inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; color: #e5e9f5; font-size: 12px; font-weight: 750; }
.compose-mark { color: #858ea8; font-family: ui-monospace, monospace; font-size: 7px; letter-spacing: .15em; }
.field-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 11px 0 6px; color: #b6bed1; font-size: 9px; }
.field-label span { color: #767f98; font-size: 8px; }
.whisper-compose select, .whisper-compose textarea, .whisper-compose input { width: 100%; border: 1px solid rgb(167 180 214 / 17%); border-radius: 1px; background: rgb(5 8 17 / 46%); color: var(--ink); font: inherit; font-size: 10px; }
.whisper-compose select, .whisper-compose input { height: 36px; padding: 0 10px; }
.whisper-compose textarea { min-height: 91px; padding: 9px 10px; resize: vertical; line-height: 1.65; }
.whisper-compose select:focus, .whisper-compose textarea:focus, .whisper-compose input:focus, .unlock-form input:focus { border-color: rgb(71 201 238 / 65%); outline: none; box-shadow: 0 0 0 3px rgb(71 201 238 / 8%); }
.whisper-compose input::placeholder, .whisper-compose textarea::placeholder, .unlock-form input::placeholder { color: #707991; }
.send-whisper { min-height: 37px; margin-top: 13px; padding: 0 12px; border: 1px solid rgb(179 91 255 / 46%); background: rgb(179 91 255 / 14%); color: #eee3fa; cursor: pointer; font-size: 9px; font-weight: 750; transition: background .15s ease, transform .15s ease; }
.send-whisper:hover { background: rgb(179 91 255 / 25%); transform: translateY(-1px); }
.send-whisper:disabled { cursor: progress; opacity: .6; }
.send-whisper span { margin-right: 7px; color: var(--blue); }
.compose-foot { margin: 10px 0 0; color: #838ba1; font-size: 8px; line-height: 1.7; }
.whisper-compose-status { min-height: 16px; margin: 7px 0 0; color: #9edbed; font-size: 8px; line-height: 1.65; }
.inbox-head { align-items: flex-start; margin-bottom: 5px; }
.inbox-head h3 { margin: 5px 0 0; font-size: 15px; }
.inbox-count { color: #90d3e5; font-family: ui-monospace, monospace; font-size: 8px; }
.inbox-intro { margin: 0 0 12px; color: #868fa5; font-size: 8px; line-height: 1.7; }
.whisper-list { max-height: 420px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.whisper-item { padding: 12px; border: 1px solid rgb(179 91 255 / 15%); background: rgb(7 9 17 / 43%); }
.whisper-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.whisper-who { color: #d7c4ec; font-size: 9px; font-weight: 750; }
.whisper-date { color: #727c94; font-family: ui-monospace, monospace; font-size: 7px; }
.delete-whisper { margin-left: auto; padding: 4px 0 4px 8px; border: 0; background: none; color: #777f93; cursor: pointer; font-size: 8px; }
.delete-whisper:hover { color: #ff8795; }
.locked-line { position: relative; margin: 0 0 9px; padding-left: 16px; color: #9aa3b7; font-size: 9px; }
.locked-line::before { position: absolute; left: 0; color: var(--violet-hi); content: "▣"; }
.unlock-form { display: flex; gap: 7px; }
.unlock-form input { min-width: 0; height: 33px; flex: 1; padding: 0 9px; border: 1px solid rgb(167 180 214 / 15%); background: rgb(5 8 17 / 65%); color: var(--ink); font-size: 9px; }
.unlock-form button, .relock-button { min-width: 53px; padding: 0 9px; border: 1px solid rgb(71 201 238 / 28%); background: rgb(71 201 238 / 9%); color: #a4e4f2; cursor: pointer; font-size: 9px; }
.unlock-form button:hover, .relock-button:hover { background: rgb(71 201 238 / 17%); }
.unlock-form button:disabled { opacity: .6; }
.plaintext-message { margin: 9px 0 0; padding: 11px; border-left: 2px solid var(--violet); background: rgb(179 91 255 / 8%); color: #f2eaf9; font-size: 10px; line-height: 1.8; overflow-wrap: anywhere; }
.plaintext-message p { margin: 0; white-space: pre-wrap; }
.relock-button { min-height: 26px; margin-top: 7px; border-color: rgb(179 91 255 / 28%); background: rgb(179 91 255 / 8%); color: #d9b5fb; }
.unlock-feedback { min-height: 13px; margin: 6px 0 0; color: #8f98ae; font-size: 7px; line-height: 1.6; }
.whisper-empty { padding: 30px 8px; color: #777f95; font-size: 9px; line-height: 1.7; text-align: center; }
.inbox-status { min-height: 13px; margin: 8px 0 0; color: #8591a9; font-size: 8px; }
.pair-signal { display: flex; align-items: center; gap: 8px; margin-top: 13px; color: #777f98; font-family: ui-monospace, monospace; font-size: 7px; letter-spacing: .07em; }
.pair-signal b { color: #b7c2d9; font-family: var(--font); font-size: 8px; font-weight: 650; }
.pair-signal i { padding: 4px 6px; border: 1px solid rgb(71 201 238 / 19%); color: #8dbfd0; font-size: 7px; font-style: normal; }

@media (max-width: 720px) {
  .whisper-section { padding: 9px 1% 37px; }
  .whisper-layout { grid-template-columns: 1fr; gap: 10px; }
  .whisper-compose, .whisper-inbox { padding: 15px; }
  .whisper-list { max-height: 350px; }
  .pair-signal { margin-top: 10px; gap: 6px; }
}

[hidden] { display: none !important; }



.quest-section { padding: 14px 4.4% 48px; border-top: 1px solid var(--line); }
.quest-heading { max-width: 680px; margin-bottom: 17px; }
.quest-heading .eyebrow { margin-bottom: 9px; }
.quest-heading h2 { margin: 0 0 7px; font-size: 23px; letter-spacing: -.02em; }
.quest-heading h2 span { color: var(--blue); }
.quest-heading > p:last-child { margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.8; }
.quest-card { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 17px; padding: 20px 22px; border: 1px solid rgb(179 91 255 / 19%); background: radial-gradient(ellipse at 7% 50%, rgb(71 201 238 / 8%), transparent 37%), linear-gradient(135deg, rgb(25 29 48 / 97%), rgb(16 18 30 / 97%)); }
.quest-symbol { width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid rgb(71 201 238 / 30%); color: var(--blue); font-size: 24px; }
.quest-copy { min-width: 0; }
.quest-label { display: flex; justify-content: space-between; gap: 12px; color: #c7d4df; font-family: ui-monospace, monospace; font-size: 8px; letter-spacing: .09em; }
.quest-label span { color: #9b82b7; white-space: nowrap; }
.quest-copy > p:not(.quest-feedback) { margin: 10px 0 0; color: #e4e8f3; font-size: 13px; font-weight: 650; line-height: 1.7; }
.quest-feedback { min-height: 14px; margin: 4px 0 0; color: #98ccda; font-size: 8px; }
.quest-actions { display: flex; flex-direction: column; gap: 7px; }
.quest-actions .action-button { white-space: nowrap; }
.quest-storage-note { margin: 8px 0 0; color: #69768a; font-size: 8px; }

@media (max-width: 720px) {
  .quest-section { padding: 9px 1% 37px; }
  .quest-card { grid-template-columns: 37px minmax(0, 1fr); gap: 12px; padding: 16px 14px; }
  .quest-symbol { width: 35px; height: 35px; font-size: 19px; }
  .quest-actions { grid-column: 2; flex-direction: row; flex-wrap: wrap; }
  .quest-label { font-size: 7px; }
  .quest-copy > p:not(.quest-feedback) { font-size: 11px; }
}

/* Birthday gate and immediate screen lock */
.lock-site-button { min-height: 30px; padding: 0 10px; border: 1px solid rgb(71 201 238 / 25%); background: rgb(71 201 238 / 7%); color: #b5e8f2; cursor: pointer; font-size: 9px; letter-spacing: .04em; }
.lock-site-button:hover { border-color: var(--blue); background: rgb(71 201 238 / 14%); }
.is-locked .site-shell { filter: blur(9px); opacity: .62; pointer-events: none; user-select: none; }
.site-lock-screen { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 22px; background: rgb(5 7 14 / 62%); backdrop-filter: blur(5px); }
.unlock-card { position: relative; width: min(100%, 410px); padding: 31px; border: 1px solid rgb(179 91 255 / 34%); background: linear-gradient(145deg, #191d30, #10121e); box-shadow: 0 28px 100px rgb(0 0 0 / 50%); }
.unlock-card::before { position: absolute; inset: 0 auto auto 0; width: 42px; height: 2px; background: var(--blue); content: ""; }
.unlock-mark { display: grid; width: 37px; height: 37px; margin-bottom: 18px; place-items: center; border: 1px solid rgb(71 201 238 / 40%); color: var(--blue); font-size: 21px; }
.unlock-card .eyebrow { margin-bottom: 10px; font-size: 8px; }
.unlock-card h2 { margin: 0 0 9px; font-size: 25px; letter-spacing: -.03em; }
.unlock-card h2 span { color: var(--blue); }
.unlock-intro { margin: 0 0 14px; color: #a5aec2; font-size: 10px; line-height: 1.7; }
.unlock-card input { width: 100%; height: 43px; padding: 0 13px; border: 1px solid rgb(167 180 214 / 23%); background: rgb(5 8 17 / 65%); color: var(--ink); font-family: ui-monospace, monospace; font-size: 14px; letter-spacing: .12em; }
.unlock-card input:focus { border-color: rgb(71 201 238 / 70%); outline: none; box-shadow: 0 0 0 3px rgb(71 201 238 / 9%); }
.unlock-submit { width: 100%; min-height: 41px; margin-top: 10px; border: 1px solid rgb(179 91 255 / 53%); background: rgb(179 91 255 / 18%); color: #f2e8fc; cursor: pointer; font-size: 10px; font-weight: 750; }
.unlock-submit:hover { background: rgb(179 91 255 / 29%); }
.unlock-submit:disabled { opacity: .6; cursor: wait; }
.unlock-error { min-height: 16px; margin: 8px 0 0; color: #ff9aa5; font-size: 9px; }
.unlock-footnote { margin: 8px 0 0; color: #737d93; font-size: 8px; line-height: 1.7; }

/* Shared points, badges and reward catalog */
.progress-section, .reward-section { padding: 19px 4.4% 48px; border-top: 1px solid var(--line); }
.progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.progress-heading .eyebrow, .reward-heading .eyebrow { margin-bottom: 8px; }
.progress-heading h2, .reward-heading h2 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.progress-heading h2 span, .reward-heading h2 span { color: var(--violet-hi); }
.point-total { display: flex; align-items: baseline; gap: 8px; color: #d9c2f1; }
.point-total span { color: var(--blue); font-family: ui-monospace, monospace; font-size: 34px; font-weight: 800; }
.point-total small { color: #9da6bb; font-size: 9px; }
.progress-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 13px; padding: 10px 12px; border: 1px solid rgb(71 201 238 / 14%); background: rgb(71 201 238 / 4%); color: #9dbbc7; font-family: ui-monospace, monospace; font-size: 8px; }
.badge-panel, .history-panel { margin-top: 10px; padding: 15px; border: 1px solid rgb(172 184 216 / 12%); background: rgb(18 21 35 / 80%); }
.subpanel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.subpanel-heading h3 { margin: 0; color: #dbe1ef; font-size: 12px; }
.subpanel-heading > span { color: #78849c; font-family: ui-monospace, monospace; font-size: 8px; }
.badge-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.badge-item { min-width: min(100%, 190px); display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid rgb(179 91 255 / 23%); background: rgb(179 91 255 / 7%); }
.badge-icon { width: 25px; height: 25px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid rgb(179 91 255 / 35%); color: var(--violet-hi); }
.badge-copy { display: flex; flex-direction: column; gap: 3px; }
.badge-copy b { color: #e4d4f3; font-size: 9px; }
.badge-copy small { color: #8f98ad; font-size: 7px; }
.badge-empty, .history-empty { padding: 10px 2px; color: #758097; font-size: 9px; list-style: none; }
.activity-history, .redemption-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.history-item { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgb(172 184 216 / 8%); color: #c6cede; font-size: 9px; }
.history-item:last-child { border-bottom: 0; }
.history-item small { flex: 0 0 auto; color: #7f8ba3; font-family: ui-monospace, monospace; font-size: 7px; }
.reward-heading { max-width: 680px; margin-bottom: 15px; }
.reward-heading > p:last-child { margin: 8px 0 0; color: var(--ink-soft); font-size: 9px; line-height: 1.8; }
.reward-add-form { display: flex; gap: 8px; margin-bottom: 12px; }
.reward-add-form input { min-width: 0; height: 38px; padding: 0 10px; border: 1px solid rgb(167 180 214 / 17%); background: rgb(5 8 17 / 46%); color: var(--ink); font-size: 9px; }
.reward-add-form input:first-of-type { flex: 1; }
.reward-add-form input[type="number"] { width: 78px; }
.reward-add-form button { white-space: nowrap; }
.reward-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
.reward-item { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px; border: 1px solid rgb(179 91 255 / 17%); background: linear-gradient(145deg, rgb(25 29 48 / 94%), rgb(16 18 30 / 96%)); }
.reward-copy { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.reward-copy b { color: #e5e8f3; font-size: 10px; line-height: 1.6; }
.reward-copy small { color: #858ea4; font-size: 8px; line-height: 1.6; }
.reward-cost { color: var(--blue); font-family: ui-monospace, monospace; font-size: 10px; white-space: nowrap; }
.reward-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reward-actions .action-button { min-height: 31px; }
.reward-actions .action-button:disabled { opacity: .42; cursor: not-allowed; }
.reward-remove { padding: 5px 8px; border: 0; background: transparent; color: #79839b; cursor: pointer; font-size: 8px; }
.reward-remove:hover { color: #ff8c99; }
.redemption-heading { margin-top: 18px; }
.reward-feedback { min-height: 15px; margin: 8px 0 0; color: #9edbed; font-size: 8px; }

@media (max-width: 720px) {
  .lock-site-button { padding-inline: 7px; font-size: 8px; }
  .site-lock-screen { padding: 16px; }
  .unlock-card { padding: 24px 20px; }
  .progress-section, .reward-section { padding: 13px 1% 37px; }
  .reward-list { grid-template-columns: 1fr; }
  .reward-add-form { flex-wrap: wrap; }
  .reward-add-form input:first-of-type { flex-basis: 100%; }
  .reward-add-form button { flex: 1; }
  .history-item { align-items: flex-start; flex-direction: column; gap: 4px; }
}


/* Refined typography: use installed system fonts only, with legible microcopy. */
body { font-family: var(--font); font-size: 15px; line-height: 1.62; }
.game-tag, .server-status { font-size: 10px; }
.eyebrow { font-family: var(--font); font-size: 10px; letter-spacing: .12em; }
.panel-kicker, .side-label, .mission-count { font-size: 9.5px; }
.brand-name { font-size: 14px; letter-spacing: .06em; }
.board-intro { font-size: 13px; }
.todo-label { font-size: 13px; }
.data-note, .last-sync, .drop-label, .drop-foot { font-family: var(--font); font-size: 10px; letter-spacing: .015em; }
.quick-check { font-size: 12px; }
.quick-check small { font-size: 10px; }
.drop-text { font-size: 16px; line-height: 1.72; }
.action-button { font-size: 11px; }
.site-footer p, .site-footer a { font-size: 10px; }
.quest-heading > p:last-child { font-size: 12px; }
.quest-label { font-family: var(--font); font-size: 10px; letter-spacing: .02em; }
.quest-copy > p:not(.quest-feedback) { font-size: 14px; }
.quest-feedback, .quest-storage-note { font-size: 10px; }
.compose-head, .inbox-head { font-size: 13px; }
.compose-mark { font-size: 9px; }
.field-label { font-size: 11px; }
.field-label span { font-size: 9.5px; }
.whisper-compose select, .whisper-compose textarea, .whisper-compose input { font-size: 12px; }
.send-whisper { font-size: 11px; }
.compose-foot, .whisper-compose-status, .inbox-intro, .inbox-status { font-size: 10px; }
.inbox-head h3 { font-size: 16px; }
.inbox-count { font-size: 10px; }
.whisper-who { font-size: 11px; }
.whisper-date, .delete-whisper, .unlock-feedback { font-size: 9px; }
.locked-line { font-size: 11px; }
.unlock-form input, .unlock-form button, .relock-button { font-size: 11px; }
.plaintext-message { font-size: 12px; }
.whisper-empty { font-size: 10px; }
.pair-signal { font-size: 9px; }
.pair-signal b { font-size: 10px; }
.pair-signal i { font-size: 9px; }
.quest-heading > p:last-child, .reward-heading > p:last-child { line-height: 1.85; }
.lock-site-button { font-family: var(--font); font-size: 10px; }
.unlock-card .eyebrow { font-size: 9.5px; }
.unlock-intro { font-size: 12px; }
.unlock-submit { font-size: 11px; }
.unlock-error, .unlock-footnote { font-size: 10px; }
.progress-summary { font-family: var(--font); font-size: 10px; line-height: 1.6; }
.point-total small { font-size: 10px; }
.subpanel-heading > span { font-family: var(--font); font-size: 9.5px; }
.badge-copy b { font-size: 11px; }
.badge-copy small, .badge-empty, .history-empty { font-size: 10px; }
.history-item { font-size: 11px; line-height: 1.6; }
.history-item small { font-size: 9px; }
.reward-heading > p:last-child { font-size: 11px; }
.reward-add-form input { font-size: 11px; }
.reward-copy b { font-size: 11px; }
.reward-copy small { font-size: 10px; }
.reward-cost { font-size: 11px; }
.reward-remove, .reward-feedback { font-size: 10px; }

/* Unlock choreography and gentle interaction feedback. */
.unlock-card { transform-origin: 50% 55%; will-change: transform, opacity; }
.site-lock-screen:not(.is-unlocking) .unlock-card { animation: unlockCardIn .38s cubic-bezier(.2,.75,.25,1) both; }
.site-lock-screen.is-validating .unlock-mark { animation: unlockMarkTurn .72s cubic-bezier(.4,0,.2,1); }
.site-lock-screen.is-validating .unlock-card::before { animation: unlockLineGlow .85s ease-in-out infinite alternate; }
.site-lock-screen.is-unlocking { pointer-events: none; animation: unlockScreen .48s cubic-bezier(.22,.7,.18,1) forwards; }
.site-lock-screen.is-unlocking .unlock-card { animation: unlockCardOut .42s cubic-bezier(.4,0,.7,.35) forwards; }
.site-lock-screen:not(.is-unlocking) .unlock-card.is-shaking { animation: unlockShake .36s ease-in-out; }
@keyframes unlockCardIn {
  from { opacity: 0; transform: translateY(13px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes unlockScreen {
  to { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); visibility: hidden; }
}
@keyframes unlockCardOut {
  to { opacity: 0; transform: translateY(-9px) scale(1.025); }
}
@keyframes unlockMarkTurn {
  0% { transform: rotate(0) scale(1); }
  55% { transform: rotate(135deg) scale(1.12); }
  100% { transform: rotate(180deg) scale(1); }
}
@keyframes unlockLineGlow {
  from { box-shadow: 0 0 0 rgb(71 201 238 / 0%); }
  to { box-shadow: 0 0 15px rgb(71 201 238 / 58%); }
}
@keyframes unlockShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
@keyframes sectionLift {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pointsPop {
  0% { transform: scale(1); text-shadow: 0 0 0 rgb(71 201 238 / 0%); }
  42% { transform: scale(1.2); text-shadow: 0 0 20px rgb(71 201 238 / 62%); }
  100% { transform: scale(1); text-shadow: 0 0 0 rgb(71 201 238 / 0%); }
}
.points-pop { transform-origin: center bottom; animation: pointsPop .55s cubic-bezier(.18,.75,.3,1); }
.badge-item { animation: sectionLift .32s ease-out both; }
.reward-item { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.reward-item:hover { transform: translateY(-2px); border-color: rgb(179 91 255 / 36%); box-shadow: 0 9px 25px rgb(0 0 0 / 16%); }
.action-button:active, .lock-site-button:active, .unlock-submit:active { transform: translateY(1px) scale(.985); }

body.is-revealing .board-section { animation: sectionLift .42s .02s both; }
body.is-revealing .fun-section { animation: sectionLift .42s .09s both; }
body.is-revealing .quest-section { animation: sectionLift .42s .16s both; }
body.is-revealing .reward-section { animation: sectionLift .42s .23s both; }
body.is-revealing .progress-section { animation: sectionLift .42s .30s both; }
body.is-revealing .whisper-section { animation: sectionLift .42s .37s both; }
body.is-revealing .site-footer { animation: sectionLift .42s .44s both; }

@media (max-width: 520px) {
  .site-shell { width: calc(100% - 32px); }
  .site-header { min-height: 64px; height: auto; gap: 8px; }
  .header-right { gap: 8px; }
  .server-status { font-size: 9px; }
  .lock-site-button { min-height: 34px; padding-inline: 8px; font-size: 10px; }
  .board-section { padding-top: 30px; }
  .eyebrow { font-size: 9.5px; letter-spacing: .09em; }
  .fun-layout { grid-template-columns: 1fr; gap: 11px; }
  .drop-card { min-height: 185px; padding: 18px; }
  .drop-text { font-size: 16px; }
  .quest-label { flex-wrap: wrap; row-gap: 4px; font-size: 10px; }
  .quest-label span { white-space: normal; }
  .quest-copy > p:not(.quest-feedback) { font-size: 13px; }
  .quest-actions .action-button { white-space: normal; }
  .progress-heading { align-items: flex-start; }
  .point-total { flex-direction: column; align-items: flex-end; gap: 0; }
  .point-total span { font-size: 30px; }
  .progress-summary { font-size: 10px; }
  .reward-list { grid-template-columns: 1fr; }
  .reward-add-form { display: grid; grid-template-columns: minmax(0, 1fr) 78px; }
  .reward-add-form input:first-of-type { grid-column: 1 / -1; width: 100%; }
  .reward-add-form input[type="number"] { width: 100%; }
  .reward-add-form button { min-height: 38px; white-space: normal; }
  .unlock-card { width: min(100%, 410px); padding: 25px 20px; }
  .unlock-card h2 { font-size: 23px; }
  .whisper-section, .progress-section, .reward-section, .quest-section { padding-left: 1%; padding-right: 1%; }
  .history-item { align-items: flex-start; flex-direction: column; gap: 3px; }
}

@media (max-width: 360px) {
  .site-shell { width: calc(100% - 24px); }
  .brand-name { font-size: 13px; }
  .header-right { gap: 5px; }
  .server-status { font-size: 8px; }
  .mission-top { gap: 8px; }
  .mission-count { padding: 5px 6px; font-size: 8px; }
  .quest-card { grid-template-columns: 30px minmax(0, 1fr); gap: 9px; padding: 14px 11px; }
  .quest-symbol { width: 29px; height: 29px; font-size: 17px; }
  .quest-actions .action-button { min-height: 35px; padding-inline: 8px; font-size: 10px; }
  .progress-summary { align-items: flex-start; flex-direction: column; }
  .unlock-card { padding: 22px 17px; }
}


/* Keep the shared total beside the reward shop title. */
.reward-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.reward-heading-row .reward-heading { min-width: 0; flex: 1; margin-bottom: 0; }
.point-total.reward-total { flex: 0 0 auto; padding: 8px 12px; border: 1px solid rgb(71 201 238 / 17%); background: linear-gradient(135deg, rgb(71 201 238 / 6%), rgb(179 91 255 / 6%)); text-align: right; }
.point-total.reward-total small { color: #aeb8ca; }

@media (max-width: 520px) {
  .reward-heading-row { align-items: flex-start; gap: 8px; margin-bottom: 13px; }
  .reward-heading-row .reward-heading { max-width: none; }
  .reward-heading-row .reward-heading .eyebrow { gap: 6px; font-size: 9px; letter-spacing: .07em; }
  .point-total.reward-total { gap: 0; padding: 7px 8px; }
  .point-total.reward-total span { font-size: 28px; }
  .point-total.reward-total small { max-width: 68px; font-size: 9px; line-height: 1.4; }
}

@media (max-width: 360px) {
  .reward-heading-row { gap: 6px; }
  .point-total.reward-total { padding: 6px 7px; }
  .point-total.reward-total span { font-size: 25px; }
  .point-total.reward-total small { font-size: 8.5px; }
}


.copyright-line { margin: 0; padding: 0 12px 18px; color: #68718a; font-size: 10px; letter-spacing: .035em; line-height: 1.6; text-align: center; overflow-wrap: anywhere; }