:root {
  --paper: #fbf7ee;
  --card: #fffdf7;
  --ink: #26232e;
  --ink-soft: #5d5866;
  --line: #cfc7b6;
  --line-strong: #4a4552;
  --cross: #8a8394;
  --accent: #e0892b;
  --hint: #2f6fb0;
  --hint-bg: #fff4c2;
  --error: #c62f3a;
  --error-bg: #fde3e5;
  --done: #b9b2a4;
  --theme: #c9792b;
  --radius: 12px;
  --cell: 40px;
  --clue-w: 0px;
  --clue-h: 0px;
  font-family: "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--paper);
  background-image: radial-gradient(rgba(38, 35, 46, .045) 1px, transparent 1px);
  background-size: 18px 18px;
  min-height: 100dvh;
}
[hidden] { display: none !important; }
a { color: inherit; }
kbd {
  font: 600 .7em/1 ui-monospace, "Consolas", monospace;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 2px 4px;
  margin-left: 6px;
  color: var(--ink-soft);
  background: var(--card);
}

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 44px; padding: 8px 16px;
  font: inherit; font-weight: 700; color: var(--ink); text-decoration: none;
  background: var(--card);
  border: 2px solid var(--ink); border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
  transition: transform .06s, box-shadow .06s;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: .4; cursor: default; transform: none; box-shadow: 0 3px 0 var(--ink); }
.btn:focus-visible, .tool:focus-visible, .theme-card:focus-visible, .puzzle-card:focus-visible, .zukan-slot:focus-visible {
  outline: 3px solid var(--hint); outline-offset: 3px;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-danger { background: var(--error); color: #fff; }
.btn-ghost { border-color: transparent; box-shadow: none; background: transparent; }
.btn-ghost:active { transform: none; box-shadow: none; background: rgba(0,0,0,.05); }
.btn-small { min-height: 36px; padding: 4px 12px; font-size: .9rem; }
.btn-hint { background: var(--hint-bg); }

/* ---------- お知らせ ---------- */
.notice {
  position: sticky; top: 0; z-index: 50;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 10px 16px; padding-right: 48px;
  background: #fff1d6; border-bottom: 2px solid var(--accent);
  font-size: .92rem;
}
.notice-close {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; background: transparent; font-size: 1.3rem; cursor: pointer;
}

/* ---------- ホーム ---------- */
.screen { max-width: 960px; margin: 0 auto; padding: 16px; }
.home-head { text-align: center; padding: 24px 0 8px; }
.logo { font-size: clamp(1.8rem, 6vw, 2.8rem); margin: 0; letter-spacing: .04em; }
.logo span { display: inline-block; background: var(--ink); color: var(--paper); padding: 0 .25em; margin: 0 .1em; border-radius: 6px; transform: rotate(-2deg); }
.lead { color: var(--ink-soft); line-height: 1.7; margin: 12px 0 0; }
.theme-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 24px 0; }
.theme-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 20px 16px; text-decoration: none;
  background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: 0 5px 0 var(--theme);
  border-top: 10px solid var(--theme);
}
.theme-card:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--theme); }
.theme-name { font-size: 1.4rem; font-weight: 800; }
.theme-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; align-items: center; min-height: 44px; }
.theme-thumbs .art { width: 30px; height: 30px; border: 1px solid var(--line); }
.thumb-unknown {
  width: 30px; height: 30px; border-width: 1.5px !important; font-size: .85rem !important; font-size: 1.1rem !important; display: grid; place-items: center;
  border: 2px dashed var(--line); border-radius: 6px; color: var(--line); font-weight: 800; font-size: 1.3rem;
}
.theme-count { font-weight: 700; color: var(--ink-soft); }
.home-nav { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.foot-links { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.foot { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 32px 0 8px; font-size: .85rem; color: var(--ink-soft); }

/* ---------- バー ---------- */
.bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.bar-title { flex: 1; margin: 0; text-align: center; font-size: 1.25rem; }
.bar-title small { font-size: .85rem; color: var(--ink-soft); }
.bar-spacer { width: 96px; }

/* ---------- 一覧 ---------- */
.size-group { margin-bottom: 22px; }
.size-head { font-size: 1.05rem; margin: 0 0 10px; padding-left: 10px; border-left: 6px solid var(--theme); }
.size-head small { color: var(--ink-soft); font-weight: 600; }
.puzzle-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.puzzle-card {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "no no" "art size" "art name" "art status";
  gap: 4px 14px; align-items: center;
  padding: 16px; text-decoration: none;
  background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: 0 4px 0 var(--ink);
}
.puzzle-card:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.puzzle-no { grid-area: no; font-weight: 800; color: var(--theme); }
.puzzle-art { grid-area: art; width: 72px; height: 72px; display: grid; place-items: center; }
.puzzle-art .art { width: 72px; height: 72px; border: 1px solid var(--line); }
.puzzle-unknown { width: 72px; height: 72px; display: grid; place-items: center; border: 2px dashed var(--line); border-radius: 8px; font-size: 1.8rem; font-weight: 800; color: var(--line); }
.puzzle-size { grid-area: size; font-size: 1.3rem; font-weight: 800; }
.puzzle-name { grid-area: name; color: var(--ink-soft); }
.puzzle-status { grid-area: status; justify-self: start; font-size: .8rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; border: 1.5px solid currentColor; }
.status-done { color: #2c7a3f; }
.status-wip { color: var(--accent); }
.status-new { color: var(--ink-soft); }

/* ---------- 図鑑 ---------- */
.zukan-theme { margin-bottom: 28px; }
.zukan-theme h2 { border-left: 8px solid var(--theme); padding-left: 10px; font-size: 1.2rem; }
.zukan-theme h2 small { color: var(--ink-soft); font-weight: 600; }
.zukan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.zukan-slot {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px; font: inherit; color: inherit;
  background: var(--card); border: 2px dashed var(--line); border-radius: var(--radius);
}
.zukan-slot.is-collected { border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--theme); cursor: pointer; }
.zukan-slot .art { width: 96px; height: 96px; border: 1px solid var(--line); }
.slot-unknown { width: 96px; height: 96px; display: grid; place-items: center; font-size: 2.4rem; font-weight: 800; color: var(--line); }
.slot-name { font-weight: 800; }
.slot-size { font-size: .85rem; color: var(--ink-soft); }
.art { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }

/* ---------- プレイ ---------- */
.screen-play { max-width: none; padding: 0; height: 100dvh; display: flex; flex-direction: column; }
.play-bar { padding: 6px 10px; margin: 0; border-bottom: 2px solid var(--ink); background: var(--card); }
.play-bar .bar-title { font-size: 1.05rem; }
.play-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr minmax(240px, 320px); }
.board-area { position: relative; min-width: 0; min-height: 0; padding: 10px; }
.board-scroll {
  width: 100%; height: 100%; overflow: auto; overscroll-behavior: contain;
  display: flex;
  border-radius: var(--radius);
}
.board-scroll > .board-grid { margin: auto; } /* 収まるときは中央、はみ出すときは端からスクロール */
.side {
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px; overflow-y: auto;
  border-left: 2px solid var(--ink); background: var(--card);
}

/* 盤面 */
.board-grid {
  display: grid;
  grid-template-columns: max-content repeat(var(--n), var(--cell));
  grid-template-rows: max-content repeat(var(--n), var(--cell));
  background: var(--card);
  border: 2px solid var(--line-strong);
  user-select: none; -webkit-user-select: none;
  --clue-font: max(13px, calc(var(--cell) * .46));
}
.clue-corner { position: sticky; top: 0; left: 0; z-index: 4; background: var(--paper); border-right: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong); }
.col-clue, .row-clue {
  display: flex; font-weight: 800; font-size: var(--clue-font); line-height: 1.15;
  background: #f4eedf; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.col-clue {
  position: sticky; top: 0; z-index: 3;
  flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 6px 0 4px; gap: 1px;
  border-right: 1px solid var(--line); border-bottom: 2px solid var(--line-strong);
}
.row-clue {
  position: sticky; left: 0; z-index: 3;
  flex-direction: row; justify-content: flex-end; align-items: center;
  padding: 0 6px; gap: .45em;
  border-bottom: 1px solid var(--line); border-right: 2px solid var(--line-strong);
}
.row-clue span { min-width: .7em; text-align: center; }
.col-clue.thick-x { border-right: 2px solid var(--line-strong); }
.row-clue.thick-y { border-bottom: 2px solid var(--line-strong); }
.col-clue.is-done, .row-clue.is-done { color: var(--done); }
.col-clue.hint-clue, .row-clue.hint-clue { background: var(--hint-bg); color: var(--hint); box-shadow: inset 0 0 0 3px var(--hint); }

.cell {
  position: relative;
  width: var(--cell); height: var(--cell);
  margin: 0; padding: 0;
  border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--card);
  font: 700 calc(var(--cell) * .62)/1 system-ui, sans-serif; color: var(--cross);
  cursor: pointer;
  touch-action: manipulation;
  scroll-margin: calc(var(--clue-h) + 8px) 8px 8px calc(var(--clue-w) + 8px);
  -webkit-tap-highlight-color: transparent;
}
.cell.thick-x { border-right: 2px solid var(--line-strong); }
.cell.thick-y { border-bottom: 2px solid var(--line-strong); }
@media (hover: hover) { .board-grid:not(.is-locked) .cell:hover { background: #f1ead8; } }
.cell.is-fill { background: var(--ink); }
@media (hover: hover) { .board-grid:not(.is-locked) .cell.is-fill:hover { background: #3a3644; } }
.cell.is-cross::before { content: "×"; position: absolute; inset: 0; display: grid; place-items: center; }
.cell.is-selected { outline: 3px solid var(--accent); outline-offset: -3px; z-index: 1; }
.cell:focus { outline: none; }
.cell:focus-visible, .cell.is-selected:focus { outline: 3px solid var(--accent); outline-offset: -3px; }
.cell.hint-line:not(.is-fill) { background: var(--hint-bg); }
.cell.hint-target { outline: 3px dashed var(--hint); outline-offset: -4px; z-index: 2; animation: pulse 1s ease-in-out infinite alternate; }
.cell.hint-target::after {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: calc(var(--cell) * .5); color: var(--hint);
}
.cell.hint-fill::after { content: "■"; }
.cell.hint-cross::after { content: "×"; }
.cell.is-error { box-shadow: inset 0 0 0 3px var(--error); background: var(--error-bg); z-index: 2; animation: shake .3s; }
.cell.is-fill.is-error { background: var(--ink); }
.cell.is-error::after {
  content: "!"; position: absolute; top: -2px; right: 1px;
  font-size: calc(var(--cell) * .42); font-weight: 900; color: var(--error);
}
.board-grid.is-locked .cell { cursor: default; }
.is-completed .board-grid .cell.is-cross::before { content: ""; }

/* 指でなぞって塗る：盤面のマスでは指のスクロールを止める（数字の部分ではスクロールできる） */
.board-grid.touch-paint .cell { touch-action: none; touch-action: pinch-zoom; }

/* 完成時のカラー表示（左上から順に色づく） */
.board-grid.is-revealed .cell,
.board-grid.is-revealed .cell.is-fill { background: var(--art); border-color: color-mix(in srgb, var(--art) 82%, #000 18%); }
.board-grid.is-revealed .cell.is-selected { outline: none; }
.board-grid.reveal-animate .cell { transition: background-color .45s ease var(--d, 0ms), border-color .45s ease var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) { .board-grid.reveal-animate .cell { transition: none; } }
.is-completed .board-grid { border-color: var(--theme); box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme) 35%, transparent); }

@keyframes pulse { from { outline-color: var(--hint); } to { outline-color: transparent; } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) {
  .cell.hint-target, .cell.is-error { animation: none; }
}

/* 操作欄 */
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tool {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 64px; padding: 6px 4px;
  font: inherit; font-weight: 700; font-size: .95rem; color: var(--ink);
  background: var(--paper); border: 2px solid var(--line); border-radius: 10px; cursor: pointer;
}
.tool kbd { margin: 0; font-size: .65rem; }
.tool.is-on { border-color: var(--ink); background: #fff; box-shadow: inset 0 -4px 0 var(--accent); }
.tool:disabled { opacity: .4; cursor: default; }
.tool-icon { width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 3px; display: grid; place-items: center; font-size: 18px; line-height: 1; color: var(--cross); }
.icon-fill { background: var(--ink); }
.icon-erase { background: repeating-linear-gradient(45deg, transparent 0 4px, var(--line) 4px 6px); border-style: dashed; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zoom { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: .9rem; color: var(--ink-soft); }
.touch-opt { display: none; }
@media (any-pointer: coarse) { .touch-opt { display: block; } }
.switch { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .92rem; cursor: pointer; min-height: 44px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px; background: var(--line); border: 2px solid var(--ink); transition: background .15s; }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); transition: transform .15s; }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--hint); outline-offset: 2px; }
.touch-note { margin: 0; font-size: .78rem; color: var(--ink-soft); line-height: 1.5; }
.message { min-height: 1.5em; margin: 0; font-size: .92rem; line-height: 1.5; }
.message.is-error { color: var(--error); font-weight: 700; padding: 8px 10px; background: var(--error-bg); border-left: 4px solid var(--error); border-radius: 6px; }
.side-foot { margin-top: auto; display: flex; justify-content: space-between; }

/* ヒント欄 */
.hint-panel { position: relative; padding: 12px; border: 2px solid var(--hint); border-radius: 10px; background: #f3f8fd; font-size: .9rem; line-height: 1.55; }
.hint-panel h2 { font-size: .95rem; margin: 0 28px 6px 0; color: var(--hint); }
.hint-panel p { margin: 6px 0; }
.hint-close { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; background: transparent; font-size: 1.2rem; cursor: pointer; }
.hint-verdict { font-weight: 800; font-size: 1rem; }
.hint-badge { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: .85rem; }
.badge-fill { background: var(--ink); color: #fff; }
.badge-cross { background: #fff; border: 2px solid var(--ink); }
.hint-warn { color: var(--error); font-weight: 700; }
.cand-fig { display: grid; gap: 4px; margin: 8px 0 4px; overflow-x: auto; }
.cand-row { display: flex; align-items: center; gap: 6px; }
.cand-label { width: 3em; flex: none; font-size: .75rem; color: var(--ink-soft); text-align: right; }
.cand-cells { display: grid; grid-template-columns: repeat(var(--n), var(--cc, 14px)); }
.cc { width: var(--cc, 14px); height: var(--cc, 14px); border: 1px solid var(--line); margin: 0 -1px -1px 0; background: #fff; font-size: 11px; line-height: 12px; text-align: center; color: var(--cross); }
.cc.f { background: var(--ink); }
.cc.t { outline: 2px solid var(--hint); outline-offset: -1px; position: relative; z-index: 1; }
.cand-row:first-child .cc.t { box-shadow: inset 0 0 0 2px var(--hint); }
.cand-note { font-size: .78rem; color: var(--ink-soft); }

.done-panel { padding: 12px; border: 2px solid var(--theme); border-radius: 10px; background: #fff; }
.done-title { margin: 0 0 8px; font-weight: 800; font-size: 1.05rem; }
.done-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* 縦向き案内 */
.rotate-hint { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(38,35,46,.55); padding: 16px; }
.rotate-card { background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius); padding: 24px; text-align: center; max-width: 320px; }
.rotate-icon { width: 40px; height: 64px; margin: 0 auto 8px; border: 4px solid var(--ink); border-radius: 8px; animation: turn 1.6s ease-in-out infinite; }
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

/* ---------- ダイアログ ---------- */
.dlg { border: 2px solid var(--ink); border-radius: 16px; padding: 20px; max-width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); background: var(--card); color: var(--ink); box-shadow: 0 8px 0 var(--ink); }
.dlg::backdrop { background: rgba(38,35,46,.5); }
.dlg h2 { margin: 0 0 8px; }
.dlg-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.dlg-close { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border: 0; background: transparent; font-size: 1.4rem; cursor: pointer; }
.dlg-clear { text-align: center; position: relative; }
.clear-kicker { margin: 0 0 8px; font-size: 1.5rem; font-weight: 900; color: var(--accent); letter-spacing: .1em; }
.clear-art { display: grid; place-items: center; margin-bottom: 8px; }
.clear-art .art { width: min(200px, 50dvh); height: min(200px, 50dvh); border: 2px solid var(--ink); }
.dlg-howto { line-height: 1.7; }
.howto-body h3 { font-size: 1rem; margin: 14px 0 4px; }
.howto-body ol { padding-left: 1.3em; }
.howto-example { display: flex; align-items: center; gap: 0; margin: 8px 0; }
.hx-clue { font-weight: 800; padding: 0 10px; background: #f4eedf; height: 30px; line-height: 30px; }
.hx { width: 30px; height: 30px; border: 1px solid var(--line); margin-left: -1px; display: grid; place-items: center; color: var(--cross); font-weight: 700; background: #fff; }
.hx.f { background: var(--ink); }
.noscript { padding: 24px; text-align: center; }

/* ---------- 小さい画面 ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .play-bar { padding: 2px 8px; }
  .play-bar .btn { min-height: 36px; padding: 4px 10px; }
  .side { gap: 8px; padding: 8px; }
  .tool { min-height: 50px; flex-direction: row; justify-content: center; gap: 6px; }
  .tool kbd { display: none; }
  .play-body { grid-template-columns: 1fr minmax(220px, 280px); }
  .board-area { padding: 6px; }
}
@media (orientation: portrait) and (max-width: 820px) {
  .screen-play { height: auto; min-height: 100dvh; }
  .play-body { grid-template-columns: 1fr; grid-template-rows: 62dvh auto; }
  .side { border-left: 0; border-top: 2px solid var(--ink); }
}

/* ---------- きょうの1問 ---------- */
.daily-card {
  display: flex; align-items: center; gap: 14px;
  margin: 20px auto 0; max-width: 720px; padding: 14px 18px;
  background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: 0 5px 0 var(--accent); text-decoration: none;
}
.daily-card:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--accent); }
.daily-card:focus-visible { outline: 3px solid var(--hint); outline-offset: 3px; }
.daily-badge { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 900; font-size: 1.05rem; }
.daily-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.daily-title { font-weight: 800; font-size: 1.1rem; }
.daily-sub { font-size: .85rem; color: var(--ink-soft); }
.daily-go { font-weight: 800; color: var(--accent); white-space: nowrap; }
.daily-card .art { width: 52px; height: 52px; border: 1px solid var(--line); }
.daily-today { display: flex; gap: 18px; align-items: center; padding: 16px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 0 4px 0 var(--accent); }
.daily-today-art { flex: none; width: 120px; height: 120px; display: grid; place-items: center; }
.daily-today-art .art { width: 120px; height: 120px; border: 1px solid var(--line); }
.daily-today-art .puzzle-unknown { width: 110px; height: 110px; font-size: 2.4rem; }
.daily-today-info p { margin: 0 0 6px; }
.daily-date { font-size: 1.3rem; font-weight: 800; }
.daily-size { font-weight: 700; }
.daily-note { color: var(--ink-soft); font-size: .9rem; }
.daily-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.stat { display: flex; flex-direction: column; align-items: center; padding: 10px; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); }
.stat-num { font-size: 1.8rem; font-weight: 900; color: var(--accent); line-height: 1.1; }
.stat-label { font-size: .85rem; color: var(--ink-soft); font-weight: 700; }
.daily-calendar h2, .daily-rewards h2 { font-size: 1.05rem; border-left: 6px solid var(--accent); padding-left: 10px; }
.daily-rewards h2 small { color: var(--ink-soft); font-weight: 600; font-size: .8rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 520px; }
.cal-head { text-align: center; font-size: .8rem; font-weight: 700; color: var(--ink-soft); }
.cal-cell { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: var(--card); border: 1.5px solid var(--line); border-radius: 8px; font-size: .8rem; }
.cal-cell.is-blank { visibility: hidden; }
.cal-cell.is-today { border-color: var(--accent); border-width: 3px; }
.cal-day { position: absolute; top: 2px; left: 5px; font-weight: 700; color: var(--ink-soft); }
.cal-cell .art { width: 56%; height: 56%; margin-top: 18%; }
.cal-cell.is-stamped { background: #fff3e2; }
.cal-cell.is-stamped::after { content: "★"; position: absolute; top: 0; right: 4px; color: var(--accent); font-size: .85rem; }
.reward-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.reward { display: grid; grid-template-columns: 60px 1fr auto auto; align-items: center; gap: 12px; padding: 10px 14px; background: var(--card); border: 2px dashed var(--line); border-radius: var(--radius); }
.reward.is-open { border: 2px solid var(--ink); box-shadow: 0 3px 0 #d4a017; }
.reward .art { width: 56px; height: 56px; border: 1px solid var(--line); }
.reward-lock { width: 56px; height: 56px; display: grid; place-items: center; font-size: 1.5rem; color: var(--line); border-radius: 8px; background: var(--paper); }
.reward.is-open .reward-lock { color: #d4a017; font-weight: 900; }
.reward-name { font-weight: 800; }
.reward-meta { font-size: .85rem; color: var(--ink-soft); white-space: nowrap; }
.daily-foot { font-size: .8rem; color: var(--ink-soft); margin-top: 18px; }
#clear-sub { white-space: pre-line; }
@media (max-width: 520px) {
  .reward { grid-template-columns: 56px 1fr; }
  .daily-today { flex-direction: column; text-align: center; }
}