:root {
  --bg: #f4f1e8;
  --card: #ffffff;
  --ink: #1f2937;
  --muted: #6b7280;
  --felt: #14532d;
  --felt-2: #166534;
  --accent: #b45309;
  --line: #e5e1d3;
  --good: #166534;
  --warn: #b45309;
  --bad: #b91c1c;
  --tile: #fbf7ea;
  --tile-edge: #cdbf94;
  --m: #b91c1c;
  --p: #1d4ed8;
  --s: #15803d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1a14;
    --card: #17231c;
    --ink: #e7efe9;
    --muted: #9fb2a6;
    --line: #26372d;
    --accent: #f59e0b;
    --good: #4ade80;
    --warn: #fbbf24;
    --bad: #f87171;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", "Noto Sans CJK SC", "PingFang SC", sans-serif;
  padding-bottom: 76px;
}
.top { background: var(--felt); color: #fff; padding: 12px 16px 0; position: sticky; top: 0; z-index: 20; }
.top h1 { font-size: 18px; margin: 0 0 8px; font-weight: 650; letter-spacing: .2px; }
.tabs { display: flex; gap: 4px; }
.tabs button {
  flex: 1; min-width: 0; background: transparent; color: #cfe8d5; border: 0; border-bottom: 3px solid transparent;
  padding: 10px 4px; font: inherit; font-size: 15px; cursor: pointer;
}
.tabs button[aria-selected="true"] { color: #fff; border-bottom-color: #fbbf24; font-weight: 600; }
main { max-width: 760px; margin: 0 auto; padding: 12px 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
details.card { padding: 0; }
details.card > summary { padding: 14px; font-weight: 650; font-size: 18px; cursor: pointer; }
details.card .card-body { padding: 0 14px 14px; }
.card h2 { margin: 0 0 10px; font-size: 18px; }
.muted { color: var(--muted); font-size: 14px; font-weight: 400; }
.note { font-size: 14px; color: var(--muted); background: var(--bg); padding: 8px 10px; border-radius: 8px; margin: 6px 0; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
label { display: block; font-size: 14px; color: var(--muted); }
label.check { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 16px; margin: 6px 0 10px; }
input[type="text"], input[type="password"], input[type="search"], select {
  width: 100%; font: inherit; font-size: 16px; padding: 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); color: var(--ink); margin-top: 4px;
}
input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--felt-2); flex: none; }
.btn {
  font: inherit; font-size: 15px; padding: 10px 14px; min-height: 44px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center;
}
.btn.primary { background: var(--felt-2); color: #fff; border-color: var(--felt-2); }
.btn.danger { color: var(--bad); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.link { background: none; border: 0; color: var(--accent); font: inherit; font-size: 14px; cursor: pointer; padding: 4px 0; text-decoration: underline; }
.info { border: 1px solid var(--line); background: var(--card); color: var(--accent); border-radius: 50%; width: 24px; height: 24px; font-size: 13px; cursor: pointer; padding: 0; flex: none; }
.status { padding: 8px 10px; border-radius: 8px; background: var(--bg); margin: 8px 0 0; font-size: 14px; }
.status.error { color: var(--bad); }
.status.ok { color: var(--good); }

/* cropper */
.crop-stage { max-height: 50vh; background: #111; border-radius: 8px; overflow: hidden; margin: 10px 0 4px; }
.crop-stage img { max-width: 100%; display: block; }
.ref { margin: 0 0 8px; }
.ref img { max-width: 100%; max-height: 140px; border-radius: 8px; display: block; }

/* tiles */
.tile {
  --w: 38px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: var(--w); height: calc(var(--w) * 1.32); position: relative;
  background: var(--tile); border: 1px solid var(--tile-edge); border-bottom-width: 4px; border-radius: 6px;
  font-family: "Noto Serif CJK SC", "Songti SC", "SimSun", serif; line-height: 1; padding: 0; color: #111;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
button.tile { cursor: pointer; font-size: inherit; }
.tile .t-top { font-size: calc(var(--w) * .5); font-weight: 700; }
.tile .t-bot { font-size: calc(var(--w) * .3); margin-top: 3px; }
.tile.m { color: var(--m); }
.tile.p { color: var(--p); }
.tile.s { color: var(--s); }
.tile.z .t-top { font-size: calc(var(--w) * .62); }
.tile.z1, .tile.z2, .tile.z3, .tile.z4 { color: #111; }
.tile.z5 .t-top { color: var(--p); border: 2px solid var(--p); border-radius: 3px; padding: 0 2px; font-size: calc(var(--w) * .46); }
.tile.z6 { color: var(--s); }
.tile.z7 { color: var(--m); }
.tile.f { background: #f3ecd2; }
.tile.f.red { color: var(--m); }
.tile.f.black { color: #111; }
.tile.small { --w: 28px; border-bottom-width: 3px; }
.tile.selected { outline: 3px solid #f59e0b; outline-offset: 1px; transform: translateY(-4px); }
.tile.win { border-color: #f59e0b; }
.tile .t-star { position: absolute; top: -9px; right: -5px; color: #f59e0b; font-size: 16px; text-shadow: 0 0 2px #fff; }
.tile.uncertain { outline: 2px dashed var(--bad); outline-offset: 1px; }
.tile:disabled { opacity: .3; cursor: not-allowed; }

.hand { display: flex; flex-wrap: wrap; gap: 4px; min-height: 60px; padding: 10px 8px; background: var(--felt); border-radius: 10px; align-items: flex-end; }
.hand .empty { color: #bbf7d0; font-size: 14px; }
.palette { display: grid; gap: 6px; margin-top: 8px; }
.palette .prow { display: flex; flex-wrap: wrap; gap: 4px; }
.palette .tile { --w: 34px; }
.palette .tile .count { position: absolute; bottom: -4px; right: -2px; font-size: 10px; background: var(--ink); color: var(--card); border-radius: 8px; padding: 1px 4px; font-family: system-ui; }
.palette-wrap summary { cursor: pointer; margin-top: 8px; font-weight: 600; }
.type-row input { flex: 1; min-width: 0; margin-top: 0; }
.flowers { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.flowers .tile { --w: 34px; opacity: .45; }
.flowers .tile.on { opacity: 1; outline: 2px solid var(--good); }

/* result */
.shape { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.sets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.sets .set { display: flex; gap: 1px; padding: 3px; background: var(--bg); border-radius: 6px; }
.warn { background: color-mix(in srgb, var(--warn) 14%, var(--card)); border: 1px solid var(--warn); border-radius: 8px; padding: 10px; font-size: 14px; }
.group-title { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 14px 0 4px; }
.rule { border-bottom: 1px solid var(--line); padding: 8px 0; }
.rule-main { display: flex; align-items: center; gap: 10px; }
.rule-main label.name { flex: 1; display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 16px; min-height: 36px; cursor: pointer; }
.rule .note-small { font-size: 12px; color: var(--muted); display: block; }
.rule .pts { font-variant-numeric: tabular-nums; font-weight: 650; min-width: 34px; text-align: right; }
.rule.on .pts { color: var(--good); }
.rule.off .pts { color: var(--muted); font-weight: 400; }
.rule.sup { opacity: .5; text-decoration: line-through; }
.badge { font-size: 11px; padding: 1px 6px; border-radius: 10px; background: var(--bg); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.badge.auto { color: var(--good); border-color: var(--good); }
.badge.hint { color: var(--accent); border-color: var(--accent); }
.rule select { width: auto; margin: 0; padding: 6px; }
.totalbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--felt); color: #fff;
  display: flex; gap: 10px; justify-content: center; align-items: baseline; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.totalbar strong { font-size: 30px; font-variant-numeric: tabular-nums; }

/* library */
.lib-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.lib-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.lib-head h3 { margin: 0; font-size: 17px; }
.lib-head .pts { font-weight: 700; color: var(--good); white-space: nowrap; }
.lib-tiles { display: flex; flex-wrap: wrap; gap: 2px; margin: 10px 0; padding: 8px; background: var(--felt); border-radius: 8px; align-items: flex-end; }
.lib-tiles .gap { width: 8px; }
.lib-tiles .tile { --w: 26px; border-bottom-width: 3px; }
.lib-meta { font-size: 13px; color: var(--muted); margin: 2px 0; }
.lib-confirm { font-size: 13px; color: var(--warn); margin: 6px 0; }

@media (min-width: 560px) {
  .tile { --w: 42px; }
  .palette .tile { --w: 38px; }
}

/* points editor */
textarea { width: 100%; font: 13px/1.4 ui-monospace, Menlo, Consolas, monospace; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); margin-top: 8px; }
.edit-list { display: grid; gap: 6px; margin-bottom: 12px; }
.edit-row {
  display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px 8px; flex-wrap: wrap;
}
.edit-row.changed { border-left: 4px solid var(--accent); }
.edit-row.dragging { opacity: .85; box-shadow: 0 6px 18px rgba(0,0,0,.25); background: var(--bg); position: relative; z-index: 5; }
.handle {
  width: 40px; height: 44px; border: 0; background: none; color: var(--muted); font-size: 22px; cursor: grab;
  touch-action: none; flex: none; border-radius: 8px;
}
.handle:focus-visible { outline: 2px solid var(--accent); }
.edit-name { flex: 1; min-width: 110px; font-size: 16px; }
.edit-pts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.stepper { display: inline-flex; align-items: center; gap: 2px; }
.stepper .lbl { font-size: 11px; color: var(--muted); margin-right: 4px; max-width: 64px; line-height: 1.1; text-align: right; }
.stepper button { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 20px; cursor: pointer; padding: 0; }
.stepper input { width: 52px; height: 40px; text-align: center; padding: 0; margin: 0; font-weight: 650; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.edit-name .note-small { display: block; font-size: 12px; }
.edit-row .reset { font-size: 12px; padding: 0; min-height: 0; }

/* hand editor */
.hint { margin: 0 0 6px; font-size: 13px; }
.htile, .ptile { touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab; }
.hand .tile { --w: 42px; }
.hand { gap: 6px; padding: 12px 10px; position: relative; }
.tile .t-unsure { position: absolute; top: -8px; left: -6px; background: var(--bad); color: #fff; border-radius: 9px; font: 700 11px/16px system-ui; width: 16px; height: 16px; text-align: center; }
.tile.drag-origin { opacity: .25; }
.tile.drop-before { box-shadow: -7px 0 0 -2px #fbbf24; margin-left: 3px; }
.tile.drop-end { box-shadow: 7px 0 0 -2px #fbbf24; margin-right: 3px; }
.tile[disabled] { opacity: .3; cursor: not-allowed; }
.tile.ghost { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; opacity: .95; box-shadow: 0 10px 24px rgba(0,0,0,.45); --w: 44px; }
body.dragging-tile { cursor: grabbing; -webkit-user-select: none; user-select: none; }
.btn.warn { background: color-mix(in srgb, var(--warn) 18%, var(--card)); border-color: var(--warn); color: var(--ink); width: 100%; justify-content: center; margin: 4px 0; }
.btn.sm { min-height: 40px; padding: 6px 12px; font-size: 14px; }
.btn.icon { padding: 10px 12px; }
.trash {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; padding: 14px 22px;
  border-radius: 14px; background: var(--card); color: var(--bad); border: 2px dashed var(--bad); font-weight: 650;
}
.trash.hot { background: var(--bad); color: #fff; border-style: solid; }

/* bottom sheet */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-height: 74vh; overflow: auto; overscroll-behavior: contain;
  background: var(--card); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 30px rgba(0,0,0,.28); padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
  max-width: 760px; margin: 0 auto;
}
body.sheet-open { padding-bottom: 74vh; }
body.sheet-open .totalbar { display: none; }
.sheet-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.spacer { flex: 1; }
.sheet-strip { display: flex; gap: 4px; overflow-x: auto; padding: 8px 4px 6px; background: var(--felt); border-radius: 10px; scroll-snap-type: x proximity; }
.sheet-strip .tile { flex: none; }
.sheet-main { display: flex; gap: 12px; align-items: center; margin: 8px 0 4px; }
.sheet-photo { max-width: 34%; max-height: 64px; border-radius: 8px; border: 1px solid var(--line); object-fit: contain; background: #111; }
.sheet-big .tile { --w: 54px; }
.sheet-info { flex: 1; min-width: 0; }
.sheet-name { font-weight: 650; font-size: 17px; }
.unsure-note { font-size: 14px; color: var(--bad); margin: 4px 0; }
.sheet-label { margin: 4px 0 2px; }
.sheet-grid { display: grid; gap: 5px; }
.sheet-grid .prow { display: flex; gap: 4px; flex-wrap: wrap; }
.sheet-grid .tile { --w: 34px; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sheet-actions .btn { flex: 1 1 auto; justify-content: center; }
@media (min-width: 560px) { .sheet-grid .tile { --w: 38px; } .hand .tile { --w: 46px; } }

/* rules switched off */
.edit-row.off-rule .edit-name, .edit-row.off-rule .edit-pts { opacity: .45; }
.switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); cursor: pointer; min-height: 40px; }
.badge.off { margin-left: 8px; color: var(--muted); border-style: dashed; font-weight: 400; }

.status.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--card)); border: 1px solid var(--warn); }

/* ---------- Easy mode (wizard) ---------- */
.tabs .more { flex: 0 0 auto; padding-inline: 14px; }
.tabs.more-row { background: rgba(0,0,0,.18); margin: 0 -16px; padding: 0 12px; }
.tabs.more-row button { font-size: 14px; padding: 8px 2px; }
.easy-wrap { max-width: 560px; margin: 0 auto; padding: 4px 2px 130px; }
.easy h2.q { font-size: 28px; line-height: 1.2; margin: 14px 0 8px; }
.hint-big { font-size: 18px; color: var(--muted); margin: 0 0 16px; }
.hint-big.center, .center { text-align: center; }
.stack { display: grid; gap: 14px; }
.big-btn {
  width: 100%; min-height: 68px; border-radius: 18px; border: 2px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-size: 21px; font-weight: 650; cursor: pointer; padding: 12px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.big-btn.primary { background: var(--felt-2); border-color: var(--felt-2); color: #fff; }
.big-btn.plain { font-weight: 550; }
.big-btn.warn { background: color-mix(in srgb, var(--warn) 18%, var(--card)); border-color: var(--warn); }
.big-btn .sub { font-size: 15px; font-weight: 400; opacity: .8; }
.link-big { background: none; border: 0; color: var(--accent); font: inherit; font-size: 17px; text-decoration: underline; padding: 14px; cursor: pointer; }
.big-input { font-size: 24px; padding: 16px; text-align: center; border-radius: 14px; }

.progress { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.progress .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); flex: none; }
.progress .dot.done { background: var(--felt-2); }
.progress .dot.now { background: #f59e0b; transform: scale(1.25); }
.progress-text { margin-left: auto; font-size: 14px; color: var(--muted); }

.easy-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: 12px; justify-content: space-between;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line);
}
.easy-nav button { min-height: 62px; border-radius: 16px; font: inherit; font-size: 20px; font-weight: 650; cursor: pointer; border: 2px solid var(--line); background: var(--card); color: var(--ink); padding: 0 22px; }
.easy-nav .nav-next { flex: 1; background: var(--felt-2); border-color: var(--felt-2); color: #fff; max-width: 330px; margin-left: auto; }
.easy-nav .nav-next:disabled { opacity: .4; }

.choices { display: grid; gap: 12px; }
.choices.four { grid-template-columns: 1fr 1fr; }
.choices.two { grid-template-columns: 1fr; }
.choice {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 128px;
  border: 3px solid var(--line); border-radius: 20px; background: var(--card); color: var(--ink); cursor: pointer; font: inherit; padding: 12px;
}
.choice .tile { --w: 56px; }
.choice-label { font-size: 21px; font-weight: 650; text-align: center; white-space: pre-line; }
.choice.wide { min-height: 96px; }
.choice.picked { border-color: var(--felt-2); background: color-mix(in srgb, var(--felt-2) 14%, var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--felt-2) 40%, transparent); }

.easy-hand { display: flex; flex-wrap: wrap; gap: 8px; background: var(--felt); border-radius: 16px; padding: 16px 12px; }
.easy-hand .tile { --w: 46px; }
.add-tile { width: 46px; height: 61px; border-radius: 6px; border: 2px dashed #bbf7d0; background: transparent; color: #bbf7d0; font-size: 28px; cursor: pointer; }
.photo-peek { position: relative; display: block; width: 100%; border: 2px solid var(--line); border-radius: 14px; overflow: hidden; background: #111; padding: 0; cursor: zoom-in; }
.photo-peek img { display: block; width: 100%; max-height: 120px; object-fit: contain; }
.photo-peek span { position: absolute; right: 8px; bottom: 6px; font-size: 13px; background: rgba(0,0,0,.65); color: #fff; padding: 2px 8px; border-radius: 8px; }
.zoom { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; padding: 10px; }
.zoom img { max-width: 100%; max-height: 85vh; object-fit: contain; }
.easy .status { font-size: 18px; padding: 12px 14px; }
.easy-crop { max-height: 58vh; }

.flower-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; justify-items: center; }
.flower-grid .tile { --w: 62px; opacity: .45; }
.flower-grid .tile.on { opacity: 1; outline: 4px solid var(--good); outline-offset: 2px; }

.add-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: 80vh; overflow: auto; background: var(--card);
  border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.4); padding: 14px 14px calc(18px + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto;
}
.add-head { display: flex; justify-content: space-between; align-items: center; font-size: 20px; margin-bottom: 8px; }
.add-head .btn { font-size: 18px; min-height: 48px; padding: 0 22px; }
.added-note { font-size: 17px; min-height: 26px; margin: 4px 0 10px; color: var(--good); }
.add-grid { display: grid; gap: 8px; }
.add-grid .prow { display: flex; flex-wrap: wrap; gap: 6px; }
.add-grid .tile { --w: 38px; }

.spinner-wrap { display: flex; justify-content: center; padding: 40px 0; }
.spinner { width: 72px; height: 72px; border-radius: 50%; border: 8px solid var(--line); border-top-color: var(--felt-2); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

.score-card { text-align: center; background: var(--felt); color: #fff; border-radius: 24px; padding: 22px 10px 14px; margin: 10px 0 14px; }
.score-num { font-size: 110px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.score-unit { font-size: 24px; opacity: .9; }
.why { list-style: none; padding: 0; margin: 0 0 12px; border: 2px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); }
.why li { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; font-size: 20px; border-bottom: 1px solid var(--line); }
.why li:last-child { border-bottom: 0; }
.why-name small { color: var(--muted); font-size: 15px; font-weight: 400; }
.why-pts { font-weight: 800; color: var(--good); }
.recap { text-align: center; color: var(--muted); font-size: 17px; margin: 0 0 14px; }
.others { margin: 0 0 16px; font-size: 18px; }
.others summary { cursor: pointer; padding: 12px 4px; color: var(--accent); }
.other-row { display: flex; align-items: center; gap: 14px; padding: 12px 6px; font-size: 19px; color: var(--ink); }
.other-row input { width: 28px; height: 28px; }
.other-row small { color: var(--muted); }
.result-actions { margin-top: 8px; }
.small-note { font-size: 14px; margin: 10px 0 0; }