:root {
  color-scheme: light;
  --canvas: #eeeDE7;
  --canvas-deep: #e8e5dc;
  --surface: rgba(250, 249, 245, 0.88);
  --surface-solid: #faf9f5;
  --surface-raised: #fffefa;
  --surface-muted: #f3f1ea;
  --ink: #1f2b27;
  --ink-soft: #59645f;
  --ink-faint: #89908c;
  --line: rgba(42, 54, 49, 0.1);
  --line-strong: rgba(42, 54, 49, 0.17);
  --sage: #48695c;
  --sage-strong: #355448;
  --sage-pale: #dce7dd;
  --sage-wash: #edf3ed;
  --moss: #738f75;
  --peach: #e9a478;
  --peach-pale: #f5e1d3;
  --butter: #e6c96f;
  --butter-pale: #f4edcf;
  --blue: #7897a8;
  --blue-pale: #dfe9ed;
  --red: #c46f68;
  --red-pale: #f3dfdc;
  --adventure-glow: rgba(118, 157, 129, .12);
  --shadow-sm: 0 1px 2px rgba(31, 43, 39, 0.04), 0 4px 16px rgba(31, 43, 39, 0.03);
  --shadow-md: 0 18px 50px rgba(31, 43, 39, 0.11), 0 2px 12px rgba(31, 43, 39, 0.05);
  --shadow-lg: 0 28px 80px rgba(23, 37, 31, 0.2), 0 5px 20px rgba(23, 37, 31, 0.08);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --sidebar-width: 264px;
  --ease: cubic-bezier(.22, .8, .32, 1);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #131a17;
  --canvas-deep: #0e1512;
  --surface: rgba(24, 32, 28, 0.9);
  --surface-solid: #18201c;
  --surface-raised: #202924;
  --surface-muted: #232d28;
  --ink: #eff3ed;
  --ink-soft: #afb9b3;
  --ink-faint: #7e8a84;
  --line: rgba(234, 241, 236, 0.09);
  --line-strong: rgba(234, 241, 236, 0.16);
  --sage: #86aa98;
  --sage-strong: #a4c6b5;
  --sage-pale: #2c4438;
  --sage-wash: #213229;
  --moss: #91aa8f;
  --peach: #e2a17a;
  --peach-pale: #4a3428;
  --butter: #ddc468;
  --butter-pale: #433d25;
  --blue: #83a5b6;
  --blue-pale: #2a3d45;
  --red: #dc8981;
  --red-pale: #482d2b;
  --adventure-glow: rgba(108, 153, 130, .12);
  --shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.14);
  --shadow-md: 0 20px 50px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.42);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: radial-gradient(circle at 72% 7%, var(--adventure-glow), transparent min(42vw, 520px)), var(--canvas);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

html[data-adventure-time="dawn"] { --adventure-glow: rgba(238, 168, 116, .16); }
html[data-adventure-time="day"] { --adventure-glow: rgba(106, 158, 124, .13); }
html[data-adventure-time="dusk"] { --adventure-glow: rgba(219, 145, 93, .16); }
html[data-adventure-time="night"] { --adventure-glow: rgba(92, 120, 169, .16); }

button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, select { cursor: pointer; }
button { border: 0; }
input, textarea, select { color: var(--ink); }
svg { display: block; }

::selection { background: var(--sage-pale); color: var(--sage-strong); }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sage) 38%, transparent);
  outline-offset: 3px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 999;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--surface-solid);
  transform: translateY(-160%);
  transition: transform .2s;
}
.skip-link:focus { transform: translateY(0); }
.connectivity-banner { position:fixed;z-index:480;top:max(10px,env(safe-area-inset-top));left:50%;width:min(520px,calc(100vw - 28px));padding:9px 14px;border:1px solid rgba(255,255,255,.16);border-radius:11px;background:#8b4d35;color:#fffaf0;font-size:11px;font-weight:750;line-height:1.45;text-align:center;box-shadow:0 8px 28px rgba(37,22,15,.25);transform:translateX(-50%); }

.launch-screen { position:fixed;z-index:500;inset:0;display:grid;place-items:center;overflow:hidden;background:#10261f;color:#f7f2df;transition:opacity .26s ease,visibility .26s ease; }
.launch-screen[hidden] { display:none; }
.launch-screen.complete { opacity:0;visibility:hidden;pointer-events:none; }
.launch-scene { position:absolute;inset:0;background:url("assets/world-layers-strip.png?v=74") 0 center / 400% 100% no-repeat;image-rendering:pixelated;filter:saturate(.82) brightness(.58);transform:scale(1.03); }
.launch-scene::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,24,19,.2),rgba(9,24,19,.56) 58%,rgba(9,24,19,.92)); }
.launch-light { position:absolute;inset:0;background:radial-gradient(circle at 50% 34%,rgba(246,208,106,.27),transparent 27%);animation:launch-glow 2s ease-in-out infinite; }
.launch-hero { position:absolute;z-index:2;bottom:9%;left:calc(50% - 180px);width:118px;height:155px;background:url("assets/pixel-hero-male-strip.png?v=74") 0 center / 400% 100% no-repeat;image-rendering:pixelated;filter:drop-shadow(0 13px 8px rgba(0,0,0,.48));animation:launch-hero 1.5s steps(2,end) infinite; }
.launch-content { position:relative;z-index:3;display:grid;justify-items:center;width:min(430px,calc(100vw - 40px));padding:28px 30px 23px;border:1px solid rgba(246,222,152,.25);border-radius:24px;background:rgba(13,35,28,.79);box-shadow:0 24px 70px rgba(0,0,0,.34),inset 0 0 42px rgba(221,193,104,.06);backdrop-filter:blur(8px);text-align:center; }
.launch-content > img { width:72px;height:72px;border-radius:19px;box-shadow:0 10px 24px rgba(0,0,0,.32); }
.launch-content > span { margin-top:16px;color:#e4c870;font-size:11px;font-weight:900;letter-spacing:.2em; }
.launch-content h1 { margin:5px 0 1px;font-family:ui-serif,"Yu Mincho",serif;font-size:28px;font-weight:650;letter-spacing:.035em; }
.launch-content p { margin:0;color:rgba(245,241,223,.68);font-size:14px; }
.launch-progress { width:100%;height:7px;margin-top:24px;overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(0,0,0,.24); }
.launch-progress i { display:block;width:5%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7eaf91,#f0cf70);box-shadow:0 0 12px rgba(240,207,112,.44);transition:width .32s var(--ease); }
.launch-content > small { min-height:19px;margin-top:8px;color:rgba(245,241,223,.7);font-size:12px; }
.launch-content > button { margin-top:11px;padding:6px 12px;background:transparent;color:rgba(245,241,223,.72);font-size:12px;text-decoration:underline;text-underline-offset:3px; }
.launch-screen.brief .launch-content { animation:none; }
@keyframes launch-glow { 50% { opacity:.62;transform:scale(1.04); } }
@keyframes launch-hero { 50% { transform:translateY(-3px); } }

.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ambient {
  position: fixed;
  z-index: -1;
  border-radius: 999px;
  filter: blur(2px);
  pointer-events: none;
}
.ambient-one { width: 460px; height: 460px; right: -180px; top: -160px; background: color-mix(in srgb, var(--sage-pale) 48%, transparent); }
.ambient-two { width: 340px; height: 340px; left: 12%; bottom: -220px; background: color-mix(in srgb, var(--peach-pale) 55%, transparent); }

.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  padding: 28px 20px 18px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-solid) 87%, transparent);
  backdrop-filter: blur(24px) saturate(1.15);
  overflow-y: auto;
}

.brand-row { display: flex; align-items: center; justify-content: space-between; padding: 0 5px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; padding: 2px 0; background: none; }
.brand-mark { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--butter) 26%, transparent); border-radius: 11px; background: var(--sage-strong); box-shadow: 0 7px 15px color-mix(in srgb, var(--sage) 20%, transparent); }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand-name { display: grid; min-width: 0; gap: 1px; text-align: left; }
.brand-name strong { color: var(--ink); font-size: 12px; font-weight: 850; letter-spacing: .015em; line-height: 1.35; white-space: nowrap; }
.brand-name small { color: var(--ink-faint); font-size: 9px; font-weight: 650; letter-spacing: .015em; line-height: 1.35; white-space: nowrap; }
.test-build-badge { display:inline-block;margin-left:4px;padding:1px 4px;border-radius:999px;background:var(--butter-pale);color:#94701a;font:850 7px ui-monospace,monospace;letter-spacing:.05em;vertical-align:1px; }
.sidebar-close { display: none !important; }

.quick-add-trigger {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 30px 0 20px;
  padding: 10px 11px 10px 9px;
  border: 1px solid color-mix(in srgb, var(--sage) 18%, var(--line));
  border-radius: 13px;
  background: var(--sage-wash);
  color: var(--sage-strong);
  text-align: left;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .2s var(--ease), background .2s, box-shadow .2s;
}
.quick-add-trigger:hover { transform: translateY(-1px); background: var(--sage-pale); box-shadow: var(--shadow-sm); }
.quick-add-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--sage-strong); color: var(--surface-solid); }
.quick-add-icon .icon { width: 16px; height: 16px; stroke-width: 2; }
kbd { min-width: 22px; padding: 2px 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; background: color-mix(in srgb, var(--surface-raised) 72%, transparent); color: var(--ink-faint); font-family: inherit; font-size: 10px; line-height: 1.5; text-align: center; box-shadow: none; }

.nav-stack { display: grid; gap: 4px; }
.nav-item {
  display: grid;
  grid-template-columns: 23px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 11px;
  border-radius: 11px;
  background: transparent;
  color: var(--ink-soft);
  text-align: left;
  font-weight: 600;
  transition: color .2s, background .2s, transform .2s;
}
.nav-item:hover { color: var(--ink); background: var(--surface-muted); transform: translateX(2px); }
.nav-item.active { color: var(--sage-strong); background: var(--sage-wash); }
.nav-item .icon { width: 18px; height: 18px; }
.nav-count { min-width: 20px; padding: 1px 6px; border-radius: 999px; color: var(--ink-faint); font-size: 11px; text-align: center; }
.nav-item.active .nav-count { background: color-mix(in srgb, var(--sage) 12%, transparent); color: var(--sage-strong); }

.sidebar-section { margin-top: 29px; }
.section-label-row { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 8px; }
.section-label { color: var(--ink-faint); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.tiny-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: transparent; color: var(--ink-faint); }
.tiny-icon:hover { background: var(--surface-muted); color: var(--ink); }
.tiny-icon .icon { width: 14px; height: 14px; }
.project-list { display: grid; gap: 2px; }
.project-item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 11px;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  text-align: left;
  transition: background .2s, color .2s;
}
.project-item:hover, .project-item.active { background: var(--surface-muted); color: var(--ink); }
.project-dot { width: 8px; height: 8px; border-radius: 3px; background: var(--project-color); transform: rotate(2deg); }
.project-count { color: var(--ink-faint); font-size: 11px; }
.sidebar-spacer { flex: 1; min-height: 20px; }
.sidebar-tools { display:grid; gap:3px; margin-top:16px; }
.sidebar-tools .section-label { margin-bottom:4px; }
.sidebar-tools button { display:flex; align-items:center; gap:10px; width:100%; min-height:38px; padding:8px 10px; border-radius:10px; background:transparent; color:var(--ink-soft); text-align:left; }
.sidebar-tools button:hover { background:var(--surface-muted); color:var(--ink); }
.sidebar-tools button .icon { width:17px; height:17px; color:var(--sage); }
.sidebar-tools button span { font-size:12px; font-weight:700; }
.sidebar-tools .sidebar-new-badge { margin-left:auto; padding:3px 6px; border-radius:999px; background:#d6b858; color:#24362d; font-size:8px; font-weight:900; letter-spacing:.05em; }
.sidebar-tools .pass-menu-button { border:1px solid color-mix(in srgb,var(--butter) 28%,var(--line)); background:color-mix(in srgb,var(--butter-pale) 28%,transparent); }
.pass-menu-gem { display:grid; place-items:center; width:17px; color:#b58b27; }
.sidebar-tools .pass-menu-button small { margin-left:auto; color:#a77e20; font-size:10px; font-weight:900; }

.sidebar-insight { display: flex; gap: 11px; width: calc(100% - 4px); margin: 12px 2px 18px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--surface-raised) 55%, transparent); text-align: left; transition: border-color .2s, transform .2s, background .2s; }
.sidebar-insight:hover { border-color: color-mix(in srgb,var(--butter) 55%,var(--line)); background: var(--surface-raised); transform: translateY(-1px); }
.insight-icon { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; background: var(--butter-pale); color: #a1832e; }
.insight-icon .icon { width: 16px; height: 16px; }
.sidebar-insight strong { display: block; margin-bottom: 2px; font-size: 12px; }
.sidebar-insight p { margin: 0; color: var(--ink-faint); font-size: 10.5px; line-height: 1.5; }
.creator-credit { display:grid; justify-items:center; gap:2px; margin:0 4px 12px; color:var(--ink-faint); text-align:center; }
.creator-credit > span { font-size:8px; font-weight:850; letter-spacing:.18em; }
.creator-credit small { font-size:9px; line-height:1.25; }
.creator-signature { color:var(--ink-soft); font-family:"Snell Roundhand","Segoe Script","Brush Script MT",cursive; font-size:1.45em; font-weight:600; letter-spacing:.035em; }
.sidebar-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; border-top: 1px solid var(--line); }
.profile-chip { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; background: none; text-align: left; }
.avatar { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 11px; background: var(--peach-pale); color: #aa6843; font-size: 12px; font-weight: 800; }
.profile-chip strong, .profile-chip small { display: block; overflow: hidden; max-width: 125px; text-overflow: ellipsis; white-space: nowrap; }
.profile-chip strong { font-size: 11.5px; }
.profile-chip small { color: var(--ink-faint); font-size: 9.5px; }
.icon-button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: transparent; color: var(--ink-soft); transition: background .2s, color .2s, transform .2s; }
.icon-button:hover { background: var(--surface-muted); color: var(--ink); transform: translateY(-1px); }
.icon-button.subtle { width: 32px; height: 32px; color: var(--ink-faint); }
.icon-button.subtle .icon { width: 17px; height: 17px; }

.sidebar-scrim { display: none; }

.main { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: flex-end; height: 70px; padding: 0 clamp(24px, 4vw, 62px); border-bottom: 1px solid transparent; background: color-mix(in srgb, var(--canvas) 82%, transparent); backdrop-filter: blur(18px); }
.topbar.scrolled { border-color: var(--line); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.search-trigger { display: flex; align-items: center; gap: 9px; min-width: 190px; padding: 8px 9px 8px 12px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--surface-solid) 68%, transparent); color: var(--ink-faint); text-align: left; box-shadow: var(--shadow-sm); }
.search-trigger .icon { width: 16px; height: 16px; }
.search-trigger span { flex: 1; font-size: 11px; }
.menu-trigger, .mobile-wordmark { display: none; }

.content-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 306px; gap: clamp(36px, 4vw, 70px); max-width: 1190px; margin: 0 auto; padding: 27px clamp(26px, 4vw, 60px) 90px; }
.primary-column { min-width: 0; }
.cloud-nudge { display: grid; grid-template-columns: 38px minmax(0,1fr) auto 28px; align-items: center; gap: 11px; margin: 0 0 13px; padding: 10px 11px; border: 1px solid color-mix(in srgb,var(--sage) 18%,var(--line)); border-radius: 15px; background: linear-gradient(120deg,color-mix(in srgb,var(--sage-wash) 82%,var(--surface-raised)),var(--surface-raised)); box-shadow: var(--shadow-sm); }
.cloud-nudge-icon, .cloud-settings-icon { display: grid; place-items: center; border-radius: 11px; background: var(--sage-pale); color: var(--sage-strong); }
.cloud-nudge-icon { width: 38px; height: 38px; }
.cloud-nudge-icon .icon, .cloud-settings-icon .icon { width: 19px; height: 19px; }
.cloud-nudge strong, .cloud-nudge small { display: block; }
.cloud-nudge strong { font-size: 12px; }
.cloud-nudge small { margin-top: 1px; color: var(--ink-faint); font-size: 9px; }
.cloud-nudge > a { padding: 7px 10px; border-radius: 9px; background: var(--sage-strong); color: var(--surface-solid); font-size: 9px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.cloud-nudge > button { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: transparent; color: var(--ink-faint); }
.cloud-nudge > button:hover { background: var(--surface-muted); color: var(--ink); }
.cloud-nudge > button .icon { width: 14px; height: 14px; }
.hero-row { display: flex; align-items: center; justify-content: space-between; min-height: 126px; gap: 32px; padding: 12px 2px 26px; }
.eyebrow { margin-bottom: 7px; color: var(--sage); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.hero-row h1 { margin: 0; font-family: ui-serif, "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: clamp(29px, 3.2vw, 42px); font-weight: 600; letter-spacing: -.035em; line-height: 1.2; }
.hero-subtitle { margin: 9px 0 0; color: var(--ink-faint); font-size: 12.5px; }
.progress-orbit { position: relative; flex: 0 0 78px; width: 78px; height: 78px; }
.progress-orbit svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-orbit circle { fill: none; stroke-width: 5; }
.orbit-track { stroke: var(--line); }
.orbit-value { stroke: var(--sage); stroke-linecap: round; stroke-dasharray: 232.5; stroke-dashoffset: 232.5; transition: stroke-dashoffset .75s var(--ease); }
.orbit-copy { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.orbit-copy strong { font-family: ui-serif, Georgia, serif; font-size: 16px; line-height: 1.05; }
.orbit-copy span { color: var(--ink-faint); font-size: 8px; letter-spacing: .05em; }

.date-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin-bottom: 40px; padding: 7px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--surface-solid) 54%, transparent); box-shadow: var(--shadow-sm); }

.adventure-card { --time-glow:transparent; overflow: hidden; margin: -18px 0 40px; border: 1px solid rgba(238,226,185,.16); border-radius: 25px; background: #172920; color: #f8f2dc; box-shadow: 0 20px 45px rgba(31,55,42,.17); }
.adventure-card.time-dawn { --time-glow:rgba(239,157,100,.11); }
.adventure-card.time-day { --time-glow:rgba(147,206,158,.08); }
.adventure-card.time-dusk { --time-glow:rgba(223,113,70,.17); }
.adventure-card.time-night { --time-glow:rgba(55,72,132,.25); }
.adventure-top { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px 11px; background: linear-gradient(180deg, rgba(255,255,255,.035), transparent); }
.adventure-brief { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:10px 18px 12px; border-top:1px solid rgba(255,255,255,.055); background:linear-gradient(90deg,rgba(215,190,112,.1),transparent 72%); }
.adventure-brief-copy { flex:1; min-width:0; }
.adventure-brief-copy > span { display:flex; align-items:center; gap:6px; color:#d7c27f; font-size:10px; font-weight:850; letter-spacing:.08em; }
.adventure-brief-copy > span i { width:6px; height:6px; border-radius:2px; background:#d8bf68; box-shadow:0 0 9px rgba(240,210,116,.48); transform:rotate(45deg); }
.adventure-brief-copy > strong { display:-webkit-box; margin-top:2px; overflow:hidden; color:rgba(255,255,255,.77); font-size:12px; font-weight:650; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.daily-route-wrap { display:grid; justify-items:end; gap:5px; flex:0 0 auto; }
.daily-reward-label { color:rgba(255,255,255,.5); font-size:9px; letter-spacing:.04em; }
.daily-reward-label b { color:#ead58d; font-weight:850; }
.daily-route { position:relative; display:grid; grid-template-columns:repeat(3,42px); gap:9px; flex:0 0 auto; }
.daily-route::before { content:""; position:absolute; top:16px; right:21px; left:21px; height:1px; background:rgba(255,255,255,.16); }
.daily-route span { position:relative; z-index:1; display:grid; grid-template-rows:20px auto; place-items:center; width:42px; min-height:42px; padding:4px 2px 3px; border:1px solid rgba(255,255,255,.16); border-radius:10px; background:#1d3027; color:rgba(255,255,255,.44); transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s; }
.daily-route span b { font:850 10px ui-monospace,monospace; }
.daily-route span small { font-size:8px; font-weight:750; letter-spacing:.04em; }
.daily-route span.next { border-color:rgba(224,198,112,.55); color:#ead58d; box-shadow:0 0 0 3px rgba(224,198,112,.07),0 0 13px rgba(224,198,112,.08); animation:daily-route-pulse 2.4s ease-in-out infinite; }
.daily-route span.complete { border-color:#d7bf6d; background:#d7bf6d; color:#203329; }
.daily-route span.complete b { font-size:0; }
.daily-route span.complete b::after { content:"✓"; font-size:10px; }
.adventure-actions { display: flex; align-items: center; gap: 8px; }
.collection-trigger { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.78); font-size: 12px; font-weight: 750; }
.collection-trigger:hover { background: rgba(255,255,255,.12); color: white; }
.collection-trigger:active { transform: translateY(1px); background: rgba(255,255,255,.16); color: white; }
.collection-trigger .icon { width: 13px; height: 13px; }
.adventure-top h2 { display: inline; margin: 0 0 0 9px; font-family: ui-serif, "Yu Mincho", serif; font-size: 17px; }
.quest-kicker { color: #d4bc75; font-size: 11px; font-weight: 900; letter-spacing: .13em; }
.hero-stats { display: flex; align-items: center; gap: 7px; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; font-weight: 800; }
.hero-stats > span { padding: 5px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(255,255,255,.07); }
.potion-count { padding:5px 8px; border:1px solid rgba(135,210,255,.22); border-radius:8px; background:rgba(105,183,223,.1); color:#c9ecff; }
.potion-count:disabled { opacity:.38; }
.coin { display: flex; align-items: center; gap: 5px; }
.stone-count { display: flex; align-items: center; gap: 4px; color: #a9b2af; }
.coin i { width: 9px; height: 9px; border: 2px solid #ffde6e; border-radius: 50%; background: #c89027; box-shadow: inset 0 0 0 1px #ffe49a; }
.battle-stage { position: relative; min-height: 210px; overflow: hidden; border-block: 1px solid rgba(255,255,255,.08); background: linear-gradient(#29483a 0 52%, #203529 52%); box-shadow:inset 0 34px 74px var(--time-glow); }
.stage-cave .battle-stage { background: radial-gradient(circle at 72% 18%,rgba(230,142,91,.24),transparent 17%),linear-gradient(#273447 0 52%,#1c2733 52%); }
.stage-desert .battle-stage { background: radial-gradient(circle at 78% 9%,rgba(255,218,126,.42),transparent 16%),linear-gradient(#8e6946 0 52%,#584534 52%); }
.stage-snow .battle-stage { background: radial-gradient(ellipse at 55% 0,rgba(137,235,223,.25),transparent 45%),linear-gradient(#41677a 0 52%,#d6e5e7 52%); }
.stage-volcano .battle-stage { background: radial-gradient(circle at 77% 35%,rgba(255,105,31,.35),transparent 20%),linear-gradient(#3b2525 0 52%,#211b1c 52%); }
.stage-sky .battle-stage { background:radial-gradient(circle at 76% 8%,rgba(255,244,184,.45),transparent 18%),linear-gradient(#6388a9 0 52%,#c9d8d7 52%); }
.stage-marsh .battle-stage { background:radial-gradient(ellipse at 60% 5%,rgba(189,184,255,.22),transparent 30%),linear-gradient(#263b45 0 52%,#26382f 52%); }
.stage-clock .battle-stage { background:radial-gradient(circle at 75% 18%,rgba(237,178,74,.3),transparent 17%),linear-gradient(#44394a 0 52%,#2b282d 52%); }
.battle-stage::before { content:"";position:absolute;z-index:1;inset:0;background:var(--stage-background) center / cover no-repeat;image-rendering:pixelated;opacity:.78;filter:brightness(.68) saturate(.9);pointer-events:none; }
.stage-forest { --stage-background:url("assets/backgrounds/stage-1.png?v=74"); }
.stage-cave { --stage-background:url("assets/backgrounds/stage-2.png?v=74"); }
.stage-desert { --stage-background:url("assets/backgrounds/stage-3.png?v=74"); }
.stage-snow { --stage-background:url("assets/backgrounds/stage-4.png?v=74"); }
.stage-volcano { --stage-background:url("assets/backgrounds/stage-5.png?v=74"); }
.stage-sky { --stage-background:url("assets/backgrounds/stage-6.png?v=74"); }
.stage-marsh { --stage-background:url("assets/backgrounds/stage-7.png?v=74"); }
.stage-clock { --stage-background:url("assets/backgrounds/stage-8.png?v=74"); }
.world-eclipse .battle-stage::before { opacity:.72;filter:brightness(.58) saturate(.88) hue-rotate(8deg); }
.world-starfall .battle-stage::before { opacity:.75;filter:brightness(.66) saturate(1.06) hue-rotate(-7deg); }
.world-frozen .battle-stage::before { opacity:.73;filter:brightness(.78) saturate(.7); }
.world-eclipse .battle-stage { box-shadow:inset 0 0 80px rgba(68,48,118,.48),inset 0 34px 74px var(--time-glow); }
.world-starfall .battle-stage { box-shadow:inset 0 0 85px rgba(46,98,142,.4),inset 0 34px 74px var(--time-glow); }
.world-frozen .battle-stage { box-shadow:inset 0 0 90px rgba(212,235,239,.28),inset 0 34px 74px var(--time-glow); }
.rare-encounter .monster-sprite { filter:brightness(1.02) saturate(1.02) drop-shadow(0 8px 6px rgba(0,0,0,.3)); }
.rare-encounter .monster-card { border-color:rgba(255,220,91,.35); }
.battle-stage::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 38%; background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(255,255,255,.018) 12px 13px), repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 20px, transparent 20px 40px); clip-path: polygon(0 16%,12% 0,25% 13%,40% 3%,56% 18%,74% 4%,100% 15%,100% 100%,0 100%); }
.adventure-atmosphere { position:absolute; z-index:2; inset:0; pointer-events:none; opacity:.5; }
.adventure-atmosphere i { position:absolute; width:3px; height:3px; border-radius:50%; background:#fff0a8; box-shadow:0 0 8px #ffe788; animation:adventure-mote 4.8s ease-in-out infinite; }
.adventure-atmosphere i:nth-child(1) { left:12%; top:25%; }
.adventure-atmosphere i:nth-child(2) { left:31%; top:17%; animation-delay:-1.3s; }
.adventure-atmosphere i:nth-child(3) { left:48%; top:34%; animation-delay:-2.7s; }
.adventure-atmosphere i:nth-child(4) { left:65%; top:19%; animation-delay:-.7s; }
.adventure-atmosphere i:nth-child(5) { left:79%; top:37%; animation-delay:-3.4s; }
.adventure-atmosphere i:nth-child(6) { left:91%; top:14%; animation-delay:-2s; }
.time-day .adventure-atmosphere { opacity:.18; }
.time-night .adventure-atmosphere { opacity:.82; }
.forest-depth { position: absolute; right: -4%; bottom: 34%; left: -4%; height: 65%; opacity: .5; background: radial-gradient(ellipse at bottom, #355846 0 34%, transparent 35%) 0 100% / 80px 115px repeat-x; }
.forest-far { opacity: .28; transform: translateX(30px) scale(.8); }
.battle-sprite { position: absolute; z-index: 3; bottom: 19px; background-repeat: no-repeat; image-rendering: pixelated; filter: brightness(1.02) saturate(1.02) drop-shadow(0 8px 6px rgba(0,0,0,.3)); }
.hero-nameplate { position: absolute; z-index: 7; top: 10px; left: 14px; display: grid; min-width: 138px; max-width: 190px; padding: 6px 9px 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(11,20,16,.72); backdrop-filter: blur(5px); }
.hero-nameplate > span { overflow:hidden; margin-bottom:2px; color:#aeb7b2; font-size:8px; font-weight:900; letter-spacing:.08em; text-overflow:ellipsis; white-space:nowrap; }
.hero-nameplate strong { overflow: hidden; color: #fff7da; font-size: 12px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.hero-nameplate small { color: rgba(255,255,255,.55); font-size: 9px; letter-spacing: .03em; }
.hero-nameplate.rarity-uncommon > span { color:#83d39a; text-shadow:0 0 8px rgba(79,191,112,.35); }
.hero-nameplate.rarity-rare > span { color:#7fc5ff; text-shadow:0 0 8px rgba(70,160,238,.45); }
.hero-nameplate.rarity-epic > span { color:#d09bff; text-shadow:0 0 9px rgba(177,93,238,.5); }
.hero-nameplate.rarity-legendary { border-color:rgba(239,202,97,.48); box-shadow:0 0 15px rgba(239,202,97,.16),inset 0 0 12px rgba(239,202,97,.06); }
.hero-nameplate.rarity-legendary > span { color:#ffe18a; text-shadow:0 0 9px rgba(255,202,65,.62); }
.hero-sprite { z-index:3; left: 10%; bottom: 4px; width: 110px; height: 138px; background-image: url("assets/pixel-hero-poses-male.png?v=74"); background-size: 500% 400%; background-position: var(--hero-pose-x,0%) var(--hero-outfit-y,0%); transform-origin: bottom center; animation: hero-idle 1.8s ease-in-out infinite; }
.hero-sprite.held-weapon { left:7%;bottom:2px;width:150px;height:150px;background-size:100% 400%;background-position:center var(--hero-outfit-y,0%); }
.hero-sprite.attack { animation: hero-attack-blade .72s ease; }
.adventure-card[data-weapon-style="staff"] .hero-sprite.attack { animation-name:hero-attack-staff;animation-duration:.8s; }
.adventure-card[data-weapon-style="bow"] .hero-sprite.attack { animation-name:hero-attack-bow;animation-duration:.72s; }
.adventure-card[data-weapon-style="hammer"] .hero-sprite.attack { animation-name:hero-attack-hammer;animation-duration:.92s; }
.adventure-card[data-weapon-style="instrument"] .hero-sprite.attack { animation-name:hero-attack-instrument;animation-duration:.84s; }
.hero-sprite.victory { animation: hero-victory .85s ease; }
.hero-sprite.low-hp { filter: drop-shadow(0 8px 6px rgba(0,0,0,.3)) drop-shadow(0 0 8px rgba(213,87,75,.4)); }
.hero-sprite.damaged { animation: hero-damaged .75s steps(4,end); }
.hero-sprite.outfit-dawn { filter: sepia(.2) saturate(1.25) hue-rotate(-9deg) drop-shadow(0 0 9px rgba(239,194,91,.34)) drop-shadow(0 8px 6px rgba(0,0,0,.3)); }
.hero-sprite.outfit-starlit { filter: saturate(1.25) hue-rotate(68deg) drop-shadow(0 0 10px rgba(127,149,231,.38)) drop-shadow(0 8px 6px rgba(0,0,0,.3)); }
.hero-sprite.outfit-calendar { filter: saturate(1.4) hue-rotate(150deg) brightness(1.05) drop-shadow(0 0 11px rgba(207,148,235,.42)) drop-shadow(0 8px 6px rgba(0,0,0,.3)); }
.companion-sprite { position: absolute; z-index: 4; bottom: 17px; left: 27%; width: 62px; height: 82px; background-image: url("assets/egg-companions.png"); background-repeat: no-repeat; background-size: 600% auto; background-position-y: center !important; image-rendering: pixelated; filter: drop-shadow(0 7px 5px rgba(0,0,0,.3)); animation: companion-idle 1.65s steps(2,end) infinite; }
.companion-sprite[hidden] { display: none; }
.monster-sprite { right: 8%; bottom: 4px; width: 104px; height: 108px; object-fit:contain;object-position:center bottom; transform-origin: bottom center; animation: monster-idle 2.1s ease-in-out infinite; filter:brightness(1.02) saturate(1.02) drop-shadow(0 8px 6px rgba(0,0,0,.3)); }
.monster-sprite.monster-size-small { right:10%; width:88px; height:92px; }
.monster-sprite.monster-size-medium { width:104px; height:108px; }
.monster-sprite.monster-size-large { right:7%; width:116px; height:120px; }
.monster-sprite.monster-size-boss { right:6%; width:126px; height:128px; }
.monster-sprite.boss { filter:brightness(1.02) saturate(1.02) drop-shadow(0 8px 8px rgba(0,0,0,.38)); }
.monster-sprite.hit { animation: monster-hit .55s steps(3,end); }
.monster-sprite.counterattack { animation:monster-counterattack .95s cubic-bezier(.2,.8,.2,1); }
.battle-flash { position: absolute; z-index: 4; top: 45%; left: 51%; width: 50px; height: 4px; border-radius: 50%; background: #fff1b6; opacity: 0; transform: rotate(-25deg); box-shadow: 0 0 15px #ffe27a; }
.battle-flash.show { animation: battle-flash .35s ease; }
.damage-number { position: absolute; z-index: 6; top: 30px; right: 21%; color: #ffe482; font-family: ui-monospace, monospace; font-size: 18px; font-weight: 1000; text-shadow: 2px 2px 0 #6d3027; opacity: 0; }
.damage-number.show { animation: damage-pop .8s ease; }
.battle-result { position:absolute; z-index:9; top:69px; left:50%; display:grid; justify-items:center; width:max-content; max-width:calc(100% - 32px); padding:6px 12px 7px; border:1px solid rgba(235,208,117,.32); border-radius:9px; background:rgba(17,29,24,.9); color:#fff7da; text-align:center; opacity:0; pointer-events:none; transform:translate(-50%,7px) scale(.96); box-shadow:0 8px 22px rgba(0,0,0,.34); }
.battle-result small { color:#d9c476; font:900 8px/1.2 ui-monospace,monospace; letter-spacing:.13em; }
.battle-result strong { margin-top:2px; font-size:12px; line-height:1.35; overflow-wrap:anywhere; }
.battle-result.show { animation:battle-result-reveal .35s .08s var(--ease) both; }
.treasure-event { position:absolute; z-index:10; left:50%; bottom:9px; display:grid; grid-template-columns:66px minmax(0,1fr); align-items:center; gap:8px; width:min(300px,calc(100% - 24px)); padding:8px 12px 8px 7px; border:1px solid rgba(242,210,106,.35); border-radius:12px; background:rgba(19,29,25,.93); opacity:0; pointer-events:none; transform:translate(-50%,18px) scale(.92); box-shadow:0 14px 30px rgba(0,0,0,.4),0 0 24px rgba(242,210,106,.12); }
.treasure-event.show { animation:treasure-arrive 1.85s ease both; }
.treasure-sprite { display:block;overflow:hidden;width:64px;height:64px;background:url("assets/treasure-chest-vertical.png?v=74") center 0 / 100% 400% no-repeat;image-rendering:pixelated; }
.treasure-event.show .treasure-sprite { animation:treasure-open .75s steps(1,end) .15s forwards; }
.treasure-event.type-curio.show .treasure-sprite { animation:treasure-empty .9s steps(1,end) .15s forwards; }
.treasure-event small,.treasure-event strong,.treasure-event p { display:block; }
.treasure-event small { color:#e2c469; font-size:8px; font-weight:900; letter-spacing:.13em; }
.treasure-event strong { margin-top:1px; overflow:hidden; color:#fff6d9; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.treasure-event p { margin:2px 0 0; color:rgba(255,255,255,.55); font-size:9px; }
.hero-damage-number { position: absolute; z-index: 7; top: 65px; left: 17%; color: #ff9e90; font-family: ui-monospace,monospace; font-size: 16px; font-weight: 950; text-shadow: 2px 2px 0 #572521; opacity: 0; }
.hero-damage-number.show { animation: damage-pop .9s ease; }
.monster-card { position: absolute; z-index: 7; top: 13px; right: 16px; width: 168px; padding: 8px 9px; border: 1px solid rgba(255,255,255,.11); border-radius: 9px; background: rgba(11,20,16,.62); backdrop-filter: blur(5px); }
.monster-card > div:first-child { display:grid; gap:2px; margin-bottom:6px; }
.monster-card strong { color:#fff7da; font-size:11px; line-height:1.35; overflow-wrap:anywhere; }
.monster-card span { color: rgba(255,255,255,.62); font:750 8px/1.3 ui-monospace,monospace; letter-spacing:.06em; white-space:normal; }
.monster-card small { color:rgba(255,245,202,.7); font:750 8px/1.3 ui-monospace,monospace; letter-spacing:.02em; }
.pixel-bar { overflow: hidden; height: 7px; padding: 1px; border: 1px solid rgba(255,255,255,.16); border-radius: 2px; background: rgba(0,0,0,.28); }
.pixel-bar > span { display: block; height: 100%; background: #d46c5e; transition: width .55s var(--ease); }
.pixel-bar > span.boss { background: linear-gradient(90deg,#e46f59,#f0bc55); }
.adventure-progress { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px 18px; align-items: center; padding: 13px 17px 15px; }
.hp-block > div:first-child, .xp-block > div:first-child { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; font-size: 11px; }
.hp-block span, .xp-block span { color: rgba(255,255,255,.5); }
.hp-bar > span { background: linear-gradient(90deg,#d65f58,#eb9a72); }
.xp-bar > span { background: linear-gradient(90deg,#6fb39a,#b8d883); }
.daily-quest { display: grid; grid-template-columns: 27px 1fr auto; align-items: center; gap: 8px; }
.quest-check { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; color: rgba(255,255,255,.25); }
.quest-check.complete { background: #d1bb6a; color: #23372c; }
.quest-check .icon { width: 13px; height: 13px; }
.daily-quest strong, .daily-quest small { display: block; }
.daily-quest strong { font-size: 13px; }
.daily-quest small { color: rgba(255,255,255,.48); font-size: 11px; }
.daily-quest b { color: #d8c47f; font-family: ui-monospace, monospace; font-size: 12px; white-space: nowrap; }
.stage-progress { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 5px 9px; min-width: 145px; text-align: left; }
.stage-progress span { color: rgba(255,255,255,.72); font-size: 12px; font-weight: 750; }
.stage-progress strong { color: #e0cd8f; font-family: ui-monospace,monospace; font-size: 14px; white-space: nowrap; }
.stage-progress small { grid-column: 1 / -1; color: rgba(255,255,255,.42); font-size: 10px; }
.stage-road { position:relative; grid-column:1 / -1; display:grid; grid-template-columns:repeat(5,1fr); align-items:center; padding:2px 0; }
.stage-road::before { content:""; position:absolute; right:7px; left:7px; height:2px; background:rgba(255,255,255,.1); }
.stage-road i { position:relative; z-index:1; justify-self:center; display:grid; place-items:center; width:17px; height:17px; border:1px solid rgba(255,255,255,.16); border-radius:5px; background:#172920; color:rgba(255,255,255,.38); transform:rotate(45deg); }
.stage-road i b { font:800 9px ui-monospace,monospace; transform:rotate(-45deg); }
.stage-road i.next { border-color:#d8c477; color:#e9d68f; box-shadow:0 0 0 3px rgba(216,196,119,.08); }
.stage-road i.cleared { border-color:#d8c477; background:#d8c477; color:#1d3027; }
.village-quest { grid-column:1 / -1;display:grid;grid-template-columns:52px minmax(0,1fr) auto 15px;align-items:center;gap:10px;width:100%;padding:8px 10px;border:1px solid rgba(218,196,127,.2);border-radius:11px;background:linear-gradient(90deg,rgba(218,196,127,.1),rgba(255,255,255,.035));color:#f8f2dc;text-align:left;transition:border-color .2s,background .2s,transform .2s; }
.village-quest:hover { border-color:rgba(218,196,127,.42);background:linear-gradient(90deg,rgba(218,196,127,.16),rgba(255,255,255,.055));transform:translateY(-1px); }
.village-quest:active { border-color:rgba(218,196,127,.58);background:linear-gradient(90deg,rgba(218,196,127,.22),rgba(255,255,255,.07));transform:translateY(1px) scale(.995); }
.village-mini-visual { position:relative;display:grid;place-items:center;width:52px;height:46px;overflow:hidden;border-radius:8px;background:rgba(8,24,19,.32);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.village-mini-visual img { position:absolute;top:50%;left:0;width:500%;max-width:none;height:auto;image-rendering:pixelated;transform:translate(var(--village-position,0%),-50%);will-change:transform; }
.village-quest > span:nth-child(2) { min-width:0; }
.village-quest > span:nth-child(2) small,.village-quest > span:nth-child(2) strong,.village-quest > span:nth-child(2) em { display:block; }
.village-quest > span:nth-child(2) small { color:#dac57e;font-size:9px;font-weight:850;letter-spacing:.08em; }
.village-quest > span:nth-child(2) strong { margin-top:1px;font-size:12px; }
.village-quest > span:nth-child(2) em { margin-top:2px;overflow:hidden;color:rgba(255,255,255,.48);font-size:9px;font-style:normal;text-overflow:ellipsis;white-space:nowrap; }
.village-quest > b { display:grid;justify-items:end;white-space:nowrap; }
.village-quest > b small { color:rgba(255,255,255,.45);font-size:8px;font-weight:700; }
.village-quest > b strong { color:#e6cf84;font:900 15px ui-monospace,monospace; }
.village-quest > .icon { width:14px;height:14px;color:rgba(255,255,255,.5); }
.egg-quest { grid-column: 1 / -1; display: grid; grid-template-columns: 45px minmax(0,1fr) auto; align-items: center; gap: 9px 11px; width: 100%; padding: 8px 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(255,255,255,.035); color: #f8f2dc; text-align: left; transition: border-color .2s, background .2s, transform .2s; }
.egg-quest:hover { border-color: rgba(218,196,127,.32); background: rgba(255,255,255,.065); transform: translateY(-1px); }
.egg-quest.active { border-color: rgba(218,196,127,.34); background: linear-gradient(90deg,rgba(218,196,127,.09),rgba(255,255,255,.035)); }
.egg-mini-sprite { grid-row: 1 / 3; width: 43px; height: 47px; background: url("assets/egg-companions.png") 0 center / 600% auto no-repeat; image-rendering: pixelated; filter: drop-shadow(0 4px 4px rgba(0,0,0,.28)); opacity: .42; }
.egg-quest.active .egg-mini-sprite { opacity: 1; animation: egg-warm 1.9s ease-in-out infinite; }
.egg-quest > span:nth-child(2) { min-width: 0; }
.egg-quest strong, .egg-quest small { display: block; }
.egg-quest strong { font-size: 12px; }
.egg-quest small { overflow: hidden; color: rgba(255,255,255,.46); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.egg-quest > b { color: #dbc982; font-family: ui-monospace,monospace; font-size: 11px; }
.egg-progress-bar { grid-column: 2 / -1; overflow: hidden; height: 4px; border-radius: 999px; background: rgba(0,0,0,.25); }
.egg-progress-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#d5b85f,#f2df9b); transition: width .55s var(--ease); }
.equipment-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.equipment-slot { position: relative; display: grid; min-width: 0; padding: 7px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.045); color:inherit; text-align:left; transition:border-color .2s,background .2s,transform .2s; }
.equipment-slot.has-slot-art { grid-template-columns:38px minmax(0,1fr);align-items:center;gap:6px; }
.equipment-slot-copy { display:grid;min-width:0; }
.equipment-slot-art { width:38px;height:38px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 3px 3px rgba(0,0,0,.42)); }
.equipment-slot-art.rarity-rare { filter:drop-shadow(0 0 5px rgba(75,164,239,.6)) drop-shadow(0 3px 3px rgba(0,0,0,.42)); }
.equipment-slot-art.rarity-epic { filter:drop-shadow(0 0 6px rgba(181,95,238,.67)) drop-shadow(0 3px 3px rgba(0,0,0,.42)); }
.equipment-slot-art.rarity-legendary { filter:drop-shadow(0 0 7px rgba(244,190,40,.82)) drop-shadow(0 3px 3px rgba(0,0,0,.42)); }
.equipment-slot:hover { border-color:rgba(227,207,139,.34); background:rgba(255,255,255,.075); transform:translateY(-1px); }
.equipment-slot small { color: rgba(255,255,255,.4); font-size: 9px; }
.equipment-slot strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.equipment-slot b { position: absolute; top: 7px; right: 7px; color: #d9c276; font-size: 10px; }
.equipment-slot em { overflow:hidden;margin-top:2px;color:rgba(255,255,255,.45);font-size:8px;font-style:normal;text-overflow:ellipsis;white-space:nowrap; }
.equipment-slot.rarity-common { border-color:rgba(179,184,181,.25); }
.equipment-slot.rarity-uncommon { border-color:rgba(91,185,116,.46); box-shadow:inset 0 0 12px rgba(91,185,116,.07); }
.equipment-slot.rarity-rare { border-color: rgba(109,176,238,.5); box-shadow: inset 0 0 12px rgba(109,176,238,.08); }
.equipment-slot.rarity-epic { border-color: rgba(202,116,238,.55); box-shadow: inset 0 0 12px rgba(202,116,238,.1); }
.equipment-slot.rarity-legendary { border-color: rgba(239,201,82,.72); background: rgba(183,132,20,.12); box-shadow: inset 0 0 15px rgba(239,201,82,.17),0 0 11px rgba(239,201,82,.11); }
.battle-cinematic::before { content:""; position:fixed; z-index:89; inset:0; background:rgba(8,14,11,.68); backdrop-filter:blur(5px); animation:cinematic-dim .22s ease; }
.enemy-attack-cinematic::before { background:rgba(37,8,11,.72); }
.enemy-attack-cinematic .adventure-card.battle-reveal { box-shadow:0 28px 80px rgba(0,0,0,.65),0 0 0 2px rgba(225,83,71,.28); }
.enemy-attack-cinematic .adventure-card.battle-reveal::after { content:attr(data-counter-copy); position:absolute; z-index:12; left:50%; bottom:12px; padding:7px 12px; border:1px solid rgba(255,164,143,.25); border-radius:9px; background:rgba(65,16,17,.9); color:#ffd5ca; font:900 11px/1.2 ui-monospace,monospace; letter-spacing:.04em; transform:translateX(-50%); animation:counter-copy 1.8s ease both; }
.adventure-card.battle-reveal { position:fixed; z-index:90; top:50%; left:50%; width:min(720px,calc(100vw - 28px)); margin:0; transform:translate(-50%,-50%); box-shadow:0 28px 80px rgba(0,0,0,.58),0 0 0 1px rgba(235,208,117,.2); animation:cinematic-card .3s var(--ease); }
.adventure-card.battle-reveal .adventure-progress { display:none; }
.battle-cinematic-close { display:none; place-items:center; width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.08); color:#fff; }
.adventure-card.battle-reveal .battle-cinematic-close { display:grid; }
@keyframes cinematic-dim { from { opacity:0; } }
@keyframes cinematic-card { from { opacity:0; transform:translate(-50%,-47%) scale(.96); } }
@keyframes battle-result-reveal { from { opacity:0; transform:translate(-50%,7px) scale(.96); } to { opacity:1; transform:translate(-50%,0) scale(1); } }
@keyframes adventure-mote { 0%,100% { opacity:.18; transform:translateY(4px) scale(.7); } 50% { opacity:1; transform:translateY(-5px) scale(1); } }
@keyframes daily-route-pulse { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
@keyframes treasure-arrive { 0% { opacity:0; transform:translate(-50%,18px) scale(.92); } 16%,82% { opacity:1; transform:translate(-50%,0) scale(1); } 100% { opacity:0; transform:translate(-50%,-4px) scale(1); } }
@keyframes treasure-open { 0%,24%{background-position:center 0} 25%,49%{background-position:center 33.333%} 50%,74%{background-position:center 66.666%} 75%,100%{background-position:center 100%} }
@keyframes treasure-empty { 0%,24%{background-position:center 0} 25%,49%{background-position:center 33.333%} 50%,74%{background-position:center 66.666%} 75%,100%{background-position:center 100%} }
.daily-capture { margin: -20px 0 32px; padding: 15px; border: 1px solid color-mix(in srgb,var(--sage-pale) 72%,var(--line)); border-radius: 18px; background: linear-gradient(145deg,color-mix(in srgb,var(--surface-raised) 94%,var(--sage-wash)),var(--surface-raised)); box-shadow: var(--shadow-sm); }
.daily-capture-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 2px 10px; }
.daily-capture-heading h2 { margin-top: 3px; font-size: 16px; }
.daily-capture-heading > small { color: var(--ink-faint); font-size: 10px; word-break:keep-all; overflow-wrap:normal; }
.quick-capture { display: grid; grid-template-columns: 20px minmax(0,1fr) auto auto; align-items: center; gap: 8px; padding: 8px 9px 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-raised); box-shadow: 0 5px 14px color-mix(in srgb,var(--ink) 5%,transparent); }
.quick-capture > .icon { width: 15px; height: 15px; color: var(--sage); }
.quick-capture label { min-width: 0; }
.quick-capture input { width: 100%; padding: 7px 2px; border: 0; outline: 0; background: transparent; font-size: 14px; }
.quick-capture select { min-width: 92px; padding: 7px 25px 7px 9px; border: 1px solid var(--line); border-radius: 8px; outline: 0; background-color: var(--surface-muted); color: var(--ink-soft); font-size: 11px; font-weight: 750; }
.quick-capture button { padding: 7px 9px; border-radius: 8px; background: var(--surface-muted); color: var(--ink-faint); font-size: 12px; font-weight: 750; }
.quick-capture button[type=submit] { background: var(--sage-strong); color: var(--surface-solid); }
.quick-capture-options { display: flex; align-items: center; gap: 6px; }
.quick-project-label { display: grid; grid-template-columns: 10px minmax(0,1fr); align-items: center; gap: 8px; min-width: 112px; padding-left: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-muted); }
.quick-project-label i { position: static; width: 9px; height: 9px; border-radius: 50%; background: var(--quick-project-color,var(--sage)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); pointer-events: none; }
.quick-capture .quick-project-label select { min-width: 0; width: 100%; padding: 7px 25px 7px 0; border: 0; background-color: transparent; color: var(--ink-soft); }
.rare-task-badge { padding: 1px 6px; border: 1px solid color-mix(in srgb,var(--butter) 55%,transparent); border-radius: 999px; background: var(--butter-pale); color: color-mix(in srgb,var(--butter) 55%,var(--ink)); font-weight: 800; }
.missed-task-badge { padding: 1px 6px; border-radius: 999px; background: var(--surface-muted); color: var(--ink-faint); font-weight: 750; }
@keyframes hero-idle { 50% { transform: translateY(-2px); } }
@keyframes hero-attack-blade { 0%,100%{transform:translateX(0)} 24%{transform:translateX(-3px)} 50%{transform:translateX(48px)} }
@keyframes hero-attack-staff { 0%,100%{transform:translateX(0)} 32%{transform:translateX(5px)} 55%{transform:translateX(34px)} }
@keyframes hero-attack-bow { 0%,100%{transform:translateX(0)} 30%{transform:translateX(-5px)} 47%{transform:translateX(30px)} 58%{transform:translateX(25px)} }
@keyframes hero-attack-hammer { 0%,100%{transform:translate(0,0)} 28%{transform:translate(4px,-5px)} 58%{transform:translate(43px,3px)} }
@keyframes hero-attack-instrument { 0%,100%{transform:translate(0,0)} 30%{transform:translate(8px,-3px)} 52%{transform:translate(22px,-1px)} 68%{transform:translate(17px,-4px)} }
@keyframes hero-victory { 45% { transform: translateY(-13px); } }
@keyframes hero-damaged { 20% { transform: translateX(-7px); filter: brightness(1.8) sepia(.4) saturate(2); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
@keyframes companion-idle { 50% { transform: translateY(-2px) rotate(-1deg); } }
@keyframes egg-warm { 50% { transform: translateY(-2px) scale(1.04); filter: drop-shadow(0 4px 6px rgba(235,207,111,.35)); } }
@keyframes egg-event { 35% { transform: translateY(-7px) scale(1.12); filter: drop-shadow(0 0 14px rgba(247,221,131,.8)); } 70% { transform: translateY(0) scale(1.04); } }
.egg-event { animation: egg-event 1.1s ease !important; }
@keyframes monster-idle { 50% { transform: translateY(-3px); } }
@keyframes monster-hit { 0%,100% { transform:translateX(0); filter:brightness(1.02) saturate(1.02) drop-shadow(0 8px 6px rgba(0,0,0,.3)); } 25% { transform:translateX(8px); filter:brightness(1.24) saturate(1.02) drop-shadow(0 8px 6px rgba(0,0,0,.3)); } 50% { transform:translateX(-5px); } }
@keyframes monster-counterattack { 0%,100%{transform:translateX(0);filter:brightness(1.02) saturate(1.02) drop-shadow(0 8px 6px rgba(0,0,0,.3))} 35%{transform:translateX(-42px) scale(1.06)} 48%{filter:brightness(1.18) saturate(1.02) drop-shadow(0 0 9px rgba(255,91,73,.55))} 70%{transform:translateX(7px)} }
@keyframes counter-copy { 0%{opacity:0;transform:translate(-50%,8px)} 18%,78%{opacity:1;transform:translate(-50%,0)} 100%{opacity:0;transform:translate(-50%,-5px)} }
@keyframes battle-flash { 35% { opacity: 1; transform: rotate(-25deg) scaleX(1.8); } }
@keyframes damage-pop { 20% { opacity: 1; transform: translateY(-7px) scale(1.15); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-28px); } }
.date-chip { position: relative; display: grid; place-items: center; min-width: 0; padding: 9px 3px 10px; border-radius: 12px; background: transparent; color: var(--ink-faint); transition: color .2s, background .2s, transform .2s; }
.date-chip:hover { color: var(--ink); background: var(--surface-muted); transform: translateY(-1px); }
.date-chip span { font-size: 9px; font-weight: 700; }
.date-chip strong { margin-top: 2px; color: var(--ink-soft); font-family: ui-serif, Georgia, serif; font-size: 15px; font-weight: 600; }
.date-chip.active { background: var(--sage-strong); color: color-mix(in srgb, var(--surface-solid) 76%, transparent); box-shadow: 0 8px 18px color-mix(in srgb, var(--sage) 22%, transparent); }
.date-chip.active strong { color: var(--surface-solid); }
.date-chip.has-tasks::after { content: ""; position: absolute; bottom: 5px; width: 3px; height: 3px; border-radius: 50%; background: var(--peach); }
.date-chip.active::after { background: var(--surface-solid); }

.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 13px; padding: 0 2px; }
.section-heading.compact { align-items: center; margin-top: 38px; }
.kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-faint); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.kicker-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--peach); box-shadow: 0 0 0 4px var(--peach-pale); }
.section-heading h2 { margin: 4px 0 0; font-size: 16px; font-weight: 750; letter-spacing: -.01em; }
.section-meta { color: var(--ink-faint); font-size: 10px; }

.focus-list { display: grid; gap: 9px; }
.focus-task {
  --task-accent: var(--peach);
  --task-wash: var(--peach-pale);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 75px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--task-accent) 18%, var(--line));
  border-radius: 17px;
  background: color-mix(in srgb, var(--task-wash) 36%, var(--surface-raised));
  box-shadow: var(--shadow-sm);
  transition: transform .24s var(--ease), box-shadow .24s, opacity .3s;
}
.focus-task:nth-child(2) { --task-accent: var(--blue); --task-wash: var(--blue-pale); }
.focus-task:nth-child(3) { --task-accent: var(--butter); --task-wash: var(--butter-pale); }
.focus-task:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(31,43,39,.07); }
.focus-number { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--task-wash); color: color-mix(in srgb, var(--task-accent) 72%, var(--ink)); font-family: ui-serif, Georgia, serif; font-size: 13px; font-weight: 700; }
.focus-task-copy { min-width: 0; cursor: pointer; }
.focus-task-copy strong { display: block; overflow: hidden; color: var(--ink); font-size: 13.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.task-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--ink-faint); font-size: 9.5px; }
.task-meta span { display: inline-flex; align-items: center; gap: 3px; }
.task-meta .icon { width: 11px; height: 11px; }
.task-meta .meta-separator { width: 2px; height: 2px; border-radius: 50%; background: currentColor; }
.focus-actions { display: flex; align-items: center; gap: 5px; }
.focus-start { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border-radius: 9px; background: color-mix(in srgb, var(--task-wash) 60%, transparent); color: color-mix(in srgb, var(--task-accent) 70%, var(--ink)); font-size: 9px; font-weight: 800; }
.focus-start:hover { background: var(--task-wash); }
.focus-start .icon { width: 13px; height: 13px; fill: currentColor; stroke-width: 0; }

.check-button { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 1.5px solid var(--line-strong); border-radius: 50%; background: transparent; color: transparent; transition: border-color .2s, background .2s, transform .2s; }
.check-button:hover { border-color: var(--sage); transform: scale(1.08); color: color-mix(in srgb, var(--sage) 45%, transparent); }
.check-button .icon { width: 12px; height: 12px; stroke-width: 2.3; }
.check-button.checked { border-color: var(--sage); background: var(--sage); color: var(--surface-solid); }

.heading-inline { display: flex; align-items: center; gap: 9px; }
.heading-inline h2 { margin: 0; }
.task-total { display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; background: var(--surface-muted); color: var(--ink-faint); font-size: 9.5px; font-weight: 700; }
.sort-wrap { position: relative; }
.sort-trigger { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 9px; background: transparent; color: var(--ink-faint); font-size: 10px; }
.sort-trigger:hover { background: var(--surface-muted); color: var(--ink-soft); }
.sort-trigger .icon { width: 13px; height: 13px; }
.sort-trigger .chevron { width: 11px; transform: rotate(90deg); }
.popover { position: absolute; z-index: 30; top: calc(100% + 7px); right: 0; width: 130px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); box-shadow: var(--shadow-md); opacity: 0; transform: translateY(-5px) scale(.98); pointer-events: none; transition: opacity .18s, transform .18s; }
.popover.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.sort-menu button { display: block; width: 100%; padding: 8px 10px; border-radius: 8px; background: transparent; color: var(--ink-soft); text-align: left; font-size: 10.5px; }
.sort-menu button:hover { background: var(--surface-muted); color: var(--ink); }

.task-list { display: grid; }
.task-row {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 57px;
  padding: 9px 7px;
  border-bottom: 1px solid var(--line);
  transition: background .2s, opacity .25s, transform .25s;
}
.task-row::before { content: ""; position: absolute; left: -5px; width: 3px; height: 22px; border-radius: 5px; background: var(--row-accent, transparent); opacity: .85; }
.task-row:hover { background: color-mix(in srgb, var(--surface-solid) 48%, transparent); }
.task-row.dragging { opacity: .4; transform: scale(.98); }
.task-row.drag-over { border-top: 2px solid var(--sage); }
.task-copy { min-width: 0; cursor: pointer; }
.task-copy strong { display: block; overflow: hidden; font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.task-row-actions { display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity .2s; }
.task-row:hover .task-row-actions, .task-row:focus-within .task-row-actions { opacity: 1; }
.task-row-action { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; background: transparent; color: var(--ink-faint); }
.task-row-action:hover { background: var(--surface-muted); color: var(--ink); }
.task-row-action .icon { width: 14px; height: 14px; }
.priority-mark { display: inline-block; width: 6px; height: 6px; border-radius: 2px; background: var(--red); }
.project-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 999px; background: var(--pill-bg, var(--surface-muted)); color: var(--pill-color, var(--ink-soft)); }
.project-pill::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }


.completed-section { margin-top: 25px; border-top: 1px solid var(--line); }
.completed-toggle { display: grid; grid-template-columns: 24px auto 1fr 18px; align-items: center; gap: 9px; width: 100%; padding: 18px 5px 10px; background: transparent; color: var(--ink-faint); text-align: left; }
.completed-toggle > span:first-child { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sage-wash); color: var(--sage); }
.completed-toggle .icon { width: 12px; height: 12px; }
.completed-toggle strong { font-size: 10.5px; font-weight: 700; }
.completed-count { font-size: 10px; }
.completed-chevron { justify-self: end; transition: transform .25s; }
.completed-toggle[aria-expanded="true"] .completed-chevron { transform: rotate(90deg); }
.completed-list { display: grid; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .45s var(--ease), opacity .3s; }
.completed-section.open .completed-list { max-height: 700px; opacity: 1; }
.task-row.completed .task-copy strong { color: var(--ink-faint); text-decoration: line-through; text-decoration-thickness: 1px; }

.empty-state { display: grid; place-items: center; padding: 38px 20px; text-align: center; }
.empty-state h3 { margin: 15px 0 3px; font-family: ui-serif, "Yu Mincho", serif; font-size: 16px; font-weight: 600; }
.empty-state p { margin: 0; color: var(--ink-faint); font-size: 10px; }
.empty-visual { position: relative; width: 58px; height: 42px; }
.empty-visual span { position: absolute; bottom: 0; left: 50%; width: 34px; height: 18px; border: 1.5px solid var(--sage); border-top: 0; border-radius: 4px 4px 18px 18px; transform: translateX(-50%); }
.empty-visual span:nth-child(2) { bottom: 15px; left: 20px; width: 18px; height: 24px; border: 0; border-left: 1.5px solid var(--sage); border-radius: 50%; transform: rotate(-43deg); }
.empty-visual span:nth-child(3) { bottom: 16px; left: 33px; width: 16px; height: 21px; border: 0; border-right: 1.5px solid var(--sage); border-radius: 50%; transform: rotate(38deg); }

.day-panel { position: sticky; top: 95px; align-self: start; display: grid; gap: 14px; }
.panel-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface-solid) 78%, transparent); box-shadow: var(--shadow-sm); }
.schedule-card { padding: 20px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.panel-heading h3 { margin: 4px 0 0; font-size: 14px; }
.load-visual { padding: 19px 0 16px; border-bottom: 1px solid var(--line); }
.load-numbers strong { font-family: ui-serif, Georgia, serif; font-size: 21px; font-weight: 600; }
.load-numbers span { color: var(--ink-faint); font-size: 10px; }
.load-bar { overflow: hidden; height: 6px; margin: 10px 0 7px; border-radius: 999px; background: var(--surface-muted); }
.load-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sage), var(--moss)); transition: width .7s var(--ease), background .2s; }
.load-caption { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-faint); font-size: 8.5px; }
.load-caption span:first-child { color: var(--sage); font-weight: 650; }
.mini-timeline { display: grid; gap: 3px; padding-top: 13px; }
.timeline-item { display: grid; grid-template-columns: 39px 8px 1fr; align-items: center; gap: 9px; min-height: 31px; color: var(--ink-soft); font-size: 9px; }
.timeline-item time { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.timeline-dot { width: 7px; height: 7px; border: 2px solid var(--surface-solid); border-radius: 50%; background: var(--dot-color, var(--sage)); box-shadow: 0 0 0 1px var(--dot-color, var(--sage)); }
.timeline-item span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-empty { padding: 18px 0 4px; color: var(--ink-faint); font-size: 9px; text-align: center; }

.focus-card { overflow: hidden; padding: 19px 21px 21px; background: var(--sage-strong); color: #f6f7f1; box-shadow: 0 18px 36px color-mix(in srgb, var(--sage) 18%, transparent); }
html[data-theme="dark"] .focus-card { background: #294337; }
.focus-card-top { display: flex; justify-content: space-between; align-items: center; }
.focus-card .subtle { color: rgba(255,255,255,.62); }
.focus-card .subtle:hover { background: rgba(255,255,255,.09); color: white; }
.focus-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(255,255,255,.08); font-size: 7px; font-weight: 800; letter-spacing: .14em; }
.focus-badge .icon { width: 10px; height: 10px; fill: currentColor; stroke-width: 0; }
.focus-label { margin: 13px 0 2px; color: rgba(255,255,255,.5); font-size: 8.5px; }
.focus-card h3 { overflow: hidden; margin: 0; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.timer-wrap { position: relative; width: 120px; height: 120px; margin: 14px auto 11px; }
.timer-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-ring circle { fill: none; stroke-width: 4; }
.timer-track { stroke: rgba(255,255,255,.11); }
.timer-value { stroke: #f5e3b6; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 0; transition: stroke-dashoffset .3s linear; }
.timer-time { position: absolute; inset: 0; display: grid; place-items: center; font-family: ui-serif, Georgia, serif; font-size: 29px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.timer-actions { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.timer-main { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 10px; border-radius: 10px; background: #f5f1df; color: #365046; font-size: 9px; font-weight: 800; }
.timer-main:hover { background: white; transform: translateY(-1px); }
.timer-main .icon { width: 13px; height: 13px; fill: currentColor; stroke-width: 0; }
.timer-skip { padding: 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.72); font-size: 8px; }
.timer-skip:hover { background: rgba(255,255,255,.12); color: white; }

.gentle-note { display: flex; align-items: center; gap: 13px; padding: 13px 14px; color: var(--ink-soft); }
.gentle-note strong { display: block; margin-bottom: 2px; font-family: ui-serif, "Yu Mincho", serif; font-size: 11px; }
.gentle-note p { margin: 0; color: var(--ink-faint); font-size: 8.5px; line-height: 1.5; }
.note-illustration { position: relative; flex: 0 0 41px; width: 41px; height: 38px; }
.note-illustration span { position: absolute; bottom: 4px; left: 7px; width: 28px; height: 14px; border: 1.5px solid var(--sage); border-top: 0; border-radius: 4px 4px 16px 16px; opacity: .7; }
.note-illustration span:nth-child(2) { bottom: 17px; left: 18px; width: 14px; height: 18px; border: 0; border-left: 1.5px solid var(--sage); border-radius: 50%; transform: rotate(-34deg); }
.note-illustration span:nth-child(3) { bottom: 18px; left: 22px; width: 12px; height: 16px; border: 0; border-right: 1.5px solid var(--sage); border-radius: 50%; transform: rotate(38deg); }

.mobile-nav { display: none; }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(14, 22, 18, .38); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; overscroll-behavior: contain; transition: opacity .24s; }
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal { width: min(600px, 100%); max-height: calc(100vh - 40px); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 25px; background: var(--surface-raised); box-shadow: var(--shadow-lg); transform: translateY(18px) scale(.98); transition: transform .32s var(--ease); }
.modal-backdrop.open .modal { transform: translateY(0) scale(1); }
.tutorial-backdrop { z-index:320; }
.tutorial-modal { width:min(540px,100%);overflow:hidden;padding:0 0 22px; }
.tutorial-header { display:flex;align-items:center;justify-content:space-between;padding:18px 21px 8px; }
.tutorial-header > span { color:var(--ink-faint);font:800 12px ui-monospace,monospace; }
.tutorial-header > button { padding:7px 9px;background:transparent;color:var(--ink-faint);font-size:13px;font-weight:750; }
.tutorial-dots { display:flex;gap:5px;padding:0 21px 15px; }
.tutorial-dots i { width:22px;height:4px;border-radius:999px;background:var(--line-strong);transition:background .2s,width .2s; }
.tutorial-dots i.done { background:var(--sage); }
.tutorial-dots i.active { width:34px;background:var(--butter); }
.tutorial-visual { position:relative;display:grid;place-items:center;min-height:196px;margin:0 21px;overflow:hidden;border:1px solid color-mix(in srgb,var(--sage) 22%,var(--line));border-radius:19px;background:linear-gradient(145deg,var(--sage-wash),var(--surface-muted)); }
.tutorial-copy { min-height:145px;padding:22px 25px 12px;text-align:center; }
.tutorial-copy .kicker { color:#a47f25;font-size:10px; }
.tutorial-copy h2 { margin:5px 0 8px;font-family:ui-serif,"Yu Mincho",serif;font-size:24px;font-weight:650; }
.tutorial-copy p { max-width:440px;margin:0 auto;color:var(--ink-soft);font-size:14px;line-height:1.75; }
.tutorial-actions { display:grid;grid-template-columns:auto 1fr;gap:9px;padding:0 21px; }
.tutorial-actions button { min-height:44px;border-radius:12px;font-size:14px;font-weight:850; }
#tutorial-back { padding:0 18px;border:1px solid var(--line-strong);background:var(--surface-muted);color:var(--ink-soft); }
#tutorial-next { display:flex;align-items:center;justify-content:center;gap:8px;background:var(--sage-strong);color:var(--surface-solid); }
#tutorial-next .icon { width:16px;height:16px; }
.tutorial-capture { display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;width:min(390px,calc(100% - 28px));padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-raised);box-shadow:var(--shadow-md);text-align:left; }
.tutorial-capture > span { display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--sage-strong);color:white;font-size:24px; }
.tutorial-capture strong,.tutorial-capture small { display:block; }
.tutorial-capture strong { font-size:15px; }.tutorial-capture small{color:var(--ink-faint);font-size:12px}.tutorial-capture>b{padding:7px 10px;border-radius:9px;background:var(--butter-pale);color:#92701c;font-size:12px}
.tutorial-battle { position:absolute;inset:0;background:url("assets/backgrounds/stage-1.png?v=74") center / cover no-repeat;image-rendering:pixelated; }
.tutorial-battle::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,37,29,.08),rgba(14,37,29,.5)); }
.tutorial-battle:not(.ready) .tutorial-held-hero,.tutorial-battle:not(.ready) .tutorial-monster,.tutorial-held-hero:not(.loaded):not(.asset-image-failed) { opacity:0; }
.tutorial-held-hero,.tutorial-monster { position:absolute;background-repeat:no-repeat;image-rendering:pixelated;filter:drop-shadow(0 8px 5px rgba(0,0,0,.35)); }
.tutorial-battle.ready .tutorial-held-hero { animation:tutorial-hero-attack 3.4s ease-in-out infinite; }
.tutorial-held-hero { z-index:3;left:5%;bottom:0;width:128px;height:128px;overflow:hidden;transform-origin:bottom center;transition:opacity .16s ease; }
.tutorial-held-hero img { display:block;width:100%;max-width:none;height:auto; }
.tutorial-held-hero.asset-image-failed::after { content:"画像を再読込してください";position:absolute;left:5px;bottom:8px;width:112px;padding:5px;border-radius:7px;background:rgba(15,35,27,.82);color:#fff;font-size:8px;text-align:center; }
.tutorial-monster { z-index:2;right:10%;bottom:5px;width:84px;height:88px;background:url("assets/monsters/stage1-monster0.png?v=74") center bottom / contain no-repeat; }
.tutorial-battle.ready .tutorial-monster { animation:tutorial-monster-hit 3.4s ease-in-out infinite; }
.tutorial-battle > i { position:absolute;z-index:6;top:45px;right:35%;color:#fff1b0;font:900 26px ui-monospace,monospace;text-shadow:0 2px 0 #603f27;opacity:0;transform:rotate(-8deg); }
.tutorial-battle.ready > i { animation:tutorial-damage 3.4s ease-in-out infinite; }
.tutorial-battle > b { position:absolute;z-index:6;left:50%;bottom:12px;transform:translateX(-50%);padding:6px 11px;border-radius:999px;background:rgba(19,45,35,.88);color:#fff2c4;font-size:12px;white-space:nowrap;opacity:0; }
.tutorial-battle.ready > b { animation:tutorial-complete 3.4s ease-in-out infinite; }
@keyframes tutorial-hero-attack { 0%,25%,55%,100%{transform:translateX(0)} 40%{transform:translateX(38px)} }
@keyframes tutorial-monster-hit { 0%,41%,57%,100%{transform:translateX(0);filter:brightness(1.02) saturate(1.02) drop-shadow(0 8px 5px rgba(0,0,0,.35))} 47%{transform:translateX(7px);filter:brightness(1.22) saturate(1.02) drop-shadow(0 8px 5px rgba(0,0,0,.35))} 52%{transform:translateX(-4px)} }
@keyframes tutorial-damage { 0%,43%,66%,100%{opacity:0;transform:translateY(0) rotate(-8deg)} 48%,58%{opacity:1;transform:translateY(-8px) rotate(-8deg)} }
@keyframes tutorial-complete { 0%,48%,100%{opacity:0;transform:translate(-50%,5px)} 57%,90%{opacity:1;transform:translate(-50%,0)} }
.tutorial-plan { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;width:min(390px,calc(100% - 28px)); }.tutorial-plan span{display:grid;gap:6px;padding:13px;border:1px solid var(--line);border-radius:13px;background:var(--surface-raised);color:var(--ink-faint);font-size:12px}.tutorial-plan b{color:var(--ink);font-size:15px}
.tutorial-equipment { display:grid;gap:7px;width:min(400px,calc(100% - 28px)); }.tutorial-equipment>span{display:grid;grid-template-columns:55px minmax(0,1fr) auto;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-raised);text-align:left}.tutorial-equipment small{color:var(--ink-faint);font-size:11px}.tutorial-equipment strong{font-size:14px}.tutorial-equipment b{color:#a27d22;font-size:11px}
.tutorial-menu { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(390px,calc(100% - 28px)); }.tutorial-menu span{padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--surface-raised);font-size:14px;font-weight:750}.tutorial-menu .highlight{border-color:var(--sage);background:var(--sage-pale);color:var(--sage-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--sage) 12%,transparent)}
.login-reward-backdrop { z-index:310; }
.login-reward-modal { position:relative;width:min(560px,100%);padding:27px;text-align:center;overflow:hidden;background:linear-gradient(155deg,color-mix(in srgb,var(--butter-pale) 42%,var(--surface-raised)),var(--surface-raised)); }
.login-reward-close { position:absolute;top:15px;right:15px;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--surface-muted);color:var(--ink-faint); }.login-reward-close .icon{width:17px;height:17px}
.login-reward-emblem { display:grid;place-items:center;width:58px;height:58px;margin:0 auto 10px;border:1px solid rgba(206,166,55,.35);border-radius:18px;background:#263b31;color:#f0cf6e;font-size:25px;box-shadow:0 10px 24px rgba(27,48,38,.18); }
.login-reward-modal>.kicker{color:#a27b1e;font-size:10px}.login-reward-modal h2{margin:4px 0 5px;font-family:ui-serif,"Yu Mincho",serif;font-size:25px;font-weight:650}.login-reward-modal>p{max-width:440px;margin:0 auto;color:var(--ink-soft);font-size:14px;line-height:1.65}
.login-reward-grid { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin:19px 0 13px; }.login-reward-day{display:grid;justify-items:center;gap:3px;min-width:0;padding:7px 3px 8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-muted);color:var(--ink-faint)}.login-reward-day small{font-size:9px}.login-reward-day span{overflow:hidden;max-width:100%;font-size:8px;white-space:nowrap;text-overflow:ellipsis}.login-reward-day.passed{opacity:.58}.login-reward-day.current{border-color:#c29b34;background:var(--butter-pale);color:#8d6b17;box-shadow:0 0 0 2px rgba(194,155,52,.11)}.login-reward-day.received{animation:reward-pop .55s var(--ease);background:#e7f2e8;color:#315c48}
.reward-item-art { display:block;width:36px;height:36px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 3px 3px rgba(24,47,35,.18)); }
.login-reward-day.asset-image-failed::after { content:"✦";display:grid;place-items:center;width:36px;height:36px;color:#ba9437;font-size:18px; }
.login-reward-current.asset-image-failed::before { content:"✦";display:grid;place-items:center;flex:0 0 58px;width:58px;height:58px;border-radius:11px;background:var(--butter-pale);color:#a77d1d;font-size:24px; }
.login-reward-current { display:flex;align-items:center;gap:13px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--butter) 38%,var(--line));border-radius:13px;background:var(--surface-raised);text-align:left; }.login-reward-current>.reward-item-art{flex:0 0 auto;width:58px;height:58px}.login-reward-current small,.login-reward-current strong{display:block}.login-reward-current small{color:var(--ink-faint);font-size:11px}.login-reward-current strong{font-size:14px}
.login-reward-claim { width:100%;min-height:45px;margin-top:12px;border-radius:12px;background:var(--sage-strong);color:var(--surface-solid);font-size:14px;font-weight:900; }.login-reward-claim:disabled{opacity:.7}.login-reward-later{margin-top:7px;padding:5px 10px;background:transparent;color:var(--ink-faint);font-size:12px;text-decoration:underline;text-underline-offset:3px}
.tutorial-help-nudge { position:fixed;z-index:220;right:18px;bottom:18px;display:grid;grid-template-columns:40px minmax(0,1fr) auto 30px;align-items:center;gap:10px;width:min(600px,calc(100vw - 36px));padding:11px;border:1px solid color-mix(in srgb,var(--sage) 35%,var(--line));border-radius:15px;background:var(--surface-raised);box-shadow:var(--shadow-lg); }.tutorial-help-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--sage-pale);color:var(--sage-strong)}.tutorial-help-nudge strong{display:block;font-size:13px}.tutorial-help-nudge p{margin:2px 0 0;color:var(--ink-faint);font-size:11px}.tutorial-help-nudge>button{min-height:34px;padding:0 11px;border-radius:9px;background:var(--sage-strong);color:var(--surface-solid);font-size:11px;font-weight:800}.tutorial-help-nudge>#dismiss-help-nudge{display:grid;place-items:center;width:30px;padding:0;background:transparent;color:var(--ink-faint)}.tutorial-help-nudge .icon{width:17px;height:17px}
.tutorial-replay { display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:10px;width:100%;margin-top:9px;padding:11px;border:1px solid color-mix(in srgb,var(--sage) 25%,var(--line));border-radius:12px;background:var(--sage-wash);text-align:left; }.tutorial-replay>span:first-child{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--sage-strong);color:var(--surface-solid);font-size:12px}.tutorial-replay strong,.tutorial-replay small{display:block}.tutorial-replay strong{font-size:12px}.tutorial-replay small{margin-top:2px;color:var(--ink-faint);font-size:10px}
@keyframes reward-pop { 50% { transform:translateY(-5px) scale(1.04); } }
.modal-handle { display: none; }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 27px 13px; }
.modal-heading h2 { margin: 4px 0 0; font-family: ui-serif, "Yu Mincho", serif; font-size: 23px; font-weight: 600; }
.list-manager-modal { width: min(620px,100%); }
.list-manager-modal .modal-heading p { margin: 5px 0 0; color: var(--ink-faint); font-size: 13px; line-height: 1.5; }
.list-manager-body { display: grid; gap: 14px; padding: 3px 27px 27px; }
.list-create-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 11px; padding: 15px; border: 1px solid color-mix(in srgb,var(--sage) 24%,var(--line)); border-radius: 16px; background: var(--sage-wash); }
.list-create-card label { display: grid; gap: 5px; }
.list-create-card label span { color: var(--ink-soft); font-size: 13px; font-weight: 750; }
.list-create-card input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: var(--surface-raised); color: var(--ink); font-size: 16px; }
.list-create-card input:focus, .list-editor-top input:focus { border-color: color-mix(in srgb,var(--sage) 60%,var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb,var(--sage) 12%,transparent); }
.list-create-card .primary-button { align-self: end; min-height: 42px; font-size: 13px; }
.list-create-card > .list-tone-picker { grid-column: 1 / -1; }
.list-tone-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.list-tone { display: grid; place-items: center; width: 31px; height: 31px; padding: 0; border: 1px solid transparent; border-radius: 9px; background: transparent; }
.list-tone i { width: 15px; height: 15px; border-radius: 5px; background: var(--list-tone); box-shadow: inset 0 0 0 1px rgba(255,255,255,.38); }
.list-tone.active { border-color: color-mix(in srgb,var(--list-tone) 65%,var(--line)); background: color-mix(in srgb,var(--list-tone) 12%,var(--surface-raised)); box-shadow: 0 0 0 2px color-mix(in srgb,var(--list-tone) 12%,transparent); }
.list-manager-label { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 0; }
.list-manager-label strong { font-size: 14px; }
.list-manager-label span { color: var(--ink-faint); font-size: 12px; }
.list-manager-items { display: grid; gap: 9px; }
.list-manager-item { display: grid; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-muted); }
.list-editor-top { display: grid; grid-template-columns: 12px minmax(0,1fr) auto; align-items: end; gap: 10px; }
.list-editor-dot { align-self: center; width: 10px; height: 10px; border-radius: 4px; background: var(--list-tone); }
.list-editor-top label { display: grid; gap: 3px; }
.list-editor-top label span { color: var(--ink-faint); font-size: 11px; font-weight: 700; }
.list-editor-top input { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; outline: 0; background: var(--surface-raised); color: var(--ink); font-size: 15px; }
.list-editor-top small { padding-bottom: 9px; color: var(--ink-faint); font-size: 12px; white-space: nowrap; }
.list-editor-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-left: 22px; }
.list-editor-actions { display: flex; gap: 6px; }
.list-editor-actions button { min-height: 34px; padding: 7px 11px; border-radius: 9px; background: var(--surface-raised); color: var(--sage-strong); font-size: 12px; font-weight: 750; }
.list-editor-actions .list-delete { width: 34px; padding: 0; color: var(--red); }
.list-editor-actions .icon { width: 14px; height: 14px; }
.list-manager-note { margin: 0; color: var(--ink-faint); font-size: 12px; line-height: 1.6; }
#task-form { padding: 0 27px 25px; }
.task-kind-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 2px 0 8px; padding: 4px; border-radius: 12px; background: var(--surface-muted); }
.task-kind-switch button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; border-radius: 9px; background: transparent; color: var(--ink-faint); font-size: 11px; font-weight: 750; }
.task-kind-switch button.active { background: var(--surface-raised); color: var(--sage-strong); box-shadow: var(--shadow-sm); }
.task-kind-switch .icon { width: 14px; height: 14px; }
.task-template-bar { display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:end;gap:6px;padding:9px;border:1px solid var(--line);border-radius:12px;background:var(--surface-muted); }
.task-template-bar label { min-width:0; }
.task-template-bar label span { display:block;margin-bottom:4px;color:var(--ink-faint);font-size:9px;font-weight:800; }
.task-template-bar select { width:100%;min-height:32px;padding:0 24px 0 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface-raised);color:var(--ink);font-size:11px;font-weight:700; }
.task-template-bar button { min-height:32px;padding:0 10px;border-radius:8px;background:var(--surface-raised);color:var(--sage-strong);font-size:10px;font-weight:800; }
.task-template-bar #save-task-template { background:var(--sage-wash); }
.task-template-bar .template-delete { color:var(--red); }
.task-smart-suggestion { display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px;margin-top:-5px;padding:8px 9px;border:1px solid color-mix(in srgb,var(--butter) 32%,var(--line));border-radius:11px;background:color-mix(in srgb,var(--butter-pale) 42%,var(--surface-muted)); }
.task-smart-suggestion[hidden] { display:none; }
.suggestion-spark { display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--surface-raised);color:var(--butter); }
.task-smart-suggestion small,.task-smart-suggestion strong { display:block; }
.task-smart-suggestion small { color:var(--ink-faint);font-size:9px;font-weight:800; }
.task-smart-suggestion strong { margin-top:2px;font-size:10px;line-height:1.4; }
.task-smart-suggestion button { padding:7px 9px;border-radius:8px;background:var(--sage-strong);color:var(--surface-solid);font-size:10px;font-weight:850; }
.title-field, .notes-field { display: block; }
.title-field textarea, .notes-field textarea { display: block; width: 100%; resize: none; border: 0; outline: 0; background: transparent; }
.title-field textarea { padding: 12px 0 14px; border-bottom: 1px solid var(--line); font-family: ui-serif, "Yu Mincho", serif; font-size: 20px; line-height: 1.5; }
.title-field textarea::placeholder { color: var(--ink-faint); opacity: .7; }
.notes-field { padding: 13px 0 15px; }
.notes-field > span { display: block; margin-bottom: 3px; color: var(--ink-faint); font-size: 9px; font-weight: 700; }
.notes-field textarea { padding: 0; color: var(--ink-soft); font-size: 11px; }
.notes-field textarea::placeholder { color: var(--ink-faint); opacity: .7; }
.subtasks-field { display:block;margin:0 0 12px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-muted); }
.subtasks-field > span { display:flex;justify-content:space-between;margin-bottom:6px;color:var(--ink-faint);font-size:10px;font-weight:750; }
.subtasks-field > span small { font-weight:500; }
.subtasks-field textarea { width:100%;resize:vertical;border:0;outline:0;background:transparent;color:var(--ink-soft);font-size:12px;line-height:1.6; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.field-grid label { display: block; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); }
.field-grid label > span { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; color: var(--ink-faint); font-size: 8.5px; font-weight: 700; }
.field-grid label > span .icon { width: 12px; height: 12px; }
.field-grid input, .field-grid select { width: 100%; padding: 0 18px 0 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; font-weight: 650; }
.task-project-control { display:grid;grid-template-columns:10px minmax(0,1fr);align-items:center;gap:7px; }.task-project-control i{width:10px;height:10px;border-radius:4px;background:var(--task-project-color,var(--sage));box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}.task-project-control select{min-width:0}
.priority-row { display: flex; align-items: center; gap: 7px; margin-top: 14px; }
.priority-row > span { margin-right: 3px; color: var(--ink-faint); font-size: 9px; font-weight: 700; }
.priority-choice { display: flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--ink-faint); font-size: 9px; }
.priority-choice i { width: 6px; height: 6px; border-radius: 50%; background: var(--moss); }
.priority-choice[data-priority="high"] i { background: var(--red); }
.priority-choice[data-priority="low"] i { background: var(--blue); }
.priority-choice.active { border-color: color-mix(in srgb, var(--sage) 28%, var(--line)); background: var(--sage-wash); color: var(--sage-strong); }
.focus-switch { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--butter-pale) 30%, transparent); cursor: pointer; }
.focus-switch strong, .focus-switch small { display: block; }
.focus-switch strong { font-size: 10.5px; }
.focus-switch small { margin-top: 1px; color: var(--ink-faint); font-size: 8.5px; }
.focus-switch input { position: absolute; opacity: 0; pointer-events: none; }
.focus-switch i { position: relative; width: 36px; height: 21px; border-radius: 999px; background: var(--line-strong); transition: background .2s; }
.focus-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--surface-raised); box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform .25s var(--ease); }
.focus-switch input:checked + i { background: var(--sage); }
.focus-switch input:checked + i::after { transform: translateX(15px); }
.modal-actions { display: flex; align-items: center; gap: 8px; margin-top: 21px; }
.action-spacer { flex: 1; }
.primary-button, .secondary-button, .danger-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 15px; border-radius: 11px; font-size: 10px; font-weight: 750; }
.primary-button { background: var(--sage-strong); color: var(--surface-solid); box-shadow: 0 8px 18px color-mix(in srgb, var(--sage) 20%, transparent); }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 11px 22px color-mix(in srgb, var(--sage) 25%, transparent); }
.primary-button .icon { width: 14px; height: 14px; }
.secondary-button { background: var(--surface-muted); color: var(--ink-soft); }
.secondary-button:hover { color: var(--ink); }
.danger-button { padding-inline: 9px; background: transparent; color: var(--red); }
.danger-button:hover { background: var(--red-pale); }
.danger-button .icon { width: 14px; height: 14px; }

.command-backdrop { place-items: start center; padding-top: min(15vh, 130px); }
.command-palette { width: min(610px, 100%); overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: var(--surface-raised); box-shadow: var(--shadow-lg); transform: translateY(-12px) scale(.98); transition: transform .28s var(--ease); }
.command-backdrop.open .command-palette { transform: translateY(0) scale(1); }
.command-input-wrap { display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 10px; padding: 16px 17px; border-bottom: 1px solid var(--line); }
.command-input-wrap .icon { color: var(--sage); }
.command-input-wrap input { min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; font-size: 14px; }
.command-input-wrap input::placeholder { color: var(--ink-faint); }
.command-results { max-height: 380px; overflow: auto; padding: 8px; }
.command-empty { padding:30px 18px; color:var(--ink-faint); font-size:13px; line-height:1.6; text-align:center; }
.command-group-label { padding: 8px 10px 5px; color: var(--ink-faint); font-size: 8.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.command-item { display: grid; grid-template-columns: 33px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 11px; background: transparent; text-align: left; }
.settings-modal { max-width: 560px; }
.legacy-modal { width:min(820px,100%); }
.legacy-heading p { margin:4px 0 0;color:var(--ink-faint);font-size:12px; }
.legacy-body { display:grid;gap:16px;padding:0 24px 26px;overflow:auto; }
.legacy-tabs { display:grid;grid-template-columns:repeat(6,1fr);gap:5px;padding:5px;border-radius:13px;background:var(--surface-muted); }
.legacy-tabs button { min-height:36px;padding:7px;border-radius:9px;color:var(--ink-faint);font-size:11px;font-weight:800; }
.legacy-tabs button.active { background:var(--surface-raised);color:var(--sage-strong);box-shadow:var(--shadow-sm); }
.legacy-panel { animation:help-in .24s var(--ease); }
.legacy-panel[hidden] { display:none!important; }
[data-legacy-panel="world"],[data-legacy-panel="village"],[data-legacy-panel="class"],[data-legacy-panel="season"],[data-legacy-panel="chronicle"],[data-legacy-panel="raid"] { gap:15px; }
.legacy-panel.active { display:grid; }
.world-layer-card,.village-card,.season-card,.raid-card { display:grid;grid-template-columns:210px minmax(0,1fr);gap:17px;align-items:center;padding:16px;border:1px solid rgba(205,174,76,.2);border-radius:17px;background:linear-gradient(145deg,#20362d,#172820);color:#f8f2df; }
.world-layer-visual,.village-visual { min-height:140px;border-radius:12px;background-position:0 center;background-repeat:no-repeat;background-size:400% 100%;image-rendering:pixelated;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.world-layer-visual { background-image:url("assets/world-layers-strip.png"); }
.village-visual { position:relative;display:grid;place-items:center;min-height:220px;overflow:hidden;background-image:none;background-color:rgba(8,24,19,.2); }
.village-visual img { position:absolute;top:50%;left:0;width:500%;max-width:none;height:auto;image-rendering:pixelated;filter:drop-shadow(0 12px 13px rgba(0,0,0,.2));transform:translate(var(--village-position,0%),-50%);will-change:transform; }
.world-layer-card h3,.village-card h3,.season-card h3,.raid-card h3,.class-summary h3 { margin:3px 0 5px;font-family:ui-serif,"Yu Mincho",serif;font-size:19px; }
.world-layer-card p,.village-card p,.season-card p,.raid-card p,.class-summary p { margin:0;color:rgba(255,255,255,.62);font-size:12px;line-height:1.55; }
.legacy-progress,.season-progress,.raid-hp { margin:12px 0 5px; }
.legacy-progress > span,.season-progress > span { background:linear-gradient(90deg,#78ad89,#dfc468); }
.world-layer-card > div:last-child > strong,.season-card > div:last-child > strong,.raid-card > div:last-child > strong { font:800 11px ui-monospace,monospace;color:rgba(255,255,255,.68); }
.world-roadmap { display:grid;grid-template-columns:repeat(4,1fr);gap:8px; }
.world-node { display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-muted);opacity:.55; }
.world-node.unlocked { opacity:1; }.world-node.current { border-color:var(--sage);box-shadow:0 0 0 2px color-mix(in srgb,var(--sage) 12%,transparent); }
.world-node > b { display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:var(--surface-raised);color:var(--sage-strong); }
.world-node strong,.world-node small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.world-node strong{font-size:10px}.world-node small{margin-top:2px;color:var(--ink-faint);font-size:8px}
.rare-record,.archive-section,.skill-tree { display:grid;gap:9px; }.variant-list { display:flex;flex-wrap:wrap;gap:7px; }.variant-list > span { padding:7px 9px;border:1px solid color-mix(in srgb,var(--butter) 35%,var(--line));border-radius:9px;background:var(--butter-pale);color:#8f6c1d;font-size:10px;font-weight:800; }
.village-material { margin-top:11px;color:#e7cb7c;font-size:11px;font-weight:800; }.village-card button { margin-top:8px;padding:9px 12px;border-radius:9px;background:#d2b35d;color:#24362d;font-size:11px;font-weight:900; }.village-card button:disabled { opacity:.45; }
.building-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:8px; }.building-card { display:grid;gap:3px;justify-items:center;padding:11px 6px;border:1px solid var(--line);border-radius:11px;background:var(--surface-muted);text-align:center;opacity:.5; }.building-card.built{opacity:1;border-color:color-mix(in srgb,var(--sage) 28%,var(--line))}.building-card span{color:var(--sage);font-size:17px}.building-card strong{font-size:9px}.building-card small{min-height:2.6em;color:var(--ink-faint);font-size:8px;line-height:1.3}
.class-summary { display:flex;justify-content:space-between;gap:12px;align-items:center;padding:15px 17px;border-radius:15px;background:linear-gradient(135deg,#263c32,#1b2d25);color:#f8f2df; }.class-summary > strong { padding:6px 9px;border:1px solid rgba(255,255,255,.12);border-radius:9px;color:#ecd175;font-size:12px; }
#active-class-name { display:flex;align-items:center;gap:9px; }
.class-emblem { display:block;width:46px;height:46px;flex:0 0 auto;background-image:url("assets/class-emblems-strip.png?v=74");background-position:var(--class-position,0%) center;background-repeat:no-repeat;background-size:500% 100%;image-rendering:pixelated;filter:drop-shadow(0 4px 4px rgba(20,43,32,.18)); }
.active-class-emblem { width:38px;height:38px;filter:drop-shadow(0 4px 5px rgba(0,0,0,.25)); }
.class-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:8px; }.class-card { display:grid;gap:7px;justify-items:center;padding:12px 7px;border:1px solid var(--line);border-radius:12px;background:var(--surface-muted);text-align:center; }.class-card.active{border-color:var(--sage);background:var(--sage-wash)}.class-card strong,.class-card small{display:block}.class-card strong{font-size:11px}.class-card small{margin-top:3px;color:var(--ink-faint);font-size:8px}
.skill-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }.skill-card { display:flex;justify-content:space-between;gap:8px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:11px;background:var(--surface-muted);text-align:left; }.skill-card:disabled{opacity:.55}.skill-card strong,.skill-card small{display:block}.skill-card strong{font-size:11px}.skill-card small{margin-top:3px;color:var(--ink-faint);font-size:8px;line-height:1.4}.skill-card>b{color:var(--sage-strong);font:900 10px ui-monospace,monospace;white-space:nowrap}
.season-card { grid-template-columns:70px minmax(0,1fr); }.season-mark { display:grid;place-items:center;width:64px;height:64px;border:1px solid rgba(232,203,113,.25);border-radius:19px;background:rgba(255,255,255,.05);color:#efd277;font-size:28px; }.season-tier-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }.season-tier { display:grid;grid-template-columns:31px 1fr;gap:3px 8px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:11px;background:var(--surface-muted); }.season-tier>b{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--surface-raised);color:var(--ink-faint)}.season-tier.earned{border-color:color-mix(in srgb,var(--butter) 42%,var(--line));background:var(--butter-pale)}.season-tier.earned>b{color:#947019}.season-tier strong{font-size:11px}.season-tier small{color:var(--ink-faint);font-size:9px}
.archive-list { display:grid;grid-template-columns:repeat(2,1fr);gap:7px; }.archive-list article { display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-muted); }.archive-list span,.archive-list small{color:var(--ink-faint);font-size:8px}.archive-list strong{overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.chronicle-cover { display:grid;place-items:center;min-height:180px;padding:24px;border:1px solid rgba(225,194,101,.35);border-radius:18px;background:radial-gradient(circle at 50% 35%,rgba(226,196,102,.13),transparent 35%),linear-gradient(145deg,#273a31,#17251f);color:#f4e7b9;text-align:center;box-shadow:inset 0 0 0 5px rgba(255,255,255,.025); }.chronicle-cover span{font-family:ui-serif,"Yu Mincho",serif;font-size:14px;letter-spacing:.25em}.chronicle-cover strong{font:900 42px ui-serif,"Yu Mincho",serif}.chronicle-cover p{margin:4px 0 0;color:rgba(255,255,255,.6);font-size:12px}.chronicle-cover select{margin-top:12px;padding:7px 10px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:rgba(255,255,255,.07);color:#f4e7b9;font-size:11px}
.chronicle-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:8px; }.chronicle-stats>div{padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-muted)}.chronicle-stats span,.chronicle-stats strong{display:block}.chronicle-stats span{color:var(--ink-faint);font-size:9px}.chronicle-stats strong{margin-top:4px;font-size:13px}
.chronicle-months { display:grid;grid-template-columns:repeat(6,1fr);gap:7px; }.chronicle-month { display:flex;justify-content:space-between;padding:8px;border:1px solid var(--line);border-radius:9px;color:var(--ink-faint);font-size:9px}.chronicle-month.has-record{border-color:color-mix(in srgb,var(--sage) 35%,var(--line));background:var(--sage-wash);color:var(--sage-strong)}
.raid-card { grid-template-columns:190px minmax(0,1fr); }.raid-boss-sprite { min-height:145px;background:url("assets/weekly-raid-boss-strip.png") 0 center / 400% 100% no-repeat;image-rendering:pixelated;filter:drop-shadow(0 8px 8px rgba(0,0,0,.35)) drop-shadow(0 0 15px rgba(212,176,69,.25));animation:monster-idle 2s ease-in-out infinite}.raid-boss-sprite.defeated{background-position:100% center;animation:none;filter:grayscale(.35) opacity(.7)}.raid-hp>span{background:linear-gradient(90deg,#b94949,#e09158)}
.raid-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:8px; }.raid-stats>div{padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-muted)}.raid-stats span,.raid-stats strong{display:block}.raid-stats span{color:var(--ink-faint);font-size:9px}.raid-stats strong{margin-top:3px;font-size:15px}.raid-note{margin:0;padding:10px 12px;border-radius:10px;background:var(--surface-muted);color:var(--ink-faint);font-size:10px;line-height:1.5}.raid-claim{min-height:40px;padding:9px 14px;border-radius:11px;background:var(--sage-strong);color:var(--surface-solid);font-size:11px;font-weight:850}.raid-claim:disabled{background:var(--surface-muted);color:var(--ink-faint);opacity:.72}
.settings-body { display: grid; gap: 12px; padding: 4px 24px 24px; overflow: auto; }
.settings-group { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-muted); }
.settings-group strong { font-size: 11px; }
.settings-group p { margin: 3px 0 0; color: var(--ink-faint); font-size: 9px; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.settings-button { display: inline-flex; align-items: center; justify-content: center; width: fit-content; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface-raised); color: var(--ink-soft); font-size: 9px; font-weight: 700; text-decoration: none; }
.settings-button:hover { border-color: var(--sage); color: var(--sage-strong); }
.cloud-settings { gap: 11px; border-color: color-mix(in srgb,var(--sage) 20%,var(--line)); background: color-mix(in srgb,var(--sage-wash) 58%,var(--surface-muted)); }
.cloud-settings-heading { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.cloud-settings-icon { width: 42px; height: 42px; }
.cloud-settings-heading strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.cloud-settings-heading p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-sync-pill { padding: 4px 7px; border-radius: 999px; background: var(--surface-raised); color: var(--ink-faint); font-size: 8px; font-weight: 800; white-space: nowrap; }
.cloud-sync-pill.synced { background: var(--sage-pale); color: var(--sage-strong); }
.cloud-sync-pill.syncing, .cloud-sync-pill.pending { background: var(--butter-pale); color: color-mix(in srgb,var(--butter) 75%,var(--ink)); }
.cloud-sync-pill.error { background: var(--red-pale); color: var(--red); }
.settings-button.cloud-primary { border-color: var(--sage-strong); background: var(--sage-strong); color: var(--surface-solid); }
.experience-settings { border-color:color-mix(in srgb,var(--butter) 35%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--butter-pale) 30%,var(--surface-muted)),var(--surface-muted)); }
.experience-control { display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-raised); }
.experience-control.compact { margin-top:4px; }
.experience-control > span:nth-child(2) strong,.experience-control > span:nth-child(2) small { display:block; }
.experience-control > span:nth-child(2) strong { font-size:14px; }
.experience-control > span:nth-child(2) small { margin-top:2px;color:var(--ink-faint);font-size:12px; }
.experience-icon { display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--sage-wash);color:var(--sage-strong); }
.experience-icon.music { background:var(--butter-pale);color:#9b741e; }
.experience-icon .icon { width:19px;height:19px; }
.settings-switch { position:relative;display:block;width:46px;height:27px;cursor:pointer; }
.settings-switch input { position:absolute;opacity:0;pointer-events:none; }
.settings-switch i { position:absolute;inset:0;border-radius:999px;background:var(--line-strong);transition:background .2s; }
.settings-switch i::after { content:"";position:absolute;top:4px;left:4px;width:19px;height:19px;border-radius:50%;background:var(--surface-raised);box-shadow:0 2px 5px rgba(0,0,0,.18);transition:transform .22s var(--ease); }
.settings-switch input:checked + i { background:var(--sage); }
.settings-switch input:checked + i::after { transform:translateX(19px); }
.settings-switch input:focus-visible + i { box-shadow:0 0 0 3px color-mix(in srgb,var(--sage) 20%,transparent); }
.settings-switch span { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); }
.volume-control { display:grid;grid-template-columns:72px minmax(0,1fr) 40px;align-items:center;gap:9px;padding:0 4px; }
.volume-control span,.volume-control b { color:var(--ink-soft);font-size:12px;font-weight:750; }
.volume-control b { text-align:right;font-family:ui-monospace,monospace; }
.volume-control input { width:100%;accent-color:var(--sage-strong); }
.sound-preview { display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:38px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface-raised);color:var(--sage-strong);font-size:13px;font-weight:800; }
.sound-preview:disabled { color:var(--ink-faint);opacity:.6; }
.sound-preview .icon { width:15px;height:15px; }
.language-settings label { display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:13px; }
.language-settings label span { color:var(--ink-soft);font-size:13px;font-weight:750; }
.language-settings select { min-height:40px;padding:8px 11px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface-raised);color:var(--ink);font-size:14px; }
.platform-settings { border-color:color-mix(in srgb,var(--sage) 34%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--sage-wash) 64%,var(--surface-muted)),var(--surface-muted)); }
.platform-heading { display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px; }
.platform-mark { display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--sage-strong);color:var(--surface-solid);font-size:19px;font-weight:900; }
.platform-heading > div > strong { display:block;font-size:14px; }
.platform-heading > b { padding:4px 7px;border-radius:999px;background:var(--surface-raised);color:var(--sage-strong);font:850 9px ui-monospace,monospace;white-space:nowrap; }
.platform-route-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.platform-route-grid article { display:grid;gap:3px;padding:11px;border:1px solid var(--line);border-radius:11px;background:var(--surface-raised); }
.platform-route-grid article > span { color:var(--ink-faint);font-size:9px;font-weight:850;letter-spacing:.06em;text-transform:uppercase; }
.platform-route-grid article > strong { font-size:13px; }
.platform-route-grid article > small { color:var(--ink-faint);font-size:9.5px;line-height:1.55; }
.platform-install { width:100%;min-height:40px;font-size:12px; }
.platform-status { color:var(--ink-faint);font-size:9px;line-height:1.55; }
.adventurer-pass { position:relative; overflow:hidden; border-color:color-mix(in srgb,var(--butter) 46%,var(--line)); background:linear-gradient(145deg,color-mix(in srgb,var(--butter-pale) 50%,var(--surface-muted)),var(--surface-muted)); }
.adventurer-pass::before { content:""; position:absolute; top:-52px; right:-40px; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle,rgba(218,180,72,.18),transparent 67%); pointer-events:none; }
.adventurer-pass.active { border-color:#b99431; box-shadow:0 0 0 2px rgba(208,171,61,.12); }
.pass-heading { position:relative; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:start; gap:10px; }
.pass-emblem { display:grid; place-items:center; width:42px;height:42px;border:1px solid rgba(189,148,39,.28);border-radius:13px;background:#2d392f;color:#f0cb65;font-size:20px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.04); }
.pass-heading .kicker { display:block; margin-bottom:3px; color:#a27a1c; font-size:8px; }
.pass-heading > div > strong { display:block; font-family:ui-serif,"Yu Mincho",serif; font-size:16px; }
.pass-heading > b { padding:4px 7px;border-radius:999px;background:var(--butter-pale);color:#977015;font-size:9px;white-space:nowrap; }
.pass-price { display:flex;align-items:baseline;gap:8px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--butter) 28%,var(--line));border-radius:11px;background:var(--surface-raised); }
.pass-price strong { color:#9a721a;font-family:ui-serif,"Yu Mincho",serif;font-size:24px; }
.pass-price span { color:var(--ink-faint);font-size:11px;font-weight:700; }
.pass-benefits { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px;margin:0;padding:0;list-style:none; }
.pass-benefits li { position:relative;padding-left:17px;color:var(--ink-soft);font-size:11px;line-height:1.45; }
.pass-benefits li::before { content:"✓";position:absolute;left:0;color:#aa8125;font-weight:900; }
.pass-actions { display:flex;flex-wrap:wrap;gap:7px; }
.settings-button.pass-primary { border-color:#9e7620;background:#9e7620;color:white; }
.pass-note { color:var(--ink-faint);font-size:10px;line-height:1.55; }
.addon-preview { display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--butter) 30%,var(--line)); }.addon-preview strong{width:100%;font-size:10px}.addon-preview span{padding:5px 7px;border-radius:7px;background:var(--surface-raised);color:var(--ink-faint);font-size:9px}
.auth-privacy { flex: 1 1 210px; align-self: center; color: var(--ink-faint); font-size: 8px; line-height: 1.5; }
.cloud-last-sync { color: var(--ink-faint); font-size: 8px; }
.sharing-settings { border-color:color-mix(in srgb,var(--sage) 34%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--sage-wash) 70%,var(--surface-muted)),var(--surface-muted)); }
.sharing-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:12px; }
.sharing-heading > div > strong { font-size:15px; }
.sharing-heading > span { padding:4px 7px;border-radius:999px;background:var(--sage-strong);color:var(--surface-solid);font:850 9px ui-monospace,monospace;white-space:nowrap; }
.sharing-email-form { display:grid;gap:7px;padding:11px 0;border-block:1px solid var(--line); }
.sharing-email-form > label { color:var(--ink-soft);font-size:14px;font-weight:800; }
.sharing-email-form > div { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px; }
.sharing-email-form input { min-width:0;height:40px;padding:0 11px;border:1px solid var(--line-strong);border-radius:10px;outline:0;background:var(--surface-raised);color:var(--ink);font-size:14px; }
.sharing-email-form input:focus { border-color:var(--sage);box-shadow:0 0 0 3px color-mix(in srgb,var(--sage) 13%,transparent); }
.sharing-email-form button,.generated-invite button { padding:0 14px;border-radius:10px;background:var(--sage-strong);color:var(--surface-solid);font-size:13px;font-weight:800; }
.invite-code-actions { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.invite-code-actions p { flex:1 1 180px;line-height:1.55; }
.generated-invite { display:grid;gap:6px;padding:11px;border:1px solid color-mix(in srgb,var(--butter) 40%,var(--line));border-radius:11px;background:var(--butter-pale); }
.generated-invite > span,.generated-invite > small { color:var(--ink-soft);font-size:12px; }
.generated-invite > div { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center; }
.generated-invite strong { overflow-wrap:anywhere;color:#7f631c;font:900 17px ui-monospace,monospace;letter-spacing:.05em; }
.sharing-status { min-height:1.4em;margin:0 !important;color:var(--red) !important;font-size:12px !important; }
.sharing-status.success { color:var(--sage-strong) !important; }
.sharing-list-section { display:grid;gap:7px; }
.sharing-list-section > div:first-child { display:flex;justify-content:space-between;gap:10px; }
.sharing-list-section > div:first-child strong { font-size:13px; }
.sharing-list-section > div:first-child small { color:var(--ink-faint);font-size:12px; }
.sharing-list { display:grid;gap:6px; }
.sharing-list-empty { padding:10px;border:1px dashed var(--line-strong);border-radius:10px;color:var(--ink-faint);font-size:12px;text-align:center; }
.sharing-row { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-raised); }
.sharing-row strong,.sharing-row small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.sharing-row strong { font-size:13px; }
.sharing-row small { margin-top:2px;color:var(--ink-faint);font-size:11px; }
.sharing-row button { padding:6px 8px;border:1px solid var(--line-strong);border-radius:8px;color:var(--red);font-size:12px;font-weight:750; }
.player-name-form { display: grid; gap: 7px; padding: 11px 0 13px; border-block: 1px solid var(--line); }
.player-name-form > label { color: var(--ink-soft); font-size: 14px; font-weight: 800; }
.player-name-form > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.player-name-form input { min-width: 0; height: 40px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 10px; outline: 0; background: var(--surface-raised); font-size: 15px; font-weight: 700; }
.player-name-form input:focus { border-color: var(--sage); box-shadow: 0 0 0 3px color-mix(in srgb,var(--sage) 12%,transparent); }
.player-name-form button { padding: 0 15px; border-radius: 10px; background: var(--sage-strong); color: var(--surface-solid); font-size: 13px; font-weight: 800; }
.player-name-form small { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-faint); font-size: 12px; }
.player-name-form small b { color: var(--sage); font-family: ui-monospace,monospace; white-space: nowrap; }
.character-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.character-choice { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 8px; min-height: 64px; padding: 5px 11px 5px 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); text-align: left; }
.character-choice.active { border-color: var(--sage); box-shadow: 0 0 0 2px color-mix(in srgb,var(--sage) 15%,transparent); }
.character-choice strong { font-size: 14px; }
.character-preview { width: 48px; height: 58px; background-repeat: no-repeat; background-size: 400% 100%; background-position: 0 0; image-rendering: pixelated; }
.character-preview.male { background-image: url("assets/pixel-hero-male-strip.png"); }
.character-preview.female { background-image: url("assets/pixel-hero-female-strip.png"); }
.file-button input { display: none; }
.danger-zone { background: var(--red-pale); }
.settings-button.danger { border-color: color-mix(in srgb,var(--red) 35%,transparent); color: var(--red); }
.settings-button.danger.solid { background: var(--red); color: white; }
.reset-confirm { padding-top: 10px; border-top: 1px solid color-mix(in srgb,var(--red) 25%,transparent); }
.reset-confirm > div { display: flex; gap: 7px; margin-top: 9px; }
.storage-note { margin: 0; color: var(--ink-faint); font-size: 8px; text-align: center; }
.reflection-modal { width: min(760px,100%); }
.notices-modal { width:min(620px,100%); }
.notices-modal .modal-heading p { margin:5px 0 0;color:var(--ink-faint);font-size:13px;line-height:1.5; }
.notices-body { display:grid;gap:10px;padding:2px 24px 26px; }
.notice-card { display:grid;gap:7px;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--surface-muted); }
.notice-card.latest { border-color:color-mix(in srgb,var(--butter) 45%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--butter-pale) 42%,var(--surface-muted)),var(--surface-muted)); }
.notice-card > div { display:flex;align-items:center;justify-content:space-between;gap:10px; }
.notice-card > div span { color:var(--ink-faint);font:800 11px ui-monospace,monospace;letter-spacing:.05em; }
.notice-card > div b { padding:3px 7px;border-radius:999px;background:#d6b858;color:#24362d;font-size:9px; }
.notice-card h3 { margin:0;font-family:ui-serif,"Yu Mincho",serif;font-size:17px;font-weight:650; }
.notice-card p { margin:0;color:var(--ink-soft);font-size:13px;line-height:1.65; }
.notice-feedback-button { display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:42px;margin-top:4px;border-radius:11px;background:var(--sage-strong);color:var(--surface-solid);font-size:13px;font-weight:850; }
.notice-feedback-button .icon { width:15px;height:15px; }
.reflection-heading { padding-bottom: 16px; }
.reflection-heading p { margin: 4px 0 0; color: var(--ink-faint); font-size: 13px; }
.reflection-body { display: grid; gap: 23px; padding: 0 25px 28px; }
.reflection-summary { overflow: hidden; border: 1px solid rgba(221,194,107,.2); border-radius: 18px; background: linear-gradient(145deg,#233a31,#172820); color: #f7f1df; }
.reflection-stats { display: grid; grid-template-columns: repeat(4,1fr); }
.reflection-stats > div { display: grid; padding: 15px 16px; border-right: 1px solid rgba(255,255,255,.08); }
.reflection-stats > div:last-child { border-right: 0; }
.reflection-stats span, .reflection-stats small { color: rgba(255,255,255,.48); font-size: 12px; }
.reflection-stats strong { margin: 2px 0; color: #ead78f; font-family: ui-serif,"Yu Mincho",serif; font-size: 23px; font-weight: 650; }
.reflection-guide { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); }
.reflection-guide .insight-icon { background: rgba(234,215,143,.13); color: #ead78f; }
.reflection-guide strong, .reflection-guide small { display: block; }
.reflection-guide strong { font-size: 14px; font-weight: 650; }
.reflection-guide small { margin-top: 2px; color: rgba(255,255,255,.5); font-size: 12px; }
.reflection-trends { padding:15px;border:1px solid var(--line);border-radius:16px;background:var(--surface-muted); }
.reflection-trend-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:7px; }
.reflection-trend-grid > div { padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-raised); }
.reflection-trend-grid span,.reflection-trend-grid strong { display:block; }
.reflection-trend-grid span { color:var(--ink-faint);font-size:10px;font-weight:750; }
.reflection-trend-grid strong { margin-top:4px;color:var(--sage-strong);font-size:15px; }
.reflection-trends > p { margin:10px 1px 0;color:var(--ink-soft);font-size:12px;line-height:1.6; }
.reflection-daily { padding:15px;border:1px solid color-mix(in srgb,var(--sage) 22%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--sage-wash) 35%,var(--surface-raised)); }
.reflection-daily .collection-section-heading { align-items:center;margin-bottom:11px; }
.reflection-daily .collection-section-heading h3 { margin:0;font-size:14px; }
.reflection-daily .collection-section-heading p { margin:3px 0 0;color:var(--ink-faint);font-size:11px; }
.reflection-date-picker input { min-height:36px;padding:6px 9px;border:1px solid var(--line);border-radius:9px;background:var(--surface-raised);color:var(--ink-soft);font-size:12px;font-weight:700; }
.reflection-daily-summary { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;border-radius:10px;background:var(--surface-raised); }
.reflection-daily-summary strong { font-size:13px; }
.reflection-daily-summary span { color:var(--sage-strong);font-size:11px;font-weight:750; }
.reflection-daily-list { display:grid;gap:6px;margin-top:8px; }
.reflection-daily-item { display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-raised); }
.reflection-daily-item > i { width:8px;height:8px;border-radius:50%;background:var(--daily-color,var(--sage)); }
.reflection-daily-item strong,.reflection-daily-item small { display:block; }
.reflection-daily-item strong { overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap; }
.reflection-daily-item small { margin-top:2px;color:var(--ink-faint);font-size:10px; }
.reflection-daily-item time { color:var(--ink-faint);font-size:10px;font-weight:700; }
.reflection-daily-empty { padding:16px 10px;color:var(--ink-faint);font-size:11px;text-align:center; }
#reflection-form { display: grid; gap: 17px; }
.mood-field { padding: 0; border: 0; }
.mood-field legend, .reflection-fields label > span { display: block; margin-bottom: 7px; color: var(--ink-soft); font-size: 14px; font-weight: 750; }
.mood-choices { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.mood-choice { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-muted); cursor: pointer; }
.mood-choice input { position: absolute; opacity: 0; pointer-events: none; }
.mood-choice span { font-size: 18px; }
.mood-choice strong { font-size: 14px; }
.mood-choice.active { border-color: var(--sage); background: var(--sage-wash); box-shadow: 0 0 0 2px color-mix(in srgb,var(--sage) 12%,transparent); }
.reflection-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.reflection-fields label { min-width: 0; }
.reflection-fields .improvement-field { grid-column: 1 / -1; }
.reflection-fields textarea { width: 100%; resize: vertical; min-height: 72px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; outline: 0; background: var(--surface-muted); font-size: 14px; line-height: 1.55; }
.reflection-fields textarea:focus { border-color: var(--sage); background: var(--surface-raised); box-shadow: 0 0 0 3px color-mix(in srgb,var(--sage) 12%,transparent); }
.reflection-fields .improvement-field textarea { border-color: color-mix(in srgb,var(--butter) 35%,var(--line)); background: color-mix(in srgb,var(--butter-pale) 42%,var(--surface-muted)); }
.reflection-save { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 16px; border-radius: 11px; background: var(--sage-strong); color: var(--surface-solid); font-size: 14px; font-weight: 800; }
.reflection-save .icon { width: 16px; height: 16px; }
.reflection-history { display: grid; gap: 7px; }
.reflection-log { padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-muted); }
.reflection-log > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reflection-log strong { font-size: 13px; }
.reflection-log span { color: var(--ink-faint); font-size: 12px; }
.reflection-log p { margin: 5px 0 0; color: var(--ink-soft); font-size: 13px; }
.collection-modal { width: min(900px,100%); max-width:100vw; overflow-x:hidden; }
.collection-heading { position: sticky; z-index: 4; top: 0; background: var(--surface-raised); }
.collection-body { display: grid; min-width:0; gap: 28px; padding: 4px 24px 28px; }
.collection-body > section { min-width:0; max-width:100%; }
.collection-lead { padding:16px;border:1px solid color-mix(in srgb,var(--sage) 30%,var(--line));border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--sage-wash) 62%,var(--surface-muted)),var(--surface-muted)); }
.craft-card { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 18px; border: 1px solid rgba(210,177,92,.3); border-radius: 18px; background: linear-gradient(135deg,#253c32,#172820); color: #f6f0dc; }
.craft-stone { display: grid; place-items: center; width: 60px; height: 60px; font-size: 46px; filter: drop-shadow(0 7px 7px rgba(0,0,0,.25)); }
.craft-copy h3 { margin: 2px 0 3px; font-family: ui-serif,"Yu Mincho",serif; font-size: 18px; }
.craft-copy p { margin: 0 0 9px; color: rgba(255,255,255,.58); font-size: 12px; }
.craft-copy > strong { display: block; margin-top: 5px; color: #d8c47f; font-family: ui-monospace,monospace; font-size: 12px; }
.craft-bar > span { background: linear-gradient(90deg,#8d9a94,#dac577); }
.craft-card > button { min-width: 125px; padding: 10px 13px; border-radius: 10px; background: #dcc77e; color: #27372f; font-size: 13px; font-weight: 850; }
.craft-card > button:disabled { background: rgba(255,255,255,.08); color: rgba(255,255,255,.38); cursor: default; }
.collection-section-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.collection-section-heading h3 { margin: 0; font-size: 16px; }
.collection-section-heading span, .collection-section-heading strong { color: var(--ink-faint); font-size: 12px; }
.relic-list { display: flex; flex-wrap: wrap; gap: 8px; }
.relic-chip { display: grid; min-width: 175px; padding: 10px 12px; border: 1px solid color-mix(in srgb,#cc7ee6 45%,var(--line)); border-radius: 11px; background: color-mix(in srgb,#8c4aa8 7%,var(--surface-muted)); }
.relic-chip b { color: #aa68c6; font-size: 10px; letter-spacing: .08em; }
.relic-chip strong { font-size: 13px; }
.relic-chip small { color: var(--ink-faint); font-size: 11px; }
.inventory-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }
.inventory-card { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--surface-muted);content-visibility:auto;contain-intrinsic-size:150px; }
.inventory-card.has-weapon-art { grid-template-columns:62px minmax(0,1fr) auto; }
.inventory-weapon-art { grid-row:1 / span 2;width:62px;height:62px;align-self:start;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 4px 3px rgba(25,36,30,.24)); }
.inventory-weapon-art.rarity-uncommon { filter:drop-shadow(0 0 6px rgba(76,197,111,.44)) drop-shadow(0 4px 3px rgba(25,36,30,.24)); }
.inventory-weapon-art.rarity-rare { filter:drop-shadow(0 0 7px rgba(75,164,239,.52)) drop-shadow(0 4px 3px rgba(25,36,30,.24)); }
.inventory-weapon-art.rarity-epic { filter:drop-shadow(0 0 8px rgba(181,95,238,.58)) drop-shadow(0 4px 3px rgba(25,36,30,.24)); }
.inventory-weapon-art.rarity-legendary { filter:drop-shadow(0 0 9px rgba(244,190,40,.78)) drop-shadow(0 4px 3px rgba(25,36,30,.24)); }
.inventory-card.equipped { border-color:color-mix(in srgb,var(--sage) 48%,var(--line));background:var(--sage-wash); }
.inventory-card header small,.inventory-card header strong,.inventory-card header span { display:block; }
.inventory-card header small { color:var(--ink-faint);font-size:10px;font-weight:850; }
.inventory-card header strong { margin-top:2px;font-size:13px; }
.inventory-card header span { margin-top:3px;color:var(--ink-faint);font-size:10px; }
.inventory-card .affix-list { display:flex;flex-wrap:wrap;gap:4px;grid-column:1/-1; }
.inventory-card.has-weapon-art .affix-list { grid-column:2/-1; }
.inventory-card .affix-list span { padding:4px 6px;border-radius:7px;background:var(--surface-raised);color:var(--sage-strong);font-size:10px;font-weight:750; }
.inventory-card .affix-list .weapon-trait { flex-basis:100%; color:var(--ink-soft); line-height:1.45; }
.inventory-card .affix-list .weapon-trait.class-match { background:color-mix(in srgb,var(--butter-pale) 58%,var(--surface-raised)); color:#98751e; }
.inventory-actions { display:grid;align-content:start;gap:5px; }
.inventory-actions button { padding:6px 8px;border-radius:8px;background:var(--surface-raised);color:var(--ink-soft);font-size:10px;font-weight:750; }
.inventory-actions button.primary { background:var(--sage-strong);color:var(--surface-solid); }
.inventory-actions button:disabled { opacity:.45; }
.subtask-list { display:flex;flex-wrap:wrap;gap:5px;margin-top:6px; }
.subtask-check { display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:4px 7px;border:1px solid var(--line);border-radius:8px;background:var(--surface-muted);color:var(--ink-soft);font-size:10px; }
.subtask-check i { width:10px;height:10px;border:1px solid var(--line-strong);border-radius:3px;background:var(--surface-raised); }
.subtask-check.done { color:var(--ink-faint);text-decoration:line-through; }.subtask-check.done i{border-color:var(--sage);background:var(--sage);box-shadow:inset 0 0 0 2px var(--surface-raised)}
.repeat-badge { color:var(--sage-strong);font-weight:750; }
.collection-empty { margin: 0; color: var(--ink-faint); font-size: 13px; }
.collection-description { margin: -4px 0 11px; color: var(--ink-faint); font-size: 13px; }
.inventory-slot-tabs { display:flex;gap:6px;margin:0 0 9px;padding:4px;overflow-x:auto;border-radius:11px;background:var(--surface-muted);scrollbar-width:none; }
.inventory-slot-tabs::-webkit-scrollbar { display:none; }
.inventory-slot-tabs button { display:flex;flex:1 0 82px;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:6px 10px;border:1px solid transparent;border-radius:8px;color:var(--ink-faint);font-size:11px;font-weight:800;white-space:nowrap; }
.inventory-slot-tabs button.active { border-color:var(--line);background:var(--surface-raised);color:var(--sage-strong);box-shadow:var(--shadow-soft); }
.inventory-slot-tabs b { display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:color-mix(in srgb,var(--sage) 10%,transparent);font-size:9px; }
.inventory-toolbar { display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface-muted); }
.inventory-toolbar label { display:flex;align-items:center;gap:7px;color:var(--ink-faint);font-size:10px;font-weight:800; }
.inventory-toolbar select { min-height:30px;padding:0 25px 0 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface-raised);color:var(--ink);font-size:10px;font-weight:750; }
.inventory-favorite-filter { padding:0 4px; }
.inventory-favorite-filter input { accent-color:var(--butter); }
.inventory-toolbar > button { margin-left:auto;padding:8px 10px;border-radius:9px;background:var(--sage-strong);color:var(--surface-solid);font-size:10px;font-weight:850; }
.inventory-dismantle-note { margin:0 0 11px;padding:8px 10px;border-left:3px solid color-mix(in srgb,var(--butter) 62%,var(--line));border-radius:0 8px 8px 0;background:color-mix(in srgb,var(--butter-pale) 42%,var(--surface-muted));color:var(--ink-soft);font-size:10px;line-height:1.55; }
.inventory-card.favorite { border-color:color-mix(in srgb,var(--butter) 50%,var(--line)); }
.inventory-card.new-item { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--butter) 34%,transparent); }
.inventory-new { display:inline-block;margin-left:4px;padding:2px 5px;border-radius:999px;background:var(--butter-pale);color:color-mix(in srgb,var(--butter) 62%,var(--ink));font-size:8px;font-weight:900;line-height:1; }
.inventory-actions .favorite-toggle[aria-pressed="true"] { background:color-mix(in srgb,var(--butter-pale) 65%,var(--surface-raised));color:color-mix(in srgb,var(--butter) 55%,var(--ink)); }
.companion-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.companion-card { display: grid; justify-items: center; min-width: 0; padding: 8px 7px 11px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-muted); text-align: center; transition: border-color .2s, transform .2s, background .2s; }
.companion-card.unlocked:hover { border-color: var(--sage); background: var(--surface-raised); transform: translateY(-2px); }
.companion-card.selected { border-color: color-mix(in srgb,var(--butter) 62%,var(--line)); background: color-mix(in srgb,var(--butter-pale) 50%,var(--surface-muted)); box-shadow: 0 0 0 2px color-mix(in srgb,var(--butter) 12%,transparent); }
.companion-card:disabled { cursor: default; }
.companion-portrait { width: 74px; height: 83px; background: url("assets/egg-companions.png") center / 600% auto no-repeat; background-position-y: center !important; image-rendering: pixelated; filter: drop-shadow(0 5px 4px rgba(0,0,0,.15)); }
.companion-card.locked .companion-portrait { filter: grayscale(1) brightness(0); opacity: .13; }
.companion-card > span:last-child { min-width: 0; width: 100%; }
.companion-card small, .companion-card strong, .companion-card em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.companion-card small { color: var(--ink-faint); font-size: 10px; }
.companion-card strong { font-size: 12px; }
.companion-card em { margin-top: 2px; color: var(--ink-faint); font-size: 10px; font-style: normal; }
.companion-card.selected em { color: color-mix(in srgb,var(--butter) 60%,var(--ink)); font-weight: 800; }
.monster-dex-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.dex-stage-tabs { display:flex;gap:6px;margin:0 0 11px;padding:4px;overflow-x:auto;border-radius:11px;background:color-mix(in srgb,var(--sage) 7%,var(--surface-muted));scrollbar-width:none; }
.dex-stage-tabs::-webkit-scrollbar { display:none; }
.dex-stage-tabs button { flex:0 0 auto;min-width:72px;min-height:34px;padding:6px 9px;border:1px solid transparent;border-radius:8px;color:var(--ink-faint);font-size:10px;font-weight:800;white-space:nowrap; }
.dex-stage-tabs button.active { border-color:var(--line);background:var(--surface-raised);color:var(--sage-strong);box-shadow:var(--shadow-sm); }
.dex-card { display: grid; grid-template-columns: 76px minmax(0,1fr); align-items: center; min-height: 92px; padding: 7px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-muted); content-visibility:auto; contain-intrinsic-size:92px; }
.dex-card.boss { border-color: color-mix(in srgb,var(--butter) 45%,var(--line)); }
.dex-sprite { display:block; width:70px; height:82px; object-fit:contain; object-position:center; image-rendering:pixelated; filter:drop-shadow(0 5px 4px rgba(0,0,0,.16)); }
.dex-card.asset-image-failed::before { content:"✦";display:grid;place-items:center;width:70px;height:82px;color:var(--butter);font-size:22px; }
.dex-card.unlocked .dex-sprite { filter:saturate(1.08) drop-shadow(0 5px 4px rgba(0,0,0,.16)); }
.dex-card.locked .dex-sprite { filter: grayscale(1) brightness(.48) contrast(.72); opacity: .44; }
.dex-card div { min-width: 0; }
.dex-card small, .dex-card strong, .dex-card div > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dex-card small { color: var(--ink-faint); font-size: 10px; }
.dex-card strong { font-size: 12px; }
.dex-card div > span { margin-top: 3px; color: var(--ink-faint); font-size: 10px; }
.command-item:hover, .command-item.selected { background: var(--sage-wash); }
.command-item-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: var(--surface-muted); color: var(--ink-soft); }
.command-item-icon .icon { width: 15px; height: 15px; }
.command-item strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.command-item small { display: block; overflow: hidden; margin-top: 1px; color: var(--ink-faint); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.command-item > small { padding-left: 10px; }
.command-empty { padding: 38px; color: var(--ink-faint); text-align: center; font-size: 11px; }
.command-footer { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--line); background: var(--surface-muted); color: var(--ink-faint); font-size: 8px; }
.command-footer span:last-child { margin-left: auto; }
.command-footer kbd { padding: 0 4px; margin-right: 2px; font-size: 8px; }

.toast-region { position: fixed; z-index: 200; right: 20px; bottom: 20px; display: grid; gap: 8px; width: min(350px, calc(100vw - 40px)); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--ink); color: var(--surface-solid); box-shadow: var(--shadow-md); font-size: 10.5px; opacity: 0; transform: translateY(10px); animation: toast-in .35s var(--ease) forwards; }
.toast.hide { animation: toast-out .3s var(--ease) forwards; }
.toast-icon { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: rgba(255,255,255,.11); }
.toast-icon .icon { width: 13px; height: 13px; }
.toast span:nth-child(2) { flex: 1; }
.toast button { padding: 4px 7px; border-radius: 7px; background: rgba(255,255,255,.1); color: inherit; font-size: 9px; pointer-events: auto; }
@keyframes toast-in { to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

.celebration { position: fixed; z-index: 150; inset: 0; overflow: hidden; pointer-events: none; }
.confetti { position: absolute; top: 45%; left: 50%; width: 7px; height: 9px; border-radius: 2px; background: var(--confetti); animation: confetti-pop .85s var(--ease) forwards; }
@keyframes confetti-pop { 0% { opacity: 1; transform: translate(-50%,-50%) rotate(0) scale(.8); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); } }

body.modal-open { position: fixed; right: 0; left: 0; width: 100%; overflow: hidden; }

.monthly-section { margin: 2px 0 34px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg,color-mix(in srgb,var(--surface-raised) 94%,var(--butter-pale)),var(--surface-raised)); box-shadow: var(--shadow-sm); }
.monthly-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-bottom: 12px; }
.monthly-heading h2 { margin: 4px 0 0; font-family: ui-serif,"Yu Mincho",serif; font-size: 18px; font-weight: 650; }
.monthly-heading-actions { display: flex; align-items: center; gap: 8px; }
.monthly-heading-actions > span { color: var(--ink-faint); font-size: 10px; font-weight: 700; }
.monthly-heading-actions button { display: flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 10px; background: var(--sage-strong); color: var(--surface-solid); font-size: 10px; font-weight: 800; }
.monthly-heading-actions .icon { width: 13px; height: 13px; }
.monthly-reward-preview { display: grid; grid-template-columns: auto auto minmax(0,1fr); align-items: center; gap: 7px 10px; margin-bottom: 11px; padding: 8px 10px; border: 1px solid color-mix(in srgb,var(--butter) 34%,var(--line)); border-radius: 11px; background: color-mix(in srgb,var(--butter-pale) 40%,transparent); }
.monthly-reward-preview span { color: var(--ink-faint); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.monthly-reward-preview strong { color: color-mix(in srgb,var(--butter) 45%,var(--ink)); font-size: 11px; }
.monthly-reward-preview small { overflow: hidden; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.monthly-quest-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.monthly-quest { position: relative; display: grid; gap: 9px; min-width: 0; padding: 13px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--monthly-color) 25%,var(--line)); border-radius: 15px; background: var(--surface-raised); }
.monthly-quest::before { content:""; position:absolute; top:0; right:0; left:0; height:3px; background:var(--monthly-color); }
.monthly-quest.completed { opacity: .72; }
.monthly-quest-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.monthly-month { color: var(--monthly-color); font-size: 9px; font-weight: 850; }
.monthly-quest-top .project-pill { min-width: 0; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.monthly-quest-top .task-row-action { margin-left: auto; }
.monthly-quest-copy { min-width: 0; }
.monthly-quest-copy strong { display:block; overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.monthly-quest-copy p { display:-webkit-box; margin:3px 0 0; overflow:hidden; color:var(--ink-faint); font-size:10px; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.monthly-progress-line { display:flex; align-items:center; gap:8px; }
.monthly-progress-line b { flex:0 0 auto; color:var(--monthly-color); font-family:ui-monospace,monospace; font-size:9px; }
.monthly-steps { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:3px; width:100%; }
.monthly-steps i { height:5px; border-radius:999px; background:var(--surface-muted); }
.monthly-steps i.complete { background:var(--monthly-color); }
.monthly-progress-bar { overflow:hidden; height:3px; border-radius:999px; background:var(--surface-muted); }
.monthly-progress-bar i { display:block; height:100%; background:var(--monthly-color); transition:width .35s var(--ease); }
.monthly-advance { display:flex; align-items:center; justify-content:center; gap:6px; min-height:34px; border-radius:10px; background:color-mix(in srgb,var(--monthly-color) 13%,var(--surface-muted)); color:color-mix(in srgb,var(--monthly-color) 70%,var(--ink)); font-size:10px; font-weight:850; }
.monthly-advance:hover { background:color-mix(in srgb,var(--monthly-color) 21%,var(--surface-muted)); }
.monthly-advance .icon { width:13px; height:13px; }
.monthly-complete-badge { display:flex; align-items:center; justify-content:center; min-height:34px; border-radius:10px; background:var(--sage-wash); color:var(--sage); font-size:10px; font-weight:850; }
.monthly-empty { grid-column:1/-1; display:grid; grid-template-columns:38px 1fr; gap:1px 10px; align-items:center; width:100%; padding:13px; border:1px dashed var(--line-strong); border-radius:14px; background:transparent; text-align:left; }
.monthly-empty > span { grid-row:1/3; display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:var(--sage-wash); color:var(--sage); font-size:20px; }
.monthly-empty strong { font-size:11px; }
.monthly-empty small { color:var(--ink-faint); font-size:9px; }
.wardrobe-section { display:grid; gap:10px; }
.wardrobe-group { display:grid; gap:6px; }
.wardrobe-group > span { color:var(--ink-faint); font-size:9px; font-weight:800; letter-spacing:.08em; }
.wardrobe-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.wardrobe-chip { display:grid; gap:2px; min-width:0; padding:9px; border:1px solid var(--line); border-radius:11px; background:var(--surface-muted); text-align:left; }
.wardrobe-chip small,.wardrobe-chip strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wardrobe-chip small { color:var(--ink-faint); font-size:8px; }
.wardrobe-chip strong { font-size:9.5px; }
.wardrobe-chip.locked { opacity:.48; filter:grayscale(1); }
.wardrobe-chip.selected { border-color:var(--sage); background:var(--sage-wash); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sage) 15%,transparent); }
.wardrobe-chip[class*="title-rarity-"] { position:relative; overflow:hidden; }
.wardrobe-chip[class*="title-rarity-"]::before { content:""; position:absolute; top:0; bottom:0; left:0; width:3px; background:#a7aca9; }
.wardrobe-chip.title-rarity-uncommon::before { background:#54ad70; }
.wardrobe-chip.title-rarity-rare::before { background:#559fdc; }
.wardrobe-chip.title-rarity-epic::before { background:#a760d2; }
.wardrobe-chip.title-rarity-legendary::before { background:#d7a91f; box-shadow:0 0 9px rgba(215,169,31,.55); }
.wardrobe-chip.title-rarity-uncommon strong { color:#4b9761; }
.wardrobe-chip.title-rarity-rare strong { color:#387fad; }
.wardrobe-chip.title-rarity-epic strong { color:#8c48b3; }
.wardrobe-chip.title-rarity-legendary strong { color:#a97808; }
.outfit-chip { grid-template-columns:44px minmax(0,1fr); align-items:center; gap:9px; }
.outfit-chip span { min-width:0; }
.outfit-chip span small,.outfit-chip span strong { display:block; }
.outfit-swatch { width:44px; height:52px; border-radius:9px; background-color:color-mix(in srgb,var(--sage-wash) 62%,transparent); background-position:0 var(--outfit-y,0%); background-repeat:no-repeat; background-size:500% 400%; image-rendering:pixelated; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); filter:drop-shadow(0 3px 2px rgba(22,35,28,.2)); }

.parent-task-field small { display:block; margin-top:4px; color:var(--ink-faint); font-size:8px; }
.monthly-link-badge { max-width:190px; color:var(--sage-strong); }
.monthly-link-badge .icon { flex:0 0 auto; }
.monthly-linked-summary { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.monthly-linked-summary span { display:flex; align-items:center; gap:4px; color:var(--ink-faint); font-size:9px; }
.monthly-linked-summary .icon { width:11px; height:11px; }
.monthly-linked-summary button { flex:0 0 auto; color:var(--monthly-color); font-size:9px; font-weight:850; }

.equipment-slot.weapon-effect { overflow:hidden; }
.equipment-slot.weapon-effect::after { content:""; position:absolute; width:45px; height:100px; top:-45px; left:-55px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); transform:rotate(25deg); animation:equipment-shine 2.8s ease-in-out infinite; }
.equipment-slot.effect-ember { box-shadow:0 0 12px rgba(244,112,64,.34); }
.equipment-slot.effect-frost { box-shadow:0 0 12px rgba(99,199,255,.36); }
.equipment-slot.effect-aurora { box-shadow:0 0 13px rgba(174,130,255,.38); }
.equipment-slot.effect-verdant { box-shadow:0 0 12px rgba(89,220,150,.34); }
.adventure-card[data-weapon-effect="ember"] .hero-sprite { filter:drop-shadow(0 0 9px rgba(244,112,64,.62)); }
.adventure-card[data-weapon-effect="frost"] .hero-sprite { filter:drop-shadow(0 0 9px rgba(99,199,255,.68)); }
.adventure-card[data-weapon-effect="aurora"] .hero-sprite { filter:drop-shadow(0 0 10px rgba(174,130,255,.7)); }
.adventure-card[data-weapon-effect="verdant"] .hero-sprite { filter:drop-shadow(0 0 9px rgba(89,220,150,.66)); }
.battle-flash.effect-ember { background:radial-gradient(circle,#fff5c7 0,#ff754f 35%,transparent 70%); }
.battle-flash.effect-frost { background:radial-gradient(circle,#fff 0,#72d8ff 35%,transparent 70%); }
.battle-flash.effect-aurora { background:radial-gradient(circle,#fff 0,#be8fff 35%,transparent 70%); }
.battle-flash.effect-verdant { background:radial-gradient(circle,#f4ffd8 0,#5fe3a2 35%,transparent 70%); }
@keyframes equipment-shine { 0%,58% { left:-55px; } 82%,100% { left:125%; } }

.outfit-chip.rank-lr { border-color:color-mix(in srgb,#d9bc62 58%,var(--line)); background:linear-gradient(135deg,color-mix(in srgb,#182748 8%,var(--surface-muted)),color-mix(in srgb,#d9bc62 9%,var(--surface-muted))); }
.outfit-chip.rank-lr .outfit-swatch.calendar { box-shadow:0 0 10px rgba(77,132,255,.42),inset 0 0 0 1px rgba(255,255,255,.35); }
.outfit-chip small b { color:#aa8433; font-size:8px; }
.curio-section { display:grid; gap:9px; }
.curio-list { display:flex; flex-wrap:wrap; gap:7px; }
.curio-chip { display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px dashed color-mix(in srgb,var(--butter) 44%,var(--line)); border-radius:10px; background:color-mix(in srgb,var(--butter-pale) 28%,var(--surface-muted)); }
.curio-chip b { display:grid; place-items:center; width:20px; height:20px; border-radius:7px; background:var(--butter-pale); color:#9c7a21; }
.curio-chip strong { font-size:10px; }

.help-modal { width:min(720px,100%); }
.help-body { display:grid; gap:16px; padding:0 24px 25px; overflow:auto; }
.help-tabs { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; padding:5px; border-radius:12px; background:var(--surface-muted); }
.help-tabs button { padding:9px 8px; border-radius:9px; color:var(--ink-faint); font-size:10px; font-weight:800; }
.help-tabs button.active { background:var(--surface-raised); color:var(--sage-strong); box-shadow:var(--shadow-sm); }
.help-panel { animation:help-in .24s var(--ease); }
.help-panel[hidden] { display:none !important; }
.help-lead,.adventure-rule { display:grid; grid-template-columns:42px minmax(0,1fr); gap:11px; align-items:start; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-muted); }
.help-lead > span,.adventure-rule > span { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--sage-wash); color:var(--sage-strong); font-family:ui-serif,"Yu Mincho",serif; font-size:14px; font-weight:800; }
.help-lead strong,.adventure-rule strong,.contact-intro strong { font-size:12px; }
.help-lead p,.adventure-rule p,.contact-intro p { margin:4px 0 0; color:var(--ink-faint); font-size:10px; line-height:1.65; }
.help-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:8px; }
.help-grid article { padding:13px; border:1px solid var(--line); border-radius:12px; background:var(--surface-raised); }
.help-grid b { font-size:11px; }
.help-grid p { margin:5px 0 0; color:var(--ink-faint); font-size:9.5px; line-height:1.65; }
.device-guide { display:grid;gap:10px;margin-top:12px;padding:14px;border:1px solid color-mix(in srgb,var(--sage) 28%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--sage-wash) 58%,var(--surface-muted)); }
.device-guide-heading { display:flex;align-items:baseline;gap:8px; }
.device-guide-heading span { padding:3px 6px;border-radius:999px;background:var(--sage-strong);color:var(--surface-solid);font-size:8px;font-weight:850; }
.device-guide-heading strong { font-size:12px; }
.device-guide-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.device-guide-grid article { padding:11px;border:1px solid var(--line);border-radius:11px;background:var(--surface-raised); }
.device-guide-grid b { font-size:11px; }
.device-guide-grid p { margin:5px 0 0;color:var(--ink-faint);font-size:9.5px;line-height:1.65; }
[data-help-panel="adventure"] { display:grid; gap:8px; }
.contact-intro { padding:2px 0 5px; }
.contact-form { display:grid; gap:11px; }
.contact-form > label:not(.contact-consent) { display:grid; gap:5px; }
.contact-form label > span { color:var(--ink-soft); font-size:10px; font-weight:800; }
.contact-form input,.contact-form select,.contact-form textarea { width:100%; padding:10px 11px; border:1px solid var(--line-strong); border-radius:10px; outline:0; background:var(--surface-raised); color:var(--ink); font:inherit; font-size:11px; }
.contact-form textarea { resize:vertical; line-height:1.6; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:var(--sage); box-shadow:0 0 0 3px color-mix(in srgb,var(--sage) 12%,transparent); }
.contact-form label > small { justify-self:end; color:var(--ink-faint); font-size:8px; }
.contact-consent { display:flex; align-items:flex-start; gap:8px; }
.contact-consent input { width:auto; margin-top:2px; accent-color:var(--sage-strong); }
.contact-consent span { font-size:9px !important; font-weight:600 !important; line-height:1.55; }
.contact-submit { display:flex; align-items:center; justify-content:center; gap:7px; min-height:40px; border-radius:11px; background:var(--sage-strong); color:var(--surface-solid); font-size:11px; font-weight:850; }
.contact-submit:disabled { opacity:.55; }
.contact-status { min-height:17px; margin:0; font-size:9px; text-align:center; }
.contact-status.success { color:var(--sage-strong); }
.contact-status.error { color:var(--red); }
.inline-help-link,.policy-contact-link { justify-self:start;color:var(--sage-strong);font-size:9px;font-weight:800;text-decoration:underline;text-underline-offset:3px; }
.feedback-inbox-modal { width:min(680px,100%); }
.feedback-inbox-modal .modal-heading p { margin:5px 0 0;color:var(--ink-faint);font-size:11px;line-height:1.5; }
.feedback-inbox-body { display:grid;gap:10px;padding:0 24px 25px;overflow:auto; }
.feedback-inbox-summary { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-muted); }
.feedback-inbox-summary strong { font-size:12px; }
.feedback-inbox-summary button,.feedback-card-action { padding:7px 10px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface-raised);color:var(--sage-strong);font-size:9px;font-weight:850; }
.feedback-inbox-status { margin:0;color:var(--ink-faint);font-size:10px;line-height:1.6;text-align:center; }
.feedback-inbox-status.error { color:var(--red); }
.feedback-inbox-list { display:grid;gap:9px; }
.feedback-card { display:grid;gap:9px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-raised); }
.feedback-card.is-new { border-color:color-mix(in srgb,var(--butter) 58%,var(--line));box-shadow:inset 3px 0 0 var(--butter); }
.feedback-card-head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px; }
.feedback-card-meta { display:flex;flex-wrap:wrap;align-items:center;gap:6px; }
.feedback-card-meta span { padding:3px 6px;border-radius:999px;background:var(--sage-wash);color:var(--sage-strong);font-size:8px;font-weight:850; }
.feedback-card-meta time { color:var(--ink-faint);font-size:9px; }
.feedback-card-state { flex:0 0 auto;color:var(--ink-faint);font-size:8px;font-weight:850; }
.feedback-card.is-new .feedback-card-state { color:#9c7418; }
.feedback-card-message { margin:0;color:var(--ink);font-size:11px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere; }
.feedback-card-footer { display:flex;align-items:center;justify-content:space-between;gap:10px; }
.feedback-card-email { min-width:0;color:var(--ink-faint);font-size:9px;overflow-wrap:anywhere; }
.feedback-empty { padding:28px 16px;border:1px dashed var(--line-strong);border-radius:14px;color:var(--ink-faint);font-size:11px;text-align:center; }
.privacy-panel { display:grid;gap:9px; }
.policy-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:4px 2px 7px; }
.policy-heading h3 { margin:3px 0 0;font-family:ui-serif,"Yu Mincho",serif;font-size:17px; }
.policy-heading > b { flex:0 0 auto;padding:4px 7px;border-radius:999px;background:var(--butter-pale);color:#8c6b1b;font-size:8px; }
.policy-card { padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--surface-raised); }
.policy-card h3 { margin:0 0 7px;font-size:11px; }
.policy-card p { margin:0;color:var(--ink-faint);font-size:9.5px;line-height:1.75; }
.policy-card p + p { margin-top:7px; }
.policy-contact-link { margin-top:9px; }
[data-help-panel="about"] { display:grid; gap:10px; }
.creator-lockup { display:grid; justify-items:center; gap:5px; padding:20px 16px; border:1px solid color-mix(in srgb,var(--butter) 42%,var(--line)); border-radius:16px; background:linear-gradient(145deg,color-mix(in srgb,var(--sage-wash) 62%,var(--surface-raised)),color-mix(in srgb,var(--butter-pale) 42%,var(--surface-raised))); text-align:center; }
.creator-lockup > strong { font-family:ui-serif,"Yu Mincho",serif; font-size:21px; }
.creator-lockup p { margin:0; color:var(--ink-faint); font-size:11px; }
.creator-lockup .creator-signature { display:inline-block; margin-left:4px; color:var(--sage-strong); font-size:22px; }
.rights-card,.trial-use-card { padding:15px; border:1px solid var(--line); border-radius:14px; background:var(--surface-raised); }
.rights-card h3,.trial-use-card h3 { margin:0 0 8px; font-size:12px; }
.rights-card p,.trial-use-card p { margin:0; color:var(--ink-faint); font-size:10px; line-height:1.8; }
.rights-card p + p { margin-top:8px; }
.trial-use-card { background:color-mix(in srgb,var(--butter-pale) 34%,var(--surface-raised)); }
.copyright-line { margin:4px 0 0; color:var(--ink-faint); font-size:9px; text-align:center; letter-spacing:.04em; }
@keyframes help-in { from { opacity:0; transform:translateY(4px); } }

.tools-modal { width:min(560px,100%); }
.tool-menu-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:4px 22px 24px; }
.tool-menu-grid > button { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:11px; min-height:70px; padding:11px; border:1px solid var(--line); border-radius:14px; background:var(--surface-muted); text-align:left; }
.tool-menu-grid > button:hover { border-color:color-mix(in srgb,var(--sage) 45%,var(--line)); background:var(--surface-raised); }
.tool-menu-grid > .pass-tool-button { border-color:color-mix(in srgb,var(--butter) 38%,var(--line));background:color-mix(in srgb,var(--butter-pale) 34%,var(--surface-muted)); }
.pass-tool-button .tool-menu-icon { color:#a77d1d; }
.tool-menu-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--sage-wash); color:var(--sage-strong); }
.tool-menu-icon .icon { width:20px; height:20px; }
.tool-menu-grid strong,.tool-menu-grid small { display:block; }
.tool-menu-grid strong { font-size:14px; }
.tool-menu-grid small { margin-top:3px; color:var(--ink-faint); font-size:12px; line-height:1.35; }

@media (max-width: 1180px) {
  .content-wrap { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; padding-inline: 38px; }
}

@media (max-width: 1040px) {
  .content-wrap { grid-template-columns: minmax(0, 760px); justify-content: center; }
  .day-panel { position: static; grid-template-columns: 1fr 1fr; margin-top: 18px; }
  .gentle-note { display: none; }
}

@media (max-width: 860px) {
  :root { --sidebar-width: 260px; }
  .sidebar { transform: translateX(-105%); box-shadow: var(--shadow-lg); transition: transform .35s var(--ease); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close { display: grid !important; }
  .sidebar-scrim { position: fixed; z-index: 35; inset: 0; display: block; background: rgba(13,21,17,.34); opacity: 0; pointer-events: none; backdrop-filter: blur(3px); transition: opacity .25s; }
  .sidebar-scrim.open { opacity: 1; pointer-events: auto; }
  .main { margin-left: 0; }
  .topbar { justify-content: space-between; padding-inline: 24px; }
  .menu-trigger, .mobile-wordmark { display: grid; }
  .mobile-wordmark { margin-left: 10px; font-size: 11px; font-weight: 850; letter-spacing: .02em; white-space: nowrap; }
  .topbar-actions { margin-left: auto; }
  .content-wrap { padding-inline: 28px; }
}

@media (max-width: 650px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .help-body { padding-inline:16px; }
  .feedback-inbox-body { padding-inline:16px; }
  .feedback-card-footer { align-items:flex-start;flex-direction:column; }
  .help-tabs { grid-template-columns:repeat(2,1fr); }
  .help-grid { grid-template-columns:1fr; }
  .tool-menu-grid { grid-template-columns:1fr; gap:7px; padding:4px 16px calc(22px + env(safe-area-inset-bottom)); }
  .tool-menu-grid > button { min-height:62px; }
  .topbar { height: 59px; padding-inline: 16px; }
  .search-trigger, #top-theme-toggle { display: none; }
  .content-wrap { display: block; padding: 15px 16px 52px; }
  .cloud-nudge { grid-template-columns: 34px minmax(0,1fr) 26px; gap: 8px; margin: 1px -2px 10px; padding: 9px; }
  .cloud-nudge-icon { width: 34px; height: 34px; }
  .cloud-nudge > a { grid-column: 2; width: fit-content; margin-top: 3px; }
  .cloud-nudge > button { grid-column: 3; grid-row: 1; }
  .hero-row { min-height: 105px; padding: 7px 2px 20px; }
  .hero-row h1 { font-size: 28px; }
  .hero-subtitle { max-width: 230px; font-size: 10.5px; }
  .progress-orbit { flex-basis: 64px; width: 64px; height: 64px; }
  .progress-orbit circle { stroke-width: 5.5; }
  .orbit-copy strong { font-size: 14px; }
  .date-strip { gap: 2px; margin: 2px -3px 31px; padding: 5px; border-radius: 15px; }
  .adventure-card { margin: -12px -3px 32px; border-radius: 19px; }
  .adventure-top { align-items: stretch; flex-direction: column; gap: 9px; padding: 12px 13px 9px; }
  .adventure-brief { gap:10px; padding:8px 12px 10px; }
  .adventure-brief-copy > strong { font-size:11.5px; }
  .daily-route-wrap { gap:4px; }
  .daily-reward-label { font-size:8px; }
  .daily-route { grid-template-columns:repeat(3,36px); gap:6px; }
  .daily-route::before { top:14px; right:18px; left:18px; }
  .daily-route span { grid-template-rows:17px auto; width:36px; min-height:37px; padding:3px 1px; border-radius:9px; }
  .daily-route span small { font-size:7px; }
  .adventure-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; width: 100%; }
  .collection-trigger { justify-content: center; min-height: 32px; padding: 6px 7px; font-size: 9.5px; }
  .collection-trigger .icon { width: 14px; height: 14px; }
  .hero-stats { grid-column: 1 / -1; justify-content: flex-end; gap: 4px; font-size: 10px; }
  .hero-stats > span { padding: 4px 5px; }
  .potion-count { padding:4px 5px; }
  .adventure-card.battle-reveal { top:50%; width:calc(100vw - 16px); border-radius:18px; }
  .adventure-card.battle-reveal .adventure-top { padding-right:9px; }
  .adventure-card.battle-reveal .battle-cinematic-close { position:absolute; top:9px; right:9px; }
  .adventure-top h2 { font-size: 15px; }
  .battle-stage { min-height: 184px; }
  .hero-nameplate { top: 8px; left: 9px; min-width: 122px; max-width: 145px; padding: 5px 7px; }
  .hero-sprite { left: 3%; bottom: 3px; width: 94px; height: 118px; }
  .hero-sprite.held-weapon { left:0;bottom:0;width:132px;height:132px; }
  .companion-sprite { left: 28%; bottom: 15px; width: 52px; height: 66px; }
  .monster-sprite { right:5%; bottom:4px; width:88px; height:92px; }
  .monster-sprite.monster-size-small { right:7%; width:72px; height:76px; }
  .monster-sprite.monster-size-medium { width:88px; height:92px; }
  .monster-sprite.monster-size-large { right:4%; width:100px; height:104px; }
  .monster-sprite.monster-size-boss { right:3%; width:110px; height:104px; }
  .monster-card { top:9px; right:10px; width:148px; }
  .battle-result { top:66px; max-width:calc(100% - 24px); padding-inline:10px; }
  .adventure-progress { grid-template-columns: 1fr; gap: 11px; padding: 11px 13px 13px; }
  .daily-quest { padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
  .stage-progress { position: static; margin: 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
  .village-quest { grid-template-columns:46px minmax(0,1fr) auto 13px;padding:7px 8px; }
  .village-mini-visual { width:46px;height:42px; }
  .egg-quest { grid-template-columns: 39px minmax(0,1fr) auto; padding: 7px 8px; }
  .egg-mini-sprite { width: 38px; height: 42px; }
  .egg-quest small { font-size: 9px; }
  .equipment-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .equipment-slot { padding: 6px; }
  .equipment-slot b { display: none; }
  .daily-capture { margin: -18px -2px 28px; padding: 12px; border-radius: 17px; }
  .daily-capture-heading { align-items: start; margin-bottom: 9px; }
  .daily-capture-heading h2 { font-size: 15px; }
  .daily-capture-heading > small { max-width: 148px; text-align: right; line-height: 1.45; }
  .quick-capture { grid-template-columns: 18px minmax(0,1fr) auto; grid-template-areas: "icon input add" ". options options"; row-gap: 7px; }
  .quick-capture > .icon { grid-area: icon; }
  .quick-capture > label:not(.quick-duration-label) { grid-area: input; }
  .quick-capture-options { grid-area: options; justify-content: flex-end; }
  .quick-capture button[type=submit] { grid-area: add; }
  .quick-capture select { min-width: 0; width: 100%; }
  .quick-duration-label { flex: 1; }
  .quick-project-label { flex:1;min-width:0;max-width:145px; }
  .quick-capture input { font-size: 14px; }
  .monthly-section { margin: 0 -2px 30px; padding: 14px; border-radius: 17px; }
  .monthly-heading { align-items: center; }
  .monthly-heading h2 { font-size: 16px; }
  .monthly-heading-actions > span { display: none; }
  .monthly-reward-preview { grid-template-columns: auto 1fr; }
  .monthly-reward-preview small { grid-column: 1 / -1; }
  .monthly-quest-list { grid-template-columns: 1fr; }
  .damage-number { right: 19%; }
  .date-chip { padding-block: 8px 9px; }
  .date-chip strong { font-size: 13px; }
  .focus-task { grid-template-columns: 36px minmax(0,1fr) auto; gap: 10px; min-height: 68px; padding: 10px; }
  .focus-number { width: 35px; height: 35px; border-radius: 11px; }
  .focus-task-copy strong { font-size: 14px; }
  .focus-start { width: 31px; height: 31px; padding: 0; justify-content: center; border-radius: 9px; }
  .focus-start span { display: none; }
  .focus-actions > .task-row-action { display: none; }
  .section-heading.compact { margin-top: 32px; }
  .task-row { padding-inline: 5px; }
  .task-copy strong { font-size: 14px; }
  .task-row-actions { opacity: 1; }
  .task-row-action:first-child { display: none; }
  .day-panel { grid-template-columns: 1fr; margin-top: 35px; }
  .focus-card { max-width: none; }
  .gentle-note { display: flex; }
  .mobile-nav { position: fixed; z-index: 50; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr 1fr 58px 1fr 1fr; align-items: end; height: calc(64px + env(safe-area-inset-bottom)); padding: 7px 10px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface-solid) 91%, transparent); backdrop-filter: blur(22px); }
  .mobile-nav > button { display: grid; place-items: center; gap: 1px; padding: 3px; background: transparent; color: var(--ink-faint); font-size: 7.5px; }
  .mobile-nav > button .icon { width: 18px; height: 18px; }
  .mobile-nav > button.active { color: var(--sage-strong); }
  .mobile-nav .mobile-nav-add { align-self: center; width: 46px; height: 46px; margin: -20px auto 0; border-radius: 15px; background: var(--sage-strong); color: var(--surface-solid); box-shadow: 0 9px 20px color-mix(in srgb, var(--sage) 27%, transparent); }
  .mobile-nav .mobile-nav-add .icon { width: 21px; height: 21px; }
  .modal-backdrop { place-items: end center; padding: 0; }
  .modal { width: 100%; max-height: 92vh; border-width: 1px 0 0; border-radius: 25px 25px 0 0; transform: translateY(100%); }
  .modal-backdrop.open .modal { transform: translateY(0); }
  .modal-handle { display: block; width: 37px; height: 4px; margin: 9px auto 0; border-radius: 999px; background: var(--line-strong); }
  .modal-heading { padding: 17px 19px 9px; }
  .modal-heading h2 { font-size: 20px; }
  .list-manager-body { padding: 3px 16px calc(24px + env(safe-area-inset-bottom)); }
  .list-create-card { grid-template-columns: 1fr; }
  .list-create-card > .list-tone-picker { grid-column: auto; }
  .list-create-card .primary-button { width: 100%; }
  .list-editor-bottom { align-items: flex-end; padding-left: 0; }
  .list-editor-top { grid-template-columns: 12px minmax(0,1fr); }
  .list-editor-top small { grid-column: 2; padding: 0; }
  #task-form { padding: 0 19px calc(20px + env(safe-area-inset-bottom)); }
  .settings-body { padding: 2px 17px calc(22px + env(safe-area-inset-bottom)); }
  .tutorial-modal,.login-reward-modal { max-height:96vh;border-radius:25px 25px 0 0; }
  .tutorial-visual { min-height:176px;margin-inline:16px; }
  .tutorial-copy { min-height:150px;padding:18px 19px 10px; }
  .tutorial-copy h2 { font-size:22px; }
  .tutorial-actions { padding-inline:16px; }
  .login-reward-modal { padding:23px 16px calc(18px + env(safe-area-inset-bottom)); }
  .login-reward-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .tutorial-help-nudge { right:12px;bottom:calc(76px + env(safe-area-inset-bottom));grid-template-columns:38px minmax(0,1fr) 30px;width:calc(100vw - 24px);align-items:start; }
  .tutorial-help-nudge>.tutorial-help-icon { grid-column:1;grid-row:1; }
  .tutorial-help-nudge>div { grid-column:2;grid-row:1;align-self:center; }
  .tutorial-help-nudge>#open-help-from-nudge { grid-column:1 / -1;grid-row:2;width:100%;margin-top:2px; }
  .tutorial-help-nudge>#dismiss-help-nudge { grid-column:3;grid-row:1;align-self:start;justify-self:end; }
  .platform-route-grid,.device-guide-grid { grid-template-columns:1fr; }
  .notices-body { padding:2px 15px calc(24px + env(safe-area-inset-bottom)); }
  .experience-control { grid-template-columns:38px minmax(0,1fr) auto; }
  .experience-icon { width:38px;height:38px; }
  .legacy-body { padding:2px 14px calc(24px + env(safe-area-inset-bottom)); }
  .legacy-tabs { grid-template-columns:repeat(6,74px);overflow-x:auto;justify-content:start; }
  .world-layer-card,.village-card,.raid-card { grid-template-columns:1fr; }
  .world-layer-visual,.raid-boss-sprite { min-height:150px; }
  .village-visual { min-height:210px; }
  .village-visual img { min-height:200px;object-fit:contain; }
  .world-roadmap { grid-template-columns:repeat(2,1fr); }
  .building-grid { grid-template-columns:repeat(2,1fr); }
  .class-grid { grid-template-columns:repeat(2,1fr); }
  .skill-grid,.season-tier-grid { grid-template-columns:1fr; }
  .chronicle-stats { grid-template-columns:repeat(2,1fr); }
  .chronicle-months { grid-template-columns:repeat(3,1fr); }
  .archive-list { grid-template-columns:1fr; }
  .pass-benefits { grid-template-columns:1fr; }
  .cloud-settings-heading { grid-template-columns: 38px minmax(0,1fr) auto; }
  .cloud-settings-icon { width: 38px; height: 38px; }
  .reflection-body { gap: 19px; padding: 2px 15px calc(25px + env(safe-area-inset-bottom)); }
  .reflection-stats { grid-template-columns: repeat(2,1fr); }
  .reflection-stats > div { padding: 12px 13px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .reflection-stats > div:nth-child(2) { border-right: 0; }
  .reflection-stats > div:nth-child(n+3) { border-bottom: 0; }
  .reflection-stats strong { font-size: 20px; }
  .reflection-guide { align-items: flex-start; padding: 12px 13px; }
  .reflection-guide strong { font-size: 13px; }
  .reflection-trend-grid { grid-template-columns:repeat(2,1fr); }
  .mood-choice { display: grid; justify-items: center; gap: 2px; padding: 9px 5px; text-align: center; }
  .mood-choice strong { font-size: 12px; }
  .reflection-fields { grid-template-columns: 1fr; gap: 12px; }
  .reflection-fields .improvement-field { grid-column: auto; }
  .collection-body { gap: 22px; padding: 2px 14px calc(25px + env(safe-area-inset-bottom)); }
  .collection-modal,.collection-body,.collection-body > section { min-width:0;max-width:100vw; }
  .craft-card { grid-template-columns: 48px minmax(0,1fr); gap: 11px; padding: 14px; }
  .craft-stone { width: 46px; height: 46px; font-size: 38px; }
  .craft-card > button { grid-column: 1 / -1; width: 100%; }
  .companion-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .wardrobe-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .inventory-grid { grid-template-columns: 1fr; }
  .inventory-toolbar { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:hidden; }
  .inventory-toolbar label { display:grid;grid-template-columns:auto minmax(0,1fr);min-width:0; }
  .inventory-toolbar select { width:100%;min-width:0; }
  .inventory-favorite-filter { grid-column:1 / -1;display:flex !important; }
  .inventory-toolbar > button { grid-column:1 / -1;width:100%;min-width:0;margin-left:0; }
  .companion-card { grid-template-columns: 66px minmax(0,1fr); align-items: center; justify-items: stretch; padding: 5px 7px; text-align: left; }
  .companion-portrait { width: 62px; height: 70px; }
  .monster-dex-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .dex-card { grid-template-columns: 56px minmax(0,1fr); min-height: 76px; padding: 5px; }
  .dex-sprite { width: 52px; height: 64px; }
  .title-field textarea { font-size: 17px; }
  .task-template-bar { grid-template-columns:minmax(0,1fr) auto; }
  .task-template-bar #save-task-template { grid-column:1 / -1; }
  .field-grid { grid-template-columns: 1fr 1fr; }
  .priority-row { flex-wrap: wrap; }
  .priority-row > span { flex-basis: 100%; }
  .modal-actions { position: sticky; bottom: 0; margin-inline: -19px; padding: 12px 19px 0; background: var(--surface-raised); }
  .secondary-button { display: none; }
  .primary-button { flex: 1; }
  .command-backdrop { place-items: start center; padding: 8px; padding-top: 7vh; }
  .command-palette { border-radius: 17px; }
  .command-footer span:last-child { display: none; }
  .toast-region { right: 12px; bottom: calc(75px + env(safe-area-inset-bottom)); width: calc(100vw - 24px); }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), textarea, select { font-size: 16px !important; }
  button, a, input, textarea, select { touch-action: manipulation; }
}

@media (max-width: 380px) {
  .eyebrow { font-size: 9.5px; }
  .hero-row h1 { font-size: 24px; }
  .date-chip span { font-size: 8px; }
  .date-chip strong { font-size: 12px; }
  .field-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}