:root {
  --surface: #fff;
  --ink: #172036;
  --muted: #7b8499;
  --line: #dce1ea;
  --line-strong: #3d4559;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --on-accent: #fff;
  --filled: var(--accent);
  --related: #edf0f6;
  --same: color-mix(in srgb, var(--accent) 22%, var(--surface));
  --selected: color-mix(in srgb, var(--accent) 36%, var(--surface));
  --error: #d2384e;
  --error-bg: #fbdde2;
  --gold: #e3a92b;
  --silver: #9aa3b5;
  --bronze: #c07b4a;
  --shadow: 0 1px 2px rgb(23 32 54 / .06), 0 4px 12px rgb(23 32 54 / .08);
  --num: "Lexend", "Zen Kaku Gothic New", system-ui, sans-serif;
  --tnum: system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #1a1f2c;
    --ink: #e7eaf2;
    --muted: #8c94a8;
    --line: #2c3343;
    --line-strong: #a3abbf;
    --accent-soft: color-mix(in srgb, var(--accent) 11%, var(--surface));
    --on-accent: #0e1424;
    --filled: color-mix(in srgb, var(--accent) 80%, #fff);
    --related: #222838;
    --same: color-mix(in srgb, var(--accent) 25%, var(--surface));
    --selected: color-mix(in srgb, var(--accent) 42%, var(--surface));
    --error: #ff7a88;
    --error-bg: #4a2329;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 4px 12px rgb(0 0 0 / .35);
    color-scheme: dark;
  }
}

:root, [data-skin=urushi] { --accent: #24407e; --ring: #c9a24a; }
[data-skin=sakura] { --accent: #c4456f; --ring: var(--accent); }
[data-skin=jewel] { --accent: #7a3fc4; --ring: var(--accent); }
[data-skin=night] { --accent: #3f4fb8; --ring: var(--accent); }
[data-skin=kinbyobu] { --accent: #97690f; --ring: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root, [data-skin=urushi] { --accent: #93a9e6; }
  [data-skin=sakura] { --accent: #ff9cc0; }
  [data-skin=jewel] { --accent: #c9a2ff; }
  [data-skin=night] { --accent: #a3b2ff; }
  [data-skin=kinbyobu] { --accent: #f0c75e; }
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Zen Kaku Gothic New", system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .08s ease-out;
}
button:active:not(:disabled) { transform: scale(.94); }
button:disabled { cursor: default; opacity: .3; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tnum { font-family: var(--tnum); font-variant-numeric: tabular-nums; }

main {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom);
}

section { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; }
#home, #daily, #ranking, #awards { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

h1 { margin: 32px 4px 8px; font-size: 20px; font-weight: 700; letter-spacing: .24em; }
h2 { margin: 16px 4px 4px; font-size: 20px; font-weight: 700; }
.sub { font-family: var(--num); font-weight: 400; color: var(--muted); margin-left: 4px; }

.card {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 12px 16px;
  min-height: 56px;
}

.wide { min-height: 56px; border-radius: 28px; font-size: 20px; font-weight: 700; }

.today {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 24px 20px 20px;
  overflow: hidden;
  border-radius: 24px;
  text-align: left;
}
.today-date {
  font-family: var(--num);
  font-size: 72px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);
}
#streak {
  justify-self: start;
  margin-top: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}
.today-label { font-size: 14px; font-weight: 700; color: var(--muted); }
.today-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.lv {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 0;
  border-radius: 12px;
  background: var(--bg);
  font-size: 12px;
  color: var(--muted);
}
.lv i { font-style: normal; font-size: 16px; line-height: 1.2; }
.lv.todo i::before { content: '○'; }
.lv.clear { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.lv.clear i::before { content: '✓'; }
.lv.over i::before { content: '×'; }

.missions { display: grid; gap: 8px; }
.missions h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 14px; }
.missions h3 small { font-size: 12px; font-weight: 400; color: var(--muted); }
#mission-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
#mission-list li { display: flex; justify-content: space-between; gap: 8px; }
#mission-list li::before { content: '○'; color: var(--muted); }
#mission-list li.done::before { content: '✓'; color: var(--accent); font-weight: 700; }
#mission-list span { flex: 1; }
#mission-list small { color: var(--muted); }
#mission-list .done span { color: var(--muted); text-decoration: line-through; }

.continue { display: flex; align-items: center; justify-content: space-between; text-align: left; }
.continue span:first-child { display: grid; gap: 2px; }
.continue b { color: var(--accent); }
.continue small { font-size: 12px; color: var(--muted); }
#continue-time { font-size: 20px; color: var(--muted); }

.levels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.levels .card, #sheet-levels .card { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.levels small, #sheet-levels small { font-family: var(--tnum); font-size: 12px; font-variant-numeric: tabular-nums; }
.levels .card { min-height: 88px; justify-content: space-between; }
.levels [data-state=clear] small { font-size: 20px; color: var(--accent); }
.levels [data-state=clear] b::after { content: ' ✓'; color: var(--accent); }

.calendar { display: grid; gap: 8px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; }
#cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
#cal-grid b { font-size: 11px; color: var(--muted); }
#cal-grid span { display: grid; place-content: center; justify-items: center; gap: 2px; height: 40px; border-radius: 10px; font-family: var(--num); font-size: 13px; line-height: 1; color: var(--muted); }
#cal-grid i { height: 8px; font-style: normal; font-size: 12px; letter-spacing: -.1em; color: var(--accent); }
#cal-count { color: var(--muted); font-size: 12px; text-align: center; }

#award-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
#award-list li { position: relative; display: grid; gap: 2px; padding-left: 52px; color: var(--muted); }
#award-list li::before { content: '🔒'; position: absolute; left: 16px; top: 50%; translate: 0 -50%; font-size: 20px; filter: grayscale(1); opacity: .5; }
#award-list li.got { color: var(--ink); }
#award-list small { font-size: 12px; }
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.picker button { display: grid; justify-items: center; gap: 4px; padding: 12px 4px; font-size: 14px; }
.picker button.on { font-weight: 700; }
.picker small { min-height: 1.2em; font-size: 11px; color: var(--muted); }

.link { align-self: center; color: var(--accent); padding: 12px 4px; min-height: 44px; font-size: 14px; }

#tabbar {
  position: fixed;
  inset: auto 0 0;
  display: flex;
  justify-content: center;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
#tabbar button {
  flex: 1;
  max-width: 160px;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 12px;
  color: var(--muted);
}
#tabbar .on { color: var(--accent); font-weight: 700; }

#level-sheet {
  margin: auto auto 0;
  width: 100%;
  max-width: 480px;
  border-radius: 28px 28px 0 0;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
  background: var(--bg);
}
#level-sheet::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  margin: 0 auto 16px;
  border-radius: 2px;
  background: var(--line);
}
#sheet-levels { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
#sheet-levels .card { flex-direction: row; justify-content: space-between; align-items: center; width: 100%; min-height: 64px; border-radius: 32px; padding: 0 24px; }
#sheet-levels small { font-size: 14px; }
#level-sheet .wide { width: 100%; }
#level-sheet h2 { margin: 0 4px 16px; font-size: 18px; }
#sheet-levels b { display: grid; gap: 2px; }
#sheet-levels b span { font-size: 12px; font-weight: 400; color: var(--sheet-muted); }

#play { height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding-bottom: 8px; gap: 8px; }

.bar { display: flex; align-items: center; gap: 8px; min-height: 44px; }
#debug { display: flex; gap: 6px; }
#sound { margin-left: auto; padding: 10px; color: var(--muted); }
#sound svg { width: 24px; height: 24px; }
#sound[aria-pressed=true] { color: var(--accent); }
#sound[aria-pressed=true] .off, #sound[aria-pressed=false] .on { display: none; }
#debug button { padding: 6px 10px; border: 1px dashed var(--muted); border-radius: 8px; font-size: 12px; color: var(--muted); }
.icon { width: 44px; height: 44px; font-size: 30px; line-height: 1; border-radius: 12px; color: var(--accent); }

.status {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 14px;
  color: var(--muted);
}
#misses { font-size: 20px; letter-spacing: .1em; color: var(--error); }
#misses .lost { color: var(--line); }
.clock { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
#time { font-family: var(--tnum); font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
#pause { min-width: 36px; min-height: 36px; font-size: 16px; font-weight: 700; color: var(--muted); }

.board-wrap { position: relative; align-self: center; width: min(100%, calc(100dvh - 330px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); min-width: 260px; }

#board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.cell {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--num);
  font-size: calc(clamp(18px, 7vw, 32px) * 9 / var(--n));
  font-weight: 400;
  color: var(--filled);
  cursor: pointer;
  position: relative;
}
.cell.end-c { border-right: 0; }
.cell.end-r { border-bottom: 0; }
.edge-r { border-right: 2px solid var(--line-strong); }
.edge-b { border-bottom: 2px solid var(--line-strong); }
.cell.given { color: var(--ink); font-weight: 500; }
.cell.related { background: var(--related); }
.cell.same { background: var(--same); }
.cell.selected { background: var(--selected); box-shadow: inset 0 0 0 2px var(--ring); }
.cell.error { background: var(--error-bg); color: var(--error); }
.cell > span { display: inline-block; }
.cell.pop > span { animation: pop .35s ease-out backwards; animation-delay: inherit; }
.cell.wave { animation: wave .5s ease-in-out; }
.cell.shine { animation: flash .5s ease-out; }
.cell.shine > span { animation: shine .5s ease-out; animation-delay: inherit; }
@keyframes shine {
  40% { transform: scale(1.3); color: var(--gold); }
}
@keyframes pop {
  from { transform: scale(.2); opacity: 0; }
  60% { transform: scale(1.3); }
}
@keyframes wave {
  40% { background: var(--same); transform: scale(.88); }
}
#board::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgb(255 226 150 / .6) 50%, transparent 65%);
  opacity: 0;
}
.cell::after {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 2px solid var(--ring);
  pointer-events: none;
  opacity: 0;
}
#board.paused .cell { background: none; box-shadow: none; color: transparent; }
#board.paused .cell, #board.paused .cell > span { animation: none; }
#board.paused .memos { visibility: hidden; }

.memos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  font-size: clamp(8px, 2.6vw, 12px);
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  line-height: 1;
}
.memos span { display: grid; place-items: center; }
.memos .hl { color: var(--accent); font-weight: 600; }

#paused {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  padding-left: 8px;
  font-size: 40px;
  box-shadow: var(--shadow);
}

.under-board { display: flex; justify-content: center; gap: 8px; min-height: 32px; }
#autofill {
  padding: 0 24px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 700;
}

.tools { display: flex; justify-content: space-around; }
/* 盤面と道具の間が空くと、視線と指の行き来が長くなる。
   だから余りの高さは状態の行の上に回し、盤面から下をまとめて親指側に寄せる。 */
.status { margin-top: auto; }
.tools button { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 64px; }
.tools span {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--accent);
}
.tools svg { width: 24px; height: 24px; }
.tools small { font-size: 12px; color: var(--muted); }
#memo-state {
  position: absolute;
  right: -6px;
  bottom: -4px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
}
#memo-state::after { content: 'オフ'; }
#play.memo #memo span { background: var(--accent-soft); }
#play.memo #memo-state { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#play.memo #memo-state::after { content: 'オン'; }

#pad { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; }
#pad button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 64px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-family: var(--num);
  font-size: 28px;
  line-height: 1.1;
  color: var(--accent);
  transition: transform .08s ease-out, opacity .3s, visibility .3s;
}
#pad button.done { visibility: hidden; opacity: 0; }
#pad small { font-size: 11px; color: var(--muted); }
#play.memo #pad button { align-items: flex-start; justify-content: flex-start; padding: 8px 0 0 8px; font-size: 18px; color: var(--muted); }

#result { text-align: center; padding-top: 48px; }
#result h2 { margin: 0; font-size: 28px; }
.big { margin: 0; font-family: var(--num); font-size: 56px; font-weight: 600; color: var(--accent); }
#result-note { margin: 0; min-height: 1.5em; font-weight: 700; color: var(--accent); }
#result.cleared h2, #result.cleared .big { animation: pop .5s ease-out backwards; }
#result.cleared .big { animation-delay: .15s; }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -8px 0 12px; }
.badges:empty { display: none; }
.badges span { padding: 4px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; }
.badges .award::before { content: '🏆 '; }
.badges .award { animation: stamp .35s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes stamp {
  from { transform: scale(2.4) rotate(-14deg); opacity: 0; }
}
#result-note.record {
  background: linear-gradient(100deg, currentColor 40%, #fff7d6 50%, currentColor 60%) 100% 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gleam 1.2s 1s ease-out both;
}
@keyframes gleam {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}
main > section:not(#play) { animation: fade .15s ease-out; }
.goals { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; text-align: center; font-size: 13px; font-weight: 700; color: var(--accent); }
.goals:empty { display: none; }
.goals li::before { content: '◆ '; color: var(--gold); }
#replay-wrap { display: grid; justify-items: center; margin-bottom: 4px; }
#replay {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  width: 198px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-family: var(--num);
  font-size: calc(13px * 9 / var(--n));
  color: var(--filled);
}
#replay span { display: grid; place-items: center; }
#replay .edge-r { border-right-width: 1.5px; }
#replay .edge-b { border-bottom-width: 1.5px; }
#replay span:not(.given) { animation: pop .3s ease-out backwards; }
#replay .given { color: var(--ink); }
.stats { display: flex; justify-content: center; gap: 8px; margin: 4px 0 16px; }
.stats div { flex: 1; max-width: 120px; padding: 12px 8px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.stats dt { font-size: 12px; color: var(--muted); }
.stats dd { margin: 4px 0 0; font-family: var(--num); font-size: 20px; font-weight: 500; }
#confetti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
#confetti i {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  background: var(--accent);
  animation: fall 2.6s ease-in forwards;
}
@keyframes fall {
  to { transform: translate(var(--drift), 105vh) rotate(720deg); }
}

.tabs { display: flex; gap: 8px; }
.tabs button {
  flex: 1; min-height: 44px; border-radius: 22px;
  background: var(--surface); box-shadow: var(--shadow);
  font-size: 14px;
}
.tabs button.on { background: var(--accent); color: var(--on-accent); font-weight: 700; }

#rank-me { margin: 4px; font-weight: 700; }
#rank-list { margin: 0; padding: 4px 0; overflow: hidden; list-style: none; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
#rank-list li {
  display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px;
  margin: 0 8px; padding: 12px 8px; border-bottom: 1px solid var(--line);
}
#rank-list li:last-child { border-bottom: 0; }
#rank-list li span:first-child {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-family: var(--num); font-size: 14px; color: var(--muted);
}
#rank-list li span:last-child { font-family: var(--tnum); font-variant-numeric: tabular-nums; }
#rank-list [data-medal] span:first-child { color: #172036; font-weight: 600; }
#rank-list [data-medal="1"] span:first-child { background: var(--gold); }
#rank-list [data-medal="2"] span:first-child { background: var(--silver); }
#rank-list [data-medal="3"] span:first-child { background: var(--bronze); }
#rank-list li.mine { margin: 0; padding: 12px 16px; background: var(--accent-soft); font-weight: 700; }
#rank-list .empty { display: block; padding: 24px; color: var(--muted); text-align: center; }

dialog {
  border: 0;
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink);
  width: min(90vw, 360px);
}
dialog::backdrop { background: rgb(10 14 26 / .45); }
dialog label { display: flex; flex-direction: column; gap: 8px; font-weight: 700; }
dialog input {
  font: inherit; font-size: 18px; font-weight: 400; padding: 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--ink);
  -webkit-user-select: text;
  user-select: text;
}
/* Enter キーは先頭のボタンで送信する。
   だから DOM では決定を先に置き、表示は CSS で入れ替える。 */
dialog menu { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 8px; padding: 0; margin: 16px 0 0; }
dialog menu button { min-height: 44px; padding: 0 16px; border-radius: 12px; }


/* 着せ替え */
:root, [data-skin=urushi] {
  --hero-img: url(/img/urushi-hero.webp);
  --result-img: url(/img/urushi-result.webp);
  --chrome: #14110f;
  --chrome-line: #3a2f1c;
  --gold-ink: #e7c873;
  --gold-text: linear-gradient(180deg, #fff1bf 0%, #f0cf74 38%, #b88a2e 52%, #e9c66a 70%, #fbe7a6 100%);
  --btn: url(/img/gold-leaf.webp) center / cover, #d6b25a;
  --btn-ink: #24190a;
  --sheet: linear-gradient(rgb(243 236 221 / .55), rgb(243 236 221 / .55)), url(/img/washi.webp) center / 256px, #f3ecdd;
  --sheet-ink: #2b2117;
  --sheet-muted: #8a7a62;
  --page: #ece5d6;
  --page-dark: #0f0d0c;
}
[data-skin=jewel] {
  --hero-img: url(/img/jewel-hero.webp);
  --result-img: url(/img/jewel-result.webp);
  --chrome: #1a0d29;
  --chrome-line: #3d2459;
  --gold-ink: #ead08a;
  --btn: linear-gradient(160deg, #a46be0 0%, #6b2fb0 45%, #3d1470 55%, #8c4fd0 100%);
  --btn-ink: #fff7ff;
  --sheet: linear-gradient(160deg, #2c1745, #1d0f2f);
  --sheet-ink: #f2e6ff;
  --sheet-muted: #b9a2d6;
  --spark: #e9d6ff;
  --page: #ebe5f2;
  --page-dark: #120a1d;
}
[data-skin=sakura] {
  --hero-shadow: none;
  --hero-img: url(/img/sakura-hero.webp);
  --result-img: url(/img/sakura-result.webp);
  --chrome: #2e1520;
  --chrome-line: #5a2e40;
  --gold-ink: #f2d38a;
  --btn: linear-gradient(170deg, #ffd6e4 0%, #f29ab8 50%, #d9668f 100%);
  --btn-ink: #3a0f22;
  --sheet: linear-gradient(rgb(255 230 238 / .7), rgb(255 230 238 / .7)), url(/img/washi.webp) center / 256px, #f8e6ec;
  --sheet-ink: #3a1d28;
  --sheet-muted: #9a6f7e;
  --hero-ink: #7a1f3f;
  --gold-text: linear-gradient(180deg, #a8335c 0%, #6e1534 100%);
  --text-glow: drop-shadow(0 0 6px rgb(255 240 245 / .8));
  --page: #f6ebee;
  --page-dark: #170c11;
}
[data-skin=kinbyobu] {
  --hero-shadow: none;
  --hero-img: url(/img/kinbyobu-hero.webp);
  --result-img: url(/img/kinbyobu-result.webp);
  --chrome: #17110a;
  --chrome-line: #4a3816;
  --gold-ink: #e7c873;
  --hero-ink: #2a1c08;
  --gold-text: linear-gradient(180deg, #4a3210 0%, #24170a 100%);
  --text-glow: drop-shadow(0 0 6px rgb(255 240 200 / .7));
  --btn: linear-gradient(180deg, #d4553c 0%, #a8301d 55%, #7e1f12 100%);
  --btn-ink: #fff4e6;
  --page: #efe4c8;
  --page-dark: #120d07;
}
[data-skin=night] {
  --hero-img: url(/img/night-hero.webp);
  --result-img: url(/img/night-result.webp);
  --chrome: #0d1233;
  --chrome-line: #26306a;
  --gold-ink: #f1dca0;
  --btn: linear-gradient(180deg, #fbf3ff 0%, #d9c9f6 55%, #b9a6ec 100%);
  --btn-ink: #1d1a46;
  --sheet: linear-gradient(170deg, rgb(24 30 78 / .96), rgb(14 18 52 / .96));
  --sheet-ink: #eceaff;
  --sheet-muted: #a8a9d8;
  --spark: #ffd27a;
  --page: #e6e8f5;
  --page-dark: #090c22;
}
:root { --bg: var(--page); }
@media (prefers-color-scheme: dark) {
  :root { --bg: var(--page-dark); }
}

h1, h2 { font-family: "Shippori Mincho B1", "Zen Kaku Gothic New", serif; font-weight: 800; }

.card { background: var(--sheet); color: var(--sheet-ink); box-shadow: 0 2px 6px rgb(0 0 0 / .08), inset 0 0 0 1px rgb(201 162 74 / .3); }
.card small, #cal-grid b, #cal-grid span, #cal-count { color: var(--sheet-muted); }

#daily > h2, #ranking > h2, #awards > h2:first-of-type {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-height: 96px;
  margin-top: 16px;
  padding: 16px 20px;
  border-radius: 20px;
  background: linear-gradient(to top, rgb(0 0 0 / .65), transparent 75%), var(--hero-img) center 85% / cover, var(--chrome);
  color: var(--gold-ink);
  letter-spacing: .12em;
  box-shadow: 0 8px 24px rgb(0 0 0 / .22), inset 0 0 0 1px rgb(231 200 115 / .35);
}
#daily > h2 .sub, #awards > h2 .sub { color: rgb(255 255 255 / .75); letter-spacing: 0; }

.levels [data-state=clear] { background: var(--btn); color: var(--btn-ink); }
.levels [data-state=clear] small, .levels [data-state=clear] b::after { color: var(--btn-ink); }
#cal-grid i { color: #c9a24a; }
#cal-grid .done { background: rgb(201 162 74 / .22); color: var(--sheet-ink); }
#cal-grid .now { box-shadow: inset 0 0 0 2px #c9a24a; }
.cal-head .icon { color: #c9a24a; }

.tabs button { background: var(--sheet); color: var(--sheet-ink); box-shadow: inset 0 0 0 1px rgb(201 162 74 / .4); }
.tabs button.on { background: var(--btn); color: var(--btn-ink); }
#rank-list { background: var(--sheet); color: var(--sheet-ink); box-shadow: 0 4px 14px rgb(0 0 0 / .12), inset 0 0 0 1px rgb(201 162 74 / .4); }
#rank-list li { border-bottom-color: rgb(201 162 74 / .3); }
#rank-list li span:first-child, #rank-list .empty { color: var(--sheet-muted); }
#rank-list li.mine { background: var(--btn); color: var(--btn-ink); }

.picker button.on { box-shadow: inset 0 0 0 2px #c9a24a; }
#award-list li.got { color: var(--sheet-ink); }

.primary { background: var(--btn); color: var(--btn-ink); text-shadow: 0 1px 0 rgb(255 255 255 / .25); box-shadow: 0 2px 0 rgb(0 0 0 / .18), inset 0 0 0 1px rgb(255 255 255 / .25); }

.today {
  min-height: 220px;
  background: var(--hero-img) center / cover, var(--chrome);
  color: #fff;
  box-shadow: 0 10px 30px rgb(0 0 0 / .28), inset 0 0 0 1px rgb(231 200 115 / .35);
}
.today-date, .big { font-family: "Shippori Mincho B1", serif; font-weight: 800; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: var(--text-glow, drop-shadow(0 0 3px rgb(0 0 0 / .9)) drop-shadow(0 2px 10px rgb(0 0 0 / .8))); }
.today-date { font-size: 76px; letter-spacing: 0; }
.today-label { color: var(--hero-ink, var(--gold-ink)); letter-spacing: .2em; }
#streak { background: rgb(0 0 0 / .45); color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--gold-ink); }
.lv { padding: 4px 0; background: none; color: var(--hero-ink, #fff); text-shadow: var(--hero-shadow, 0 1px 3px rgb(0 0 0 / .8)); opacity: .7; }
.lv.clear { background: none; color: var(--hero-ink, var(--gold-ink)); opacity: 1; }
.lv.over { opacity: .4; }
.today-levels { margin-top: 4px; padding-top: 8px; border-top: 1px solid rgb(231 200 115 / .35); }

.missions { box-shadow: 0 6px 18px rgb(0 0 0 / .14), inset 0 0 0 1px rgb(201 162 74 / .45); }
.missions h3 { padding-bottom: 6px; border-bottom: 1px solid rgb(201 162 74 / .5); font-family: "Shippori Mincho B1", serif; font-size: 16px; }
.missions h3 small, #mission-list small { color: var(--sheet-muted); }
#mission-list li { padding-bottom: 6px; background: linear-gradient(#c9a24a, #f0d488) left bottom / calc(var(--p, 0) * 100%) 3px no-repeat, linear-gradient(rgb(201 162 74 / .25), rgb(201 162 74 / .25)) left bottom / 100% 3px no-repeat; }
#mission-list li::before { color: var(--sheet-muted); }
#mission-list li.done::before { color: #c9a24a; }
#mission-list .done span { color: var(--sheet-muted); }
#mission-list .all span { color: var(--sheet-ink); font-weight: 700; text-decoration: none; }

#tabbar { background: var(--chrome); border-top: 1px solid var(--chrome-line); }
#tabbar button { color: rgb(255 255 255 / .5); }
#tabbar .on { color: var(--gold-ink); }
#tabbar i {
  width: 30px;
  height: 30px;
  background: url(/img/tabs.webp) 0 0 / 400% 100% no-repeat;
  filter: grayscale(1) brightness(1.05);
  opacity: .6;
  transition: filter .2s, opacity .2s, transform .2s;
}
#tabbar [data-tab=daily] i { background-position-x: calc(100% / 3); }
#tabbar [data-tab=ranking] i { background-position-x: calc(200% / 3); }
#tabbar [data-tab=awards] i { background-position-x: 100%; }
#tabbar .on i { filter: drop-shadow(0 0 6px rgb(231 200 115 / .55)); opacity: 1; transform: translateY(-2px) scale(1.1); }

#result {
  min-height: 100dvh;
  margin: 0 -12px;
  padding: 48px 16px calc(24px + env(safe-area-inset-bottom));
  --art-height: min(150vw, 720px);
  background:
    linear-gradient(transparent calc(var(--art-height) - 160px), var(--chrome) var(--art-height)),
    var(--result-img) center top / 100% auto no-repeat,
    var(--chrome);
  color: #fff;
  container-type: inline-size;
}
#result h2 { font-size: 30px; letter-spacing: .3em; color: var(--hero-ink, var(--gold-ink)); }
#result.cleared { padding-top: 0; }
/* タイムは背景の絵の決まった位置（輪の中や、花火の下の空）に重ねる。
   だから先頭に出し、絵の幅に比例した高さで置き場所を合わせる。 */
#result.cleared .big { order: -1; display: grid; place-items: center; min-height: 81cqw; }
[data-skin=jewel] #result.cleared .big { min-height: 92cqw; place-items: end center; }
[data-skin=sakura] #result.cleared .big { min-height: 112cqw; }
/* 桜と春霞は挿絵が明るく、結果画面の絵は暗い。
   だから結果画面だけ明るい文字に戻す。 */
[data-skin=sakura] #result {
  --hero-ink: #ffd9e6;
  --gold-text: linear-gradient(180deg, #fff1f6 0%, #ffc2d6 60%, #f39ab9 100%);
  --text-glow: drop-shadow(0 0 3px rgb(60 0 20 / .9)) drop-shadow(0 2px 10px rgb(60 0 20 / .8));
}
[data-skin=night] #result.cleared .big { min-height: 100cqw; place-items: end center; }
.big { font-size: 64px; }
#result-note { color: var(--hero-ink, var(--gold-ink)); }
.stats div { background: var(--sheet); color: var(--sheet-ink); box-shadow: 0 6px 16px rgb(0 0 0 / .3); }
.stats dt { color: var(--sheet-muted); }
.badges span { background: rgb(0 0 0 / .45); color: var(--gold-ink); box-shadow: inset 0 0 0 1px rgb(231 200 115 / .5); }
.badges .award { background: var(--btn); color: var(--btn-ink); box-shadow: none; }
#result .card { background: rgb(0 0 0 / .4); color: var(--gold-ink); box-shadow: inset 0 0 0 1px rgb(231 200 115 / .45); }
#result .link, #result .goals { color: var(--gold-ink); }

#confetti i { width: 10px; height: 8px; border-radius: 1px; background: var(--btn); clip-path: polygon(10% 0, 100% 20%, 85% 100%, 0 70%); animation-duration: 3.4s; }
[data-skin=jewel] #confetti i { width: 10px; height: 10px; background: var(--spark); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
[data-skin=night] #confetti i { width: 5px; height: 5px; border-radius: 50%; clip-path: none; background: var(--spark); box-shadow: 0 0 8px 2px var(--spark); }
[data-skin=night] #confetti i:nth-child(3n) { --spark: #ff8fc8; }
[data-skin=night] #confetti i:nth-child(3n+1) { --spark: #8fd8ff; }

#award-list li { padding-left: 68px; min-height: 64px; color: var(--sheet-muted); }
#award-list li::before, #award-list li.got::before {
  content: '';
  left: 12px;
  width: 44px;
  height: 44px;
  background: url(/img/crests.webp) var(--crest) / 400% 300% no-repeat;
  filter: grayscale(1) brightness(.6);
  opacity: .35;
}
#award-list li.got::before { filter: drop-shadow(0 2px 3px rgb(0 0 0 / .3)); opacity: 1; }
#award-list li.got b { font-family: "Shippori Mincho B1", serif; }
#skins i { width: 72px; height: 44px; border-radius: 10px; background: var(--hero-img) center / cover; box-shadow: inset 0 0 0 1px rgb(231 200 115 / .5); }
#skins button:disabled i { filter: grayscale(.8); }

#play.memo .under-board::before {
  content: 'メモ入力中';
  align-self: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 700;
}
section > h3 { margin: 12px 4px 0; font-family: "Shippori Mincho B1", serif; font-size: 16px; }
#skins button:disabled { opacity: 1; color: var(--sheet-muted); }

@media (prefers-reduced-motion: reduce) {
  .cell.pop > span, #result.cleared h2, #result.cleared .big, #replay span:not(.given) { animation-name: fade; }
  .cell.wave { animation-name: flash; }
  .cell.shine > span, .badges .award, #result-note.record { animation-name: none; }
  #confetti i { top: calc(var(--y) * 1%); animation: twinkle 1.6s ease-in-out infinite alternate; }
  button:active:not(:disabled) { transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
}
@keyframes flash {
  40% { background: var(--same); }
}
@keyframes twinkle {
  from { opacity: .2; }
  to { opacity: 1; }
}