:root {
  --bg: #f7f1e6;
  --surface: #fffaf0;
  --surface-alt: #f0e8d9;
  --ink: #29251f;
  --muted: #746b5f;
  --placeholder: #625b52;
  --line: #d9cdbb;
  --flame: #b6402b;
  --flame-light: #ffb52e;
  --danger: #b9362c;
  --char: #241a10;
  --title-ink: #fff9ef;
  font-family: "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; padding: env(safe-area-inset-top) 16px calc(40px + env(safe-area-inset-bottom)); background: var(--bg); color: var(--ink); line-height: 1.6; overflow-wrap: anywhere; }
.app-header, main { width: min(100%, 480px); margin-inline: auto; }
.app-header { padding: 28px 0 18px; border-bottom: 1px solid var(--line); }
.header-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.icon-btn { flex-shrink:0; width:40px; height:40px; margin-top:2px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.icon-btn:hover { border-color:var(--flame-light); color:var(--flame); }
.history-header-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.view { display:none; }
.view.view--active { display:block; }
h1, h2, .card-title { font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; }
h1 { margin: 0; font-size: clamp(1.6rem, 8vw, 2.15rem); letter-spacing: .14em; font-weight: 600; }
.tagline { margin: 4px 0 0; color: var(--muted); font-size: .8rem; }
.app-version { width: min(100%, 480px); margin: 12px auto 0; text-align: center; font-size: .7rem; color: var(--muted); opacity: .7; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.add-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 24px 0 30px; align-items: stretch; }
.add-form input { min-width: 0; min-height: 48px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; }
.add-form input::placeholder { color: var(--placeholder); opacity: 1; }
.btn-ignite { min-width: 48px; min-height: 48px; padding: 10px 18px; border: 0; border-radius: 10px; background: var(--flame); color: #fffaf0; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--flame-light); outline-offset: 2px; }
.list-section { margin-bottom: 28px; }
h2 { display:flex; align-items:center; gap:8px; margin: 0 0 12px; font-size: 1.05rem; font-weight: 600; }
h2::before { content:""; width:4px; height:1.2em; border-radius:2px; background:var(--flame); }
.card-list { display:flex; flex-direction:column; gap:12px; list-style:none; padding:0; margin:0; }
.empty-note { margin:0; padding:22px 12px; color:var(--muted); text-align:center; font-size:.86rem; }
.card { min-width:0; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 3px 0 rgba(75,53,27,.06); }
/* 横スワイプで削除を出す。liの位置・状態(dataset/tabIndex/クラス)は変えず、中身だけ .swipe-content に包んでスライドさせる */
.swipe-cell { position:relative; overflow:hidden; border-radius:12px; margin-bottom:0; }
.swipe-actions { position:absolute; top:0; right:0; bottom:0; display:flex; align-items:stretch; }
.swipe-btn { width:72px; border:none; font:inherit; font-weight:700; font-size:.82rem; color:#fff9ef; cursor:pointer; }
.swipe-btn.btn-delete { min-width:0; min-height:0; border:none; border-radius:0; background:var(--danger); color:#fff9ef; }
.swipe-content { position:relative; z-index:1; touch-action:pan-y; transition:transform .25s ease; }
.swipe-content.dragging { transition:none; }
.task-row { display:grid; align-items:center; gap:10px; }
.task-row--burning { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
/* 燃えるノート: タイトル自体が右端から焦げていく一行デザイン。
   文字は白抜きで統一し、縁取り(text-shadow)でどちらの背景の上でも読めるようにする。 */
.fuse-note {
  position:relative; flex:1 1 auto; min-width:0; height:48px; border-radius:10px; overflow:hidden;
  background:linear-gradient(100deg,var(--flame-light),var(--flame) 70%);
}
.fuse-note::before {
  content:""; position:absolute; inset:0 0 0 var(--burn-edge);
  background:linear-gradient(90deg,var(--char),#120d08 85%);
  clip-path:polygon(100% 0,4px 0,0 18%,5px 34%,0 50%,4px 66%,0 82%,3px 100%,100% 100%);
}
.fuse-note::after {
  content:""; position:absolute; top:-4px; bottom:-4px; left:var(--burn-edge); width:18px; transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--flame),#fff6b0,var(--flame-light),transparent); filter:blur(3px);
}
.fuse-title {
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; padding:0 14px;
  color:var(--title-ink); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:-1px -1px 1px rgba(0,0,0,.6),1px -1px 1px rgba(0,0,0,.6),-1px 1px 1px rgba(0,0,0,.6),1px 1px 1px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.45);
}
.task-row__actions { flex-shrink:0; align-self:center; }
.task-row--burning .task-row__meta { flex-basis:100%; order:3; }
.task-row__meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 9px; min-width:0; margin-top:8px; color:var(--muted); font-size:.78rem; }
.status-badge { padding:2px 7px; border:1px solid currentColor; border-radius:999px; font-weight:700; white-space:nowrap; }
.status-badge__text { color:var(--flame); }
.remaining { font-variant-numeric:tabular-nums; }
.remaining.urgent { color:var(--danger); font-weight:700; }
.btn-start, .btn-reignite, .btn-delete { min-width:44px; min-height:44px; padding:8px 12px; border:1px solid var(--flame); border-radius:9px; background:transparent; color:var(--flame); font:inherit; cursor:pointer; white-space:nowrap; }
.btn-start:hover, .btn-reignite:hover { background:#fff0df; }
.task-row--unexploded { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; background:var(--surface-alt); border-color:#c8baa7; }
.unexploded-note { min-width:0; flex:1 1 auto; }
.unexploded-note__title { margin:0; }
.unexploded-actions { display:flex; gap:7px; flex-shrink:0; }
.btn-delete { border-color:var(--danger); color:var(--danger); }
.history-summary { display:flex; flex-direction:row; gap:8px; margin:0 0 16px; }
.stat { flex:1 1 0; min-width:0; padding:14px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); text-align:center; }
.stat__value { margin:0; font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); }
.stat__label { margin:4px 0 0; color:var(--muted); font-size:.78rem; }
.history-row__title { margin:0; }
.history-row__meta { margin:5px 0 0; color:var(--muted); font-size:.78rem; }
.btn-clear-history { margin:0 0 12px; padding:8px 14px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--muted); font:inherit; font-size:.82rem; cursor:pointer; }
.btn-clear-history:hover { border-color:var(--danger); color:var(--danger); }
.save-error { margin: 0 0 18px; padding: 12px 14px; border: 2px solid var(--danger); border-radius: 10px; background: #fff1ed; color: var(--danger); font-weight: 700; }
.app-dialog {
  width: min(calc(100% - 32px), 360px);
  max-width: calc(100% - 32px);
  padding: 20px 18px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 12px 40px rgba(36, 26, 16, .18);
}
.app-dialog::backdrop { background: rgba(36, 26, 16, .45); }
.app-dialog__title { margin: 0 0 8px; font-size: 1.05rem; font-weight: 600; }
.app-dialog__message { margin: 0 0 18px; color: var(--ink); font-size: .92rem; }
.app-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; }
.app-dialog__cancel, .app-dialog__ok {
  min-width: 44px; min-height: 44px; padding: 8px 14px; border-radius: 9px;
  font: inherit; cursor: pointer; white-space: nowrap;
}
.app-dialog__cancel { border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.app-dialog__cancel:hover { border-color: var(--ink); color: var(--ink); }
.app-dialog__ok { border: 0; background: var(--flame); color: var(--title-ink); font-weight: 700; }
.app-dialog__ok--danger { background: var(--danger); }
.burn-out { animation:burnout 1.6s ease-in forwards; }
@keyframes burnout { to { opacity:0; transform:translateY(8px); filter:grayscale(1); } }
@media screen and (min-width: 320px) { .add-form { grid-template-columns:minmax(0,1fr) auto; } }
@media screen and (max-width: 320px) { body { padding-inline:12px; } }
@media screen and (min-width: 600px) { body { padding-inline:24px; } }
.owned-section { margin: 28px 0 24px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.store-link-row { margin: 0 0 12px; }
.skin-catalog[hidden] { display:none; }
.store-heading-row { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.store-section h2 { margin-bottom:4px; }
.store-section > p { margin:0 0 12px; color:var(--muted); font-size:.82rem; }
.store-note { color:var(--muted); font-size:.72rem; }
.skin-catalog { display:grid; gap:10px; list-style:none; margin:0; padding:0; }
.skin-card { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:8px; padding:10px; border:1px solid var(--line); border-radius:10px; }
.skin-card__swatch { width:28px; height:28px; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(255,255,255,.5); }
.skin-card strong { display:block; }
.skin-card > span:not(.skin-card__swatch) { color:var(--muted); font-size:.75rem; }
.skin-card__actions { grid-column:2 / -1; display:flex; gap:7px; }
.skin-card button, .skin-free, .skin-store-link { min-height:40px; padding:6px 10px; border:1px solid var(--skin-accent, var(--flame)); border-radius:8px; background:transparent; color:var(--skin-accent, var(--flame)); font:inherit; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.skin-card button:last-child, .skin-store-link { background:var(--skin-accent, var(--flame)); color:#fffaf0; }
.skin-card button:disabled, .skin-store-link:disabled { opacity:.55; cursor:default; }
.skin-free { width:100%; margin-top:2px; border-color:var(--line); color:var(--ink); }
.store-status { min-height:1.4em; margin-top:10px !important; color:var(--skin-accent, var(--flame)) !important; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }