:root {
  color-scheme: dark;
  --base: #10172E;
  --panel: #26325C;
  --purple: #7968CA;
  --gold: #F2CD7B;
  --green: #5DD6B0;
  --text: #F4F3FF;
  --muted: #B9BED8;
  --line: #45517C;
  --ink: #12182D;
  --mono: "Courier New", monospace;
  --nav-height: 78px;
  font-family: "BIZ UDPゴシック", "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--base); color: var(--text); line-height: 1.7; background-image: radial-gradient(#7968CA24 1px, transparent 1px); background-size: 20px 20px; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; border-radius: 0; touch-action: manipulation; }
button:focus-visible, a:focus-visible, [role="tabpanel"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
button:active { transform: translateY(1px); }
button, h1, h2, p { overflow-wrap: anywhere; }
h1, h2, p { margin: 0; }
button { min-height: 44px; }
.app-shell { width: 100%; max-width: 520px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; background: var(--base); border-inline: 1px solid #343D614D; }
.skip-link { position: fixed; z-index: 10; top: 8px; left: 12px; padding: 12px; background: var(--gold); color: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 90px; padding: max(18px, env(safe-area-inset-top)) 20px 16px; border-bottom: 1px solid var(--line); background: #151D37; }
.brand { display: flex; align-items: center; gap: 12px; border: 0; padding: 0; background: transparent; text-align: left; }
.brand-emblem { display: grid; place-items: center; width: 38px; height: 43px; background: #F2CD7B0F; color: var(--gold); border: 2px solid var(--gold); clip-path: polygon(0 0,100% 0,100% 80%,50% 100%,0 80%); }
.brand-copy { display: grid; line-height: 1.2; }
.brand-name { font-family: var(--mono); font-size: 18px; font-weight: 700; letter-spacing: -.6px; }
.brand-quest { margin-top: 5px; color: var(--gold); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 4px; }
.brand-dots { color: var(--purple); letter-spacing: 0; }
.settings-button { display: grid; flex: 0 0 44px; place-items: center; width: 44px; padding: 0; background: #1D2749; border: 1px solid var(--line); color: var(--muted); box-shadow: 2px 2px 0 #090E20; }
.settings-button[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
.storage-notice { margin: 20px 20px 0; padding: 15px; border-color: var(--gold); background: var(--panel); }
.storage-notice h2 { color: var(--gold); font-size: 14px; }
.storage-notice p { margin-top: 8px; font-size: 12px; color: var(--text); }
main { padding: 27px 20px calc(var(--nav-height) + env(safe-area-inset-bottom) + 26px); }
main:focus { outline: none; }
.page-heading { margin-bottom: 25px; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; color: var(--gold); font: 700 10px/1.5 var(--mono); letter-spacing: 2px; }
.eyebrow::before { content: ""; width: 5px; height: 5px; background: var(--gold); box-shadow: 3px 3px 0 #F2CD7B35; }
.page-title { font-size: 25px; font-weight: 700; line-height: 1.5; letter-spacing: 1px; }
.page-title:focus { outline: none; }
.title-sub { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; letter-spacing: 1px; font-weight: 400; }
.page-description { margin-top: 8px; font-size: 12px; line-height: 1.8; color: var(--muted); }
.pixel-panel { position: relative; border: 1px solid var(--line); box-shadow: 3px 3px 0 #090E20; }
.pixel-panel::before, .pixel-panel::after { content: ""; position: absolute; width: 5px; height: 5px; background: var(--purple); pointer-events: none; }
.pixel-panel::before { top: -1px; left: -1px; }
.pixel-panel::after { bottom: -1px; right: -1px; }
.hero-panel { padding: 20px 18px 24px; text-align: center; background: linear-gradient(180deg,#2C2850 0%,#202A4E 100%); border-color: #70628F; }
.hero-panel::before, .hero-panel::after { background: var(--gold); }
.hero-kicker, .empty-kicker { color: #C0B4EF; font: 700 9px/1.6 var(--mono); letter-spacing: 1.6px; }
.hero-panel h2 { margin-top: 8px; font-size: 19px; letter-spacing: .3px; }
.hero-description { margin-top: 10px; color: #D0D1E6; font-size: 12px; line-height: 1.9; }
.primary-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 21px; padding: 10px 8px; background: var(--gold); color: var(--ink); border: 2px solid #FFE5A9; box-shadow: 3px 3px 0 #0C1228; font-size: 13px; font-weight: 700; }
.primary-button > :last-child { margin-left: auto; }
.button-cursor { margin-right: auto; font-size: 10px; }
.sword-scene { position: relative; width: 170px; height: 121px; margin: -2px auto 8px; }
.sword-halo { position: absolute; width: 82px; height: 82px; left: 44px; top: 9px; background: #7968CA26; box-shadow: 0 0 0 9px #7968CA0D,0 0 0 20px #7968CA08; clip-path: polygon(20% 0,80% 0,80% 10%,90% 10%,90% 20%,100% 20%,100% 80%,90% 80%,90% 90%,80% 90%,80% 100%,20% 100%,20% 90%,10% 90%,10% 80%,0 80%,0 20%,10% 20%,10% 10%,20% 10%); }
.hero-sword { position: absolute; width: 56px; height: 108px; left: 57px; top: 0; z-index: 1; }
.sword-blade { position: absolute; width: 16px; height: 64px; left: 20px; top: 2px; background: linear-gradient(90deg,#B8CCE8 50%,#F3F3FF 50%); clip-path: polygon(50% 0,100% 12%,100% 100%,0 100%,0 12%); }
.sword-blade::after { content: ""; position: absolute; width: 4px; height: 40px; top: 17px; left: 4px; background: #91A8D3; }
.sword-guard { position: absolute; left: 4px; top: 65px; width: 48px; height: 9px; background: var(--gold); box-shadow: -4px 4px 0 #D19F56,4px 4px 0 #D19F56; }
.sword-grip { position: absolute; top: 74px; left: 22px; width: 12px; height: 21px; background: repeating-linear-gradient(0deg,#7968CA 0 5px,#51478A 5px 7px); border-inline: 3px solid #3D356E; }
.sword-pommel { position: absolute; top: 96px; left: 20px; width: 16px; height: 8px; background: var(--gold); }
.sword-pedestal { position: absolute; top: 112px; left: 47px; width: 76px; height: 4px; background: #7968CA5C; box-shadow: 8px 4px 0 #7968CA20,-8px 4px 0 #7968CA20; }
.scene-star { position: absolute; width: 4px; height: 4px; background: var(--gold); box-shadow: 4px 0 0 #F2CD7B80,-4px 0 0 #F2CD7B80,0 4px 0 #F2CD7B80,0 -4px 0 #F2CD7B80; }
.star-one { top: 28px; left: 25px; }
.star-two { top: 65px; right: 20px; transform: scale(.65); }
.star-three { top: 10px; right: 37px; transform: scale(.45); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 28px 0 13px; }
.section-heading h2 { font-size: 14px; font-weight: 700; }
.section-label { color: var(--muted); font: 10px var(--mono); letter-spacing: 2px; }
.quest-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.quest-card { display: flex; flex-direction: column; min-width: 0; min-height: 137px; padding: 16px 14px; text-align: left; border: 1px solid var(--line); background: var(--panel); box-shadow: 3px 3px 0 #090E20; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; margin-bottom: 12px; }
.icon-tile { display: grid; place-items: center; width: 34px; height: 34px; background: #10172E66; }
.gold { color: var(--gold); }
.purple { color: #B5A6F4; }
.green { color: var(--green); }
.lavender { color: #C3B5E6; }
.card-arrow { color: #B8BFDF; font: 16px var(--mono); }
.card-label { font-size: 16px; line-height: 1.6; font-weight: 700; }
.card-description { margin-top: 2px; color: #CCD0E5; font-size: 10px; line-height: 1.8; }
.journey-note { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 29px; color: var(--muted); font-size: 10px; letter-spacing: .5px; }
.tiny-diamond { width: 4px; height: 4px; background: var(--purple); transform: rotate(45deg); }
.empty-panel { display: flex; flex-direction: column; align-items: center; padding: 43px 16px 36px; text-align: center; background: linear-gradient(180deg,#26325C 0%,#202A4D 100%); }
.empty-emblem { display: grid; place-items: center; width: 70px; height: 70px; margin-bottom: 25px; background: #10172E66; border: 1px solid var(--line); box-shadow: 4px 4px 0 #10172E99; }
.empty-emblem .pixel-icon { width: 32px; height: 32px; }
.empty-panel h2 { margin-top: 11px; font-size: 16px; line-height: 1.9; }
.empty-panel > p:not(.empty-kicker) { margin-top: 13px; color: #CCD0E5; font-size: 12px; line-height: 2; }
.empty-status { display: inline-flex; gap: 7px; margin-top: 25px; padding: 3px 12px; border: 1px solid #5C5783; color: #D1C6F8; font-size: 10px; }
.back-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 23px; padding: 12px 8px; color: var(--muted); border: 1px solid var(--line); background: #19223F; font-size: 12px; }
.record-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom: 20px; border: 1px solid var(--line); padding: 4px; gap: 4px; background: #19223F; }
.record-tabs button { position: relative; padding: 10px 4px; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 12px; }
.record-tabs button[aria-selected="true"] { border-color: var(--purple); background: #7968CA33; color: var(--text); font-weight: 700; }
.record-tabs button[aria-selected="true"]::after { content: ""; position: absolute; height: 3px; width: 18px; background: var(--gold); bottom: 2px; left: calc(50% - 9px); }
.theme-panel { display: flex; align-items: center; gap: 13px; padding: 19px 16px; background: var(--panel); }
.theme-label { color: var(--muted); font-size: 10px; }
.theme-name { font-size: 14px; font-weight: 700; }
.theme-swatches { display: flex; margin-left: auto; gap: 4px; }
.theme-swatches i { display: block; width: 9px; height: 18px; background: var(--base); border: 1px solid #FFFFFF33; }
.theme-swatches i:nth-child(2) { background: var(--purple); }
.theme-swatches i:nth-child(3) { background: var(--gold); }
.empty-panel.compact { margin-top: 20px; padding-block: 38px; }
.bottom-nav { position: fixed; z-index: 5; bottom: 0; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); width: 100%; max-width: 520px; min-height: calc(var(--nav-height) + env(safe-area-inset-bottom)); padding: 5px 8px calc(5px + env(safe-area-inset-bottom)); background: #151D37; border-top: 1px solid #626082; box-shadow: 0 -5px 0 #10172E66; }
.nav-button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 10px 1px 5px; border: 0; background: transparent; color: var(--muted); font-size: 10px; line-height: 1.5; }
.nav-button[aria-current="page"] { color: var(--gold); background: #F2CD7B09; font-weight: 700; }
.nav-button[aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 18px; height: 3px; background: var(--gold); }
.nav-button:focus-visible { outline-offset: -3px; }
.pixel-icon { display: inline-block; flex-shrink: 0; width: 22px; height: 22px; background: currentColor; }
.icon-sword { clip-path: polygon(72% 0,100% 0,100% 28%,58% 70%,72% 84%,62% 94%,45% 77%,23% 100%,0 100%,0 77%,23% 55%,6% 38%,16% 28%,30% 42%); }
.icon-home { clip-path: polygon(45% 0,55% 0,55% 10%,65% 10%,65% 20%,75% 20%,75% 30%,85% 30%,85% 40%,100% 40%,100% 50%,85% 50%,85% 100%,60% 100%,60% 65%,40% 65%,40% 100%,15% 100%,15% 50%,0 50%,0 40%,15% 40%,15% 30%,25% 30%,25% 20%,35% 20%,35% 10%,45% 10%); }
.icon-book { clip-path: polygon(0 5%,38% 5%,50% 18%,62% 5%,100% 5%,100% 88%,62% 88%,50% 100%,38% 88%,0 88%,0 5%,10% 15%,10% 76%,38% 76%,44% 82%,44% 28%,35% 18%,10% 18%,0 5%,100% 5%,90% 18%,65% 18%,56% 28%,56% 82%,62% 76%,90% 76%,90% 15%,100% 5%); }
.icon-scroll { clip-path: polygon(10% 0,85% 0,85% 10%,95% 10%,95% 28%,80% 28%,80% 88%,70% 88%,70% 100%,0 100%,0 75%,15% 75%,15% 12%,10% 12%,10% 0,28% 12%,28% 30%,66% 30%,66% 40%,28% 40%,28% 50%,60% 50%,60% 60%,28% 60%,28% 75%,65% 75%,65% 88%,12% 88%,12% 100%,70% 100%,80% 88%,80% 12%,28% 12%); }
.icon-flag { clip-path: polygon(5% 0,18% 0,18% 8%,100% 8%,100% 18%,80% 38%,100% 58%,100% 68%,18% 68%,18% 100%,5% 100%,5% 0,18% 20%,18% 55%,75% 55%,60% 38%,75% 20%,18% 20%); }
.icon-gear { clip-path: polygon(35% 0,65% 0,65% 15%,80% 15%,80% 25%,100% 25%,100% 65%,85% 65%,85% 80%,65% 80%,65% 100%,35% 100%,35% 85%,20% 85%,20% 75%,0 75%,0 35%,15% 35%,15% 20%,35% 20%,35% 0,35% 35%,35% 65%,65% 65%,65% 35%,35% 35%); }
.noscript-message { position: fixed; z-index: 9; inset: 10px 10px auto; padding: 16px; background: var(--gold); color: var(--ink); font-size: 13px; }

@media (hover: hover) {
  .quest-card:hover, .back-button:hover { border-color: var(--purple); background: #303B69; }
  .primary-button:hover { background: #FFE0A0; }
  .nav-button:hover, .settings-button:hover { color: var(--gold); background: #26325C; }
  .record-tabs button:hover { color: var(--text); background: #7968CA33; }
}
@media (min-width: 520px) {
  .app-shell { box-shadow: 0 0 80px #00000040; }
  main { padding-inline: 28px; }
  .app-header { padding-inline: 28px; }
  .hero-panel { padding-inline: 30px; }
  .quest-card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* STEP 6-3: 試練・教材の一覧、詳細、編集。既存の共通画面は維持する。 */
.progress-summary { margin-bottom: 20px; padding: 18px; background: var(--panel); }
.progress-summary h2 { font-size: 13px; line-height: 1.8; }
.progress-summary p { margin-top: 6px; color: var(--muted); font-size: 12px; }
.progress-summary .progress-number { color: var(--gold); font-family: var(--mono); font-size: 24px; font-weight: 700; line-height: 1.5; }
.progress-summary progress { display: block; width: 100%; height: 9px; margin-top: 13px; overflow: hidden; appearance: none; border: 0; border-radius: 0; background: var(--base); color: var(--gold); }
.progress-summary progress::-webkit-progress-bar { background: var(--base); }
.progress-summary progress::-webkit-progress-value { background: var(--gold); }
.progress-summary progress::-moz-progress-bar { background: var(--gold); }
.entry-list { display: grid; gap: 12px; min-width: 0; }
.entry-button { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-width: 0; min-height: 76px; padding: 15px 13px; border: 1px solid var(--line); background: var(--panel); box-shadow: 3px 3px 0 #090E20; text-align: left; }
.ordeal-number { display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; border: 1px solid #786543; background: #F2CD7B0F; color: var(--gold); font-family: var(--mono); font-size: 15px; font-weight: 700; }
.entry-copy { display: block; flex: 1 1 0; min-width: 0; }
.entry-title { display: block; color: var(--text); font-size: 14px; line-height: 1.8; font-weight: 700; overflow-wrap: anywhere; }
.entry-sub { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; }
.status-badge, .required-badge { display: inline-block; max-width: 100%; padding: 2px 7px; border: 1px solid #626987; color: #D8DBEF; font-size: 10px; line-height: 1.8; font-weight: 400; overflow-wrap: anywhere; }
.entry-copy .status-badge, .entry-copy .required-badge { margin-top: 7px; margin-right: 5px; }
.status-badge.is-cleared { border-color: var(--green); color: var(--green); background: #5DD6B012; }
.status-badge.is-watching { border-color: #B5A6F4; color: #D5CBFF; background: #7968CA26; }
.entry-button.is-cleared { border-color: var(--green); background: linear-gradient(90deg,#5DD6B012,var(--panel)); }
.entry-button.is-cleared .ordeal-number { border-color: var(--green); color: var(--green); background: #5DD6B012; }
.week-heading { margin: 26px 0 12px; color: var(--gold); font: 700 13px/1.8 var(--mono); letter-spacing: 1.5px; }
.detail-panel { margin-top: 18px; padding: 18px 15px; background: var(--panel); min-width: 0; }
.detail-heading { margin-bottom: 16px; min-width: 0; font-size: 18px; line-height: 1.8; overflow-wrap: anywhere; }
.detail-heading:focus { outline: none; }
.detail-heading h2 { font-size: 18px; line-height: 1.8; overflow-wrap: anywhere; }
.detail-heading h2:focus { outline: none; }
.detail-status { margin-top: 9px; color: var(--muted); font-size: 12px; }
.detail-status.is-cleared { color: var(--green); }
.external-link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 14px; padding: 10px; border: 1px solid var(--purple); color: #DDD5FF; background: #7968CA1F; font-size: 12px; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
.edit-form { min-width: 0; }
.edit-form fieldset { min-width: 0; margin: 22px 0 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--line); }
.edit-form fieldset fieldset { margin-top: 0; padding-top: 0; border: 0; }
.edit-form legend { max-width: 100%; margin-bottom: 4px; padding: 0 8px 0 0; color: var(--gold); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.edit-form label { display: grid; align-content: center; gap: 7px; min-height: 44px; margin: 14px 0 0; color: var(--text); font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.edit-form input:not([type="checkbox"]), .edit-form select, .edit-form textarea { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; margin: 0; padding: 10px; border: 1px solid #66729C; border-radius: 0; background: var(--base); color: var(--text); font: inherit; font-size: 16px; line-height: 1.6; box-shadow: inset 2px 2px 0 #090E204D; }
.edit-form textarea { min-height: 112px; resize: vertical; }
.edit-form input::placeholder, .edit-form textarea::placeholder { color: #9AA4C8; opacity: 1; }
.edit-form input:focus-visible, .edit-form select:focus-visible, .edit-form textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.field-hint { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; }
.edit-form .checkbox-label, .checkbox-label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-block: 8px; }
.checkbox-label input[type="checkbox"] { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.form-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin-top: 22px; }
.form-actions .primary-button { min-width: 0; margin: 0; padding-inline: 5px; }
.secondary-button, .danger-button { min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid #69769D; background: #19223F; color: var(--text); font-size: 12px; line-height: 1.8; box-shadow: 2px 2px 0 #090E20; }
.danger-button { border-color: #C78B9C; background: #4B283D; color: #FFD0D9; }
.history-card { min-width: 0; margin-top: 12px; padding: 15px 12px; border: 1px solid var(--line); background: #19223F; }
.history-card h3 { margin: 0 0 7px; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.history-card p { margin-top: 6px; color: #D1D5EB; font-size: 12px; line-height: 1.9; }
.history-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 15px; }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.form-notice { margin-top: 16px; padding: 12px; border: 1px solid var(--line); color: var(--text); font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.form-notice[role="status"] { border-color: var(--green); background: #5DD6B00D; color: #B8F1E0; }
.form-notice[role="alert"] { border-color: var(--gold); background: #F2CD7B0D; color: #FFE2A7; }
.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; margin-bottom: 18px; }
.list-toolbar > h2 { margin: 0; font-size: 14px; }
.list-toolbar .primary-button { width: auto; max-width: 100%; margin: 0; padding-inline: 13px; }
.data-unavailable { margin-block: 18px; padding: 16px; border: 1px solid var(--line); color: var(--muted); background: #19223F; font-size: 12px; line-height: 1.9; }
.edit-form :disabled { cursor: not-allowed; color: var(--muted); background: #19223F; border-color: var(--line); box-shadow: none; }
button:disabled { cursor: not-allowed; color: var(--muted); background: #343C58; border-color: var(--line); box-shadow: none; }
button:disabled:active { transform: none; }

@media (hover: hover) {
  .entry-button:hover { border-color: var(--purple); background: #303B69; }
  .entry-button.is-cleared:hover { border-color: var(--green); background: #294A59; }
  .secondary-button:not(:disabled):hover, .external-link:hover { border-color: var(--gold); color: var(--gold); }
  .danger-button:not(:disabled):hover { border-color: #FFE0E6; color: #FFE0E6; background: #61354D; }
}

/* STEP 6-4: クエストボード・冒険の記録。共通ナビと既存フォームは維持する。 */
.task-board, .learning-board { min-width: 0; }
.filter-control { display: grid; gap: 7px; width: 100%; min-width: 0; margin: 16px 0; }
.filter-control label { color: var(--muted); font-size: 12px; line-height: 1.8; }
.filter-control select { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding: 10px; border: 1px solid #66729C; border-radius: 0; background: var(--base); color: var(--text); font: inherit; font-size: 16px; line-height: 1.6; text-overflow: ellipsis; }
.filter-control select:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.edit-form select { text-overflow: ellipsis; }
.task-card { margin-top: 0; }
.task-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; }
.task-heading h3, .task-heading .entry-title { flex: 1 1 0; min-width: 0; margin: 0; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.todo-toggle { flex: 0 0 auto; min-width: 44px; min-height: 44px; max-width: 48%; padding: 9px 10px; border: 1px solid var(--green); border-radius: 0; color: #C5F5E7; background: #5DD6B012; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.todo-toggle[aria-pressed="true"] { color: var(--green); background: #5DD6B01F; }
.task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin-top: 11px; }
.task-card.is-completed { border-color: #4B655F; background: #182B36; }
.task-card.is-completed .task-heading h3, .task-card.is-completed .task-heading .entry-title { color: var(--muted); }
.task-card.is-completed .todo-toggle { border-color: #829C94; }
.task-card.is-overdue { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.task-card.is-overdue .status-badge { color: #FFE2A7; border-color: #9A845D; }
.task-actions { margin-top: 14px; }
.learning-summary { min-width: 0; margin-bottom: 20px; padding: 18px 15px; background: var(--panel); }
.learning-summary h2, .learning-summary h3 { margin: 0; font-size: 14px; line-height: 1.8; }
.summary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px 12px; min-width: 0; margin: 17px 0 0; }
.summary-grid > div { min-width: 0; padding-left: 10px; border-left: 2px solid var(--purple); }
.summary-grid dt { color: var(--muted); font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }
.summary-grid dd { margin: 4px 0 0; color: var(--gold); font-family: var(--mono); font-size: 24px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.week-range { margin-top: 14px; color: var(--muted); font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; }
.quick-minutes { display: flex; flex-wrap: wrap; gap: 9px; min-width: 0; margin-top: 10px; }
.quick-minutes button { flex: 1 1 0; min-width: 0; min-height: 44px; margin: 0; padding-inline: 5px; font-size: 13px; }
.editor-heading { min-width: 0; margin: 0 0 14px; }
.editor-heading h2, h2.editor-heading { margin: 0; color: var(--text); font-size: 18px; line-height: 1.8; overflow-wrap: anywhere; }
.draft-hint { margin-top: 12px; color: #D9C6A1; font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; }

@media (hover: hover) {
  .todo-toggle:not(:disabled):hover { border-color: #C5F5E7; background: #5DD6B02B; }
}

/* STEP 6-5: 手動確認に基づくコミュニティ活動の参考集計。 */
.community-summary { min-width: 0; margin-bottom: 20px; padding: 18px 15px; background: var(--panel); }
.community-summary h2, .community-summary > h3 { margin: 0; font-size: 16px; line-height: 1.8; }
.community-summary > p { margin-top: 10px; color: #D1D5EB; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.community-gauges { display: grid; grid-template-columns: minmax(0,1fr); gap: 17px; min-width: 0; margin-top: 19px; }
.community-gauge { min-width: 0; padding-left: 11px; border-left: 2px solid var(--purple); }
.community-gauge h3, .community-gauge h4 { margin: 0; color: var(--text); font-size: 12px; line-height: 1.8; }
#community-board > .section-heading h3 { margin: 0; font-size: 14px; line-height: 1.8; }
.community-gauge p { margin-top: 5px; color: var(--gold); font-family: var(--mono); font-size: 22px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.community-gauge progress { display: block; width: 100%; height: 9px; margin-top: 9px; overflow: hidden; appearance: none; border: 0; border-radius: 0; background: var(--base); color: var(--gold); }
.community-gauge progress::-webkit-progress-bar { background: var(--base); }
.community-gauge progress::-webkit-progress-value { background: var(--gold); }
.community-gauge progress::-moz-progress-bar { background: var(--gold); }
.community-gauge.is-qualified { border-left-color: var(--green); }
.community-gauge.is-qualified p { color: var(--green); }
.community-gauge.is-qualified progress { color: var(--green); }
.community-gauge.is-qualified progress::-webkit-progress-value { background: var(--green); }
.community-gauge.is-qualified progress::-moz-progress-bar { background: var(--green); }
.community-reference { margin-block: 15px; padding: 12px; border: 1px solid #8B775B; background: #F2CD7B0B; color: #FFE2A7; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.community-reference a { color: var(--gold); text-underline-offset: 3px; }
.community-reference a:focus-visible { outline-offset: 2px; }
.community-type-list { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; min-width: 0; }
.community-type-row { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; min-width: 0; padding: 12px; border: 1px solid var(--line); background: #19223F; overflow-wrap: anywhere; }
.community-type-row h3, .community-type-row > strong, .community-type-row > span:first-child { color: var(--text); font-size: 12px; line-height: 1.8; }
.community-type-row p, .community-type-row small { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; }
.community-card { margin-top: 0; }
.community-card.is-qualified { border-color: var(--green); }
.community-card.is-pending { border-color: #8B775B; }
.community-status { margin-top: 9px; color: var(--gold); font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.community-status.is-qualified { color: var(--green); }
.community-issues { display: grid; gap: 5px; min-width: 0; margin: 13px 0 0; padding: 11px 12px 11px 28px; border-left: 2px solid var(--gold); background: #F2CD7B09; color: #FFE2A7; font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; }
.edit-form .community-event-row { min-width: 0; margin: 15px 0 0; padding: 13px 12px; border: 1px solid var(--line); background: #19223F; }
.edit-form .community-event-row legend { padding-inline: 5px; font-size: 12px; }
.edit-form .community-event-row label { margin-top: 8px; }
.community-event-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; min-width: 0; margin-top: 14px; }
.community-event-actions button { min-height: 44px; max-width: 100%; }
.community-evidence { min-width: 0; margin: 14px 0 0; padding: 0; list-style: none; }
.community-evidence li { min-width: 0; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: #D1D5EB; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.community-evidence a { display: flex; align-items: center; min-height: 44px; max-width: 100%; padding-block: 8px; color: #DDD5FF; text-underline-offset: 3px; overflow-wrap: anywhere; }
.community-manual-totals { display: grid; gap: 10px; min-width: 0; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.community-manual-totals > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px 12px; min-width: 0; }
.community-manual-totals dt { color: var(--muted); font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; }
.community-manual-totals dd { margin: 0; color: var(--text); font-family: var(--mono); font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.community-master-notes { display: grid; gap: 6px; min-width: 0; margin: 15px 0 0; padding-left: 20px; color: #D1D5EB; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.community-grouping-field { min-width: 0; margin-top: 16px; padding: 12px; border: 1px solid var(--line); background: #19223F; }
.community-grouping-field p { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; }

/* STEP 6-6: 冒険の拠点の実績・日程と、本人が記録する設定・最終試練。 */
.home-calendar { min-width: 0; margin-bottom: 20px; padding: 18px 15px; background: var(--panel); }
.home-date-line { color: var(--muted); font-family: var(--mono); font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; }
.home-day-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 7px 16px; min-width: 0; margin-top: 10px; }
.home-day-row strong, #home-day { min-width: 0; color: var(--gold); font-family: var(--mono); font-size: 25px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
#home-remaining { min-width: 0; color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.8; overflow-wrap: anywhere; }
.home-calendar.is-expired { border-color: var(--gold); }
.home-calendar.is-expired #home-remaining { color: var(--gold); }
.home-calendar > p:not(.home-date-line) { margin-top: 9px; color: var(--muted); font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; }
.home-progress-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; min-width: 0; margin-top: 20px; }
.home-metric { min-width: 0; padding: 15px 12px; background: var(--panel); }
.home-metric h3 { margin: 0; color: var(--text); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.home-metric p { margin-top: 8px; color: var(--gold); font-size: 14px; font-weight: 700; line-height: 1.8; overflow-wrap: anywhere; }
.home-metric .field-hint { color: var(--muted); font-size: 10px; font-weight: 400; }
.home-metric progress { display: block; width: 100%; max-width: 100%; height: 8px; margin-top: 12px; overflow: hidden; appearance: none; border: 0; border-radius: 0; background: var(--base); color: var(--gold); }
.home-metric progress::-webkit-progress-bar { background: var(--base); }
.home-metric progress::-webkit-progress-value { background: var(--gold); }
.home-metric progress::-moz-progress-bar { background: var(--gold); }
.home-wide-metric { grid-column: 1 / -1; min-width: 0; margin-top: 20px; padding: 18px 15px; background: var(--panel); }
.home-wide-metric > h3 { margin: 0; font-size: 14px; line-height: 1.8; }
p.home-final-status { margin-top: 12px; color: var(--gold); font-size: 16px; font-weight: 700; }
.home-wide-metric > .home-final-dates { margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.home-community-summary { min-width: 0; margin-top: 20px; padding: 18px 15px; background: var(--panel); }
.home-community-summary h3 { margin: 0; color: var(--text); font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.home-community-summary .community-gauge h4 { font-size: 12px; }
.home-community-summary .community-gauge p { font-size: 18px; }
.home-community-summary > p { margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; }
.home-next-quest { align-items: flex-start; min-height: 68px; }
.home-next-quest .entry-copy { width: 100%; }
.home-next-quest .entry-title { font-size: 13px; }
.home-next-quest .entry-sub { font-size: 11px; }
.home-next-quest.is-overdue { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold),3px 3px 0 #090E20; }
.home-next-quest.is-overdue .entry-sub { color: var(--gold); }
.home-preparation-notice { min-width: 0; margin-top: 18px; padding: 13px 12px; border: 1px solid #8B775B; background: #F2CD7B0B; color: #FFE2A7; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.home-preparation-notice.is-qualified { border-color: var(--green); background: #5DD6B00D; color: #B8F1E0; }
.home-final-status { flex-wrap: wrap; align-items: flex-start; min-width: 0; margin-top: 20px; }
.home-final-status > div { flex: 1 1 180px; min-width: 0; }
.home-final-status h3 { margin: 0; color: var(--text); font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.home-final-status label, .home-final-status .theme-label { color: var(--muted); font-size: 11px; line-height: 1.9; }
.home-final-status p { margin-top: 7px; overflow-wrap: anywhere; }
.home-final-status .home-final-dates { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.9; }
.settings-section { min-width: 0; margin-top: 20px; padding: 18px 15px; background: var(--panel); }
.settings-section h2 { margin: 0; color: var(--text); font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
.settings-section .edit-form { margin-top: 10px; }
.settings-section .edit-form fieldset { margin-top: 15px; }
.settings-warning { min-width: 0; margin-top: 12px; padding: 11px 12px; border-left: 2px solid var(--gold); background: #F2CD7B09; color: #FFE2A7; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }

/* STEP 6-7: セーブ・ロードはバックアップ／復元として操作内容を明示する。 */
.backup-panel { min-width: 0; }
.backup-panel > h2, .backup-panel > h3 { margin: 0; color: var(--text); font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
.backup-panel > p, .backup-note { margin-top: 12px; color: #D1D5EB; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.backup-status { min-width: 0; margin-top: 15px; padding: 12px; border: 1px solid var(--line); background: #19223F; color: var(--gold); font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.backup-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; min-width: 0; margin-top: 18px; }
.backup-actions > button { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding-inline: 8px; overflow-wrap: anywhere; }
.backup-actions .primary-button { margin: 0; }
.backup-note p { margin-top: 9px; }
.backup-note dl { display: grid; gap: 8px; min-width: 0; margin: 12px 0 0; }
.backup-note dt { color: var(--muted); font-size: 12px; line-height: 1.9; }
.backup-note dd { margin: 3px 0 0; color: var(--text); font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.backup-panel label[for="backup-file-selector"] { display: block; min-height: 44px; margin-top: 20px; padding-top: 9px; color: var(--text); font-size: 13px; line-height: 1.9; }
#backup-file-selector { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; margin-top: 5px; padding: 8px; border: 1px solid #66729C; border-radius: 0; background: var(--base); color: var(--text); font: inherit; font-size: 16px; line-height: 1.6; overflow: hidden; }
#backup-file-selector::file-selector-button { max-width: 100%; min-height: 44px; margin-right: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 0; background: var(--panel); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
#backup-file-selector:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
#backup-file-selector:disabled { color: var(--muted); cursor: not-allowed; }
.restore-preview { min-width: 0; margin-top: 20px; padding: 17px 13px; border-color: #8B775B; background: #19223F; }
.restore-preview h3, .restore-preview h4 { margin: 0; color: var(--gold); font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.restore-preview > p { margin-top: 11px; color: #D1D5EB; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.restore-counts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 10px; min-width: 0; margin: 17px 0 0; }
.restore-counts > div { min-width: 0; padding-left: 9px; border-left: 2px solid var(--purple); }
.restore-counts dt { color: var(--muted); font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; }
.restore-counts dd { margin: 4px 0 0; color: var(--text); font-family: var(--mono); font-size: 18px; line-height: 1.6; overflow-wrap: anywhere; }
.restore-warning { min-width: 0; margin-top: 14px; padding: 12px; border-left: 2px solid var(--gold); background: #F2CD7B0B; color: #FFE2A7; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.backup-message { min-width: 0; margin-top: 15px; padding: 12px; border: 1px solid var(--line); font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.backup-message[role="status"] { border-color: var(--green); background: #5DD6B00D; color: #B8F1E0; }
.backup-message[role="alert"] { border-color: var(--gold); background: #F2CD7B0D; color: #FFE2A7; }
.backup-reminder { min-width: 0; margin-bottom: 20px; padding: 15px 13px; border-color: #8B775B; background: #26325C; }
.backup-reminder h2, .backup-reminder h3 { margin: 0; color: var(--gold); font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.backup-reminder p { margin-top: 9px; color: #D1D5EB; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.backup-reminder-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; margin-top: 14px; }
.backup-reminder-actions > button { flex: 1 1 120px; min-width: 0; min-height: 44px; margin: 0; padding-inline: 8px; }
#backup-reminder-dismiss { min-width: 44px; min-height: 44px; }

@media (max-width: 379px) {
  .backup-actions { grid-template-columns: minmax(0,1fr); }
}