/* Phase-1 extras: 実績（バッジ）・図鑑・マンスリーチャレンジ (web/app/js/achievements.js, challenge.js).
   All classes are prefixed "lx-". Colours fall back to the main palette (style.css :root) when present. */
.lx-panel, .lx-challenge, .lx-unlock {
  --lx-panel: var(--c-panel, #C2E8E4);
  --lx-light: var(--c-panel-light, #DAF1EF);
  --lx-accent: var(--c-accent, #09B2A8);
  --lx-dark: var(--c-teal-700, #2A6E66);
  --lx-text: var(--c-text, #0F172A);
  --lx-warn: var(--c-warn, #E8524A);
  --lx-bronze: #C98A4B; --lx-silver: #A9B4BE; --lx-gold: #E6B422; --lx-platinum: #7FD3E8;
  font-family: var(--font, "Noto Sans JP", sans-serif);
  color: var(--lx-text);
  user-select: text;
}
.lx-muted { color: #4b5d5b; font-size: 13px; margin: 6px 0; }
.lx-error { color: var(--lx-warn); font-weight: 700; min-height: 1em; margin: 6px 0; }
.lx-big { font-size: 28px; font-weight: 900; color: var(--lx-dark); }
.lx-sep { color: #8aa; margin: 0 6px; }
.lx-no { font-weight: 700; color: var(--lx-dark); margin-right: 8px; font-variant-numeric: tabular-nums; }

/* tabs */
.lx-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.lx-tabs { display: flex; gap: 6px; border-bottom: 3px solid var(--lx-accent); margin-bottom: 12px; flex-wrap: wrap; }
.lx-tab { border: 0; background: var(--lx-light); padding: 8px 18px; border-radius: 8px 8px 0 0; cursor: pointer; font-weight: 700; color: var(--lx-dark); }
.lx-tab[aria-selected="true"] { background: var(--lx-accent); color: #fff; }
.lx-tabs-sm .lx-tab { padding: 4px 12px; font-size: 13px; }
.lx-tab-body { overflow: auto; min-height: 0; flex: 1; padding-right: 4px; }

/* summary */
.lx-summary { background: var(--lx-light); border-radius: 10px; padding: 10px 16px; margin-bottom: 12px; }
.lx-summary-main { font-weight: 700; }
.lx-progress { height: 10px; background: #fff; border-radius: 5px; overflow: hidden; margin: 6px 0; }
.lx-progress-bar { height: 100%; background: linear-gradient(90deg, var(--lx-accent), var(--lx-gold)); }
.lx-stats { font-size: 13px; color: #34514d; }

/* badges */
.lx-badge {
  flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 35% 30%, #fff8 0 18%, transparent 19%), var(--lx-tier, #ccc);
  box-shadow: inset 0 -4px 0 #0002, 0 0 0 3px #fff, 0 0 0 5px var(--lx-tier, #ccc);
}
.lx-badge-lg { width: 72px; height: 72px; }
.lx-badge-glyph { font-weight: 900; font-size: 20px; color: #fff; text-shadow: 0 1px 2px #0006; letter-spacing: -1px; }
.lx-badge-lg .lx-badge-glyph { font-size: 28px; }
.lx-tier-bronze { --lx-tier: var(--lx-bronze); }
.lx-tier-silver { --lx-tier: var(--lx-silver); }
.lx-tier-gold { --lx-tier: var(--lx-gold); }
.lx-tier-platinum { --lx-tier: var(--lx-platinum); }
.lx-badge.lx-locked { --lx-tier: #c7d0cf; filter: grayscale(1); opacity: .55; }

/* achievement cards */
.lx-group { margin-bottom: 14px; }
.lx-group-title { font-size: 17px; margin: 0 0 8px; padding-left: 8px; border-left: 6px solid var(--lx-accent); display: flex; align-items: baseline; gap: 10px; }
.lx-count { font-size: 13px; color: #4b5d5b; font-weight: 400; }
.lx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.lx-card { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 10px; padding: 10px 12px; box-shadow: 0 1px 3px #0002; }
.lx-card:focus-visible { outline: 3px solid var(--lx-accent); }
.lx-card-locked { background: #f3f6f6; }
.lx-card-name { font-weight: 700; }
.lx-card-locked .lx-card-name { color: #6b7b79; }
.lx-card-desc { font-size: 13px; color: #34514d; margin-top: 2px; }
.lx-card-meta { font-size: 12px; color: #6b7b79; margin-top: 4px; }

/* collections */
.lx-book-body { display: grid; grid-template-columns: 1fr 340px; gap: 12px; min-height: 0; }
.lx-book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; align-content: start; }
.lx-cell { border: 2px solid transparent; background: #fff; border-radius: 8px; padding: 4px; display: flex; flex-direction: column; align-items: center; cursor: pointer; font-family: inherit; min-height: 112px; }
.lx-cell:hover:not(:disabled), .lx-cell.lx-active { border-color: var(--lx-accent); }
.lx-cell-locked { background: #e6eded; cursor: default; }
.lx-cell-no { align-self: flex-start; font-size: 11px; color: #6b7b79; }
.lx-cell-img { width: 72px; height: 54px; object-fit: contain; }
.lx-cell-q { width: 72px; height: 54px; display: grid; place-items: center; font-size: 28px; font-weight: 900; color: #b5c3c1; }
.lx-cell-title { font-size: 11px; line-height: 1.3; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lx-book-detail { background: #fff; border-radius: 10px; padding: 12px; align-self: start; position: sticky; top: 0; }
.lx-detail-head { display: flex; justify-content: space-between; margin-bottom: 6px; }
.lx-kind { font-size: 12px; background: var(--lx-light); border-radius: 10px; padding: 1px 8px; }
.lx-detail-img { width: 100%; max-height: 180px; object-fit: contain; }
.lx-detail-text, .lx-outcome { white-space: pre-line; font-size: 14px; line-height: 1.6; }
.lx-outcomes { border-top: 1px dashed #b8cfcc; margin-top: 6px; }
.lx-outcomes-title { font-size: 12px; color: #4b5d5b; margin-top: 6px; }
.lx-outcome { font-size: 13px; margin: 4px 0; }
.lx-quiz-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.lx-quiz { background: #fff; border-radius: 8px; padding: 8px 12px; }
.lx-quiz summary { cursor: pointer; }
.lx-quiz-locked { background: #eef3f2; color: #6b7b79; }
.lx-quiz-q { white-space: pre-line; }
.lx-quiz-a { display: flex; gap: 12px; align-items: flex-start; margin-top: 8px; }
.lx-quiz-a p { margin: 0; white-space: pre-line; font-size: 14px; line-height: 1.6; }
.lx-answer { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-weight: 900; color: #fff; }
.lx-maru { background: #e8524a; }
.lx-batsu { background: #3d7bd9; }

/* unlock popup */
.lx-unlock { position: absolute; inset: 0; display: grid; place-items: center; background: #0006; z-index: 50; }
.lx-unlock-card { background: var(--lx-panel); border-radius: 14px; padding: 20px 28px; min-width: 380px; max-width: 640px; text-align: center; box-shadow: 0 10px 30px #0005; animation: lx-pop .35s ease-out; }
.lx-unlock-title { font-size: 22px; font-weight: 900; color: var(--lx-dark); margin-bottom: 12px; }
.lx-unlock-list { display: grid; gap: 10px; margin-bottom: 14px; text-align: left; max-height: 420px; overflow: auto; }
.lx-unlock-item { display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 10px; padding: 8px 12px; }
@keyframes lx-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lx-unlock-card { animation: none; } }

/* buttons, forms */
.lx-btn { border: 0; border-radius: 8px; padding: 8px 20px; font-weight: 700; cursor: pointer; background: #fff; color: var(--lx-dark); box-shadow: 0 1px 3px #0003; margin: 4px 6px 4px 0; font-family: inherit; }
.lx-btn-primary { background: var(--lx-accent); color: #fff; }
.lx-btn:hover:not(:disabled) { filter: brightness(1.08); }
.lx-btn:disabled { opacity: .5; cursor: default; }
.lx-form { display: grid; gap: 8px; margin: 8px 0; }
.lx-form label { display: grid; grid-template-columns: 110px 1fr; align-items: center; font-weight: 700; font-size: 14px; }
.lx-form input { padding: 6px 8px; border: 1px solid #9bb; border-radius: 6px; font-family: inherit; font-size: 15px; min-width: 0; }
.lx-inline { display: flex; gap: 6px; }
.lx-inline input { width: 6em; }

/* challenge */
.lx-challenge { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.lx-challenge > .lx-ch-card { grid-row: span 2; }
.lx-ch-card, .lx-ch-rank, .lx-result { background: var(--lx-light); border-radius: 12px; padding: 14px 18px; }
.lx-result { grid-template-columns: 1fr; }
.lx-ch-label { display: inline-block; background: var(--lx-accent); color: #fff; font-size: 12px; font-weight: 700; border-radius: 10px; padding: 2px 10px; }
.lx-ch-title { margin: 6px 0; font-size: 20px; }
.lx-setup { border-collapse: collapse; margin: 8px 0; font-size: 14px; }
.lx-setup th { text-align: left; padding: 3px 12px 3px 0; color: var(--lx-dark); white-space: nowrap; vertical-align: top; }
.lx-setup td { padding: 3px 0; }
.lx-status { border-radius: 8px; padding: 6px 10px; margin: 8px 0; font-size: 14px; font-weight: 700; background: #fff; }
.lx-status-new { background: #fff6cc; }
.lx-status-done { background: #dff7e9; }
.lx-actions p { margin: 6px 0; }
.lx-result-main { display: flex; gap: 24px; align-items: center; }
.lx-result-big { font-size: 40px; font-weight: 900; color: var(--lx-dark); }

/* ranking */
.lx-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border-radius: 8px; overflow: hidden; }
.lx-table th { background: var(--lx-accent); color: #fff; padding: 5px 8px; text-align: left; font-size: 13px; }
.lx-table td { padding: 5px 8px; border-top: 1px solid #e3eceb; }
.lx-table .lx-num { text-align: right; font-variant-numeric: tabular-nums; }
.lx-rank { font-weight: 900; color: var(--lx-dark); text-align: center; }
.lx-me td { background: #fff6cc; font-weight: 700; }
.lx-gap td { text-align: center; color: #8aa; padding: 0; }
.lx-tag { font-size: 12px; border-radius: 10px; padding: 1px 8px; color: #fff; }
.lx-tag-ok { background: #3a9e6b; }
.lx-tag-ng { background: #9a8f8f; }

/* (no @media on the window size: these screens live in the 1280x720 stage, which is scaled as a whole) */

/* ------------------------------------------------------------------ wiring into the main screens */
.modal.lx-modal { width: 1200px; height: 680px; }
.modal.lx-modal .body { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.lx-modal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lx-modal-body > .lx-panel { flex: 1; min-height: 0; }

.lx-screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 20px 28px; background: #84D1C9e6; }
.lx-screen-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lx-screen-head h1 { margin: 0; font-size: 28px; color: var(--c-teal-800, #205850); }
.lx-screen-btns { display: flex; gap: 10px; }
.lx-screen-body { flex: 1; min-height: 0; overflow: auto; }

.lx-quickbar { position: absolute; right: 16px; bottom: 12px; display: flex; gap: 8px; z-index: 5; }

.lx-chbadge {
  position: absolute; top: 428px; left: 780px; width: 492px; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 14px; border-radius: 16px;
  background: #ff9f1c; color: #fff; font-weight: 900; font-size: 14px; box-shadow: 0 2px 6px #0004; white-space: nowrap;
}
.lx-chbadge button { border: 0; border-radius: 12px; background: #fff; color: #b35f00; font-weight: 700; font-size: 12px; padding: 2px 10px; cursor: pointer; }

.lx-go { overflow: auto; }
.lx-go .lx-challenge.lx-result { display: block; }
.lx-go-btns { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }