/* コートノート：スマホ優先。色は :root の変数にまとめ、ダークは下で上書きする */
:root {
  --bg: #f3f6f2;
  --card: #ffffff;
  --card-2: #eef3ec;
  --text: #15201a;
  --muted: #5d6b62;
  --line: #dde5dc;
  --accent: #15803d;
  --accent-2: #166534;
  --accent-soft: #dcfce7;
  --ball: #d9f94a;
  --ball-ink: #3a4a00;
  --padel: #0e7490;
  --padel-soft: #cffafe;
  --win: #15803d;
  --loss: #dc2626;
  --draw: #a16207;
  --warn: #b45309;
  --shadow: 0 1px 2px rgb(16 40 24 / 6%), 0 4px 16px rgb(16 40 24 / 6%);
  --radius: 16px;
  --hm0: #e3e9e2;
  --hm1: #a7e3b5;
  --hm2: #4ec46f;
  --hm3: #15803d;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1410;
    --card: #152019;
    --card-2: #1c2a21;
    --text: #e6efe8;
    --muted: #9db0a3;
    --line: #26362c;
    --accent: #34d067;
    --accent-2: #4ade80;
    --accent-soft: #163824;
    --padel: #22d3ee;
    --padel-soft: #0f3640;
    --win: #4ade80;
    --loss: #f87171;
    --draw: #facc15;
    --warn: #fbbf24;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 20px rgb(0 0 0 / 25%);
    --hm0: #1f2d24;
    --hm1: #1f5b33;
    --hm2: #2a9a4f;
    --hm3: #4ade80;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0d1410;
  --card: #152019;
  --card-2: #1c2a21;
  --text: #e6efe8;
  --muted: #9db0a3;
  --line: #26362c;
  --accent: #34d067;
  --accent-2: #4ade80;
  --accent-soft: #163824;
  --padel: #22d3ee;
  --padel-soft: #0f3640;
  --win: #4ade80;
  --loss: #f87171;
  --draw: #facc15;
  --warn: #fbbf24;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 20px rgb(0 0 0 / 25%);
  --hm0: #1f2d24;
  --hm1: #1f5b33;
  --hm2: #2a9a4f;
  --hm3: #4ade80;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif;
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

a { color: var(--accent); }
h1, h2, h3 { line-height: 1.3; margin: 0; }
h2 { font-size: 1.02rem; }
p { margin: 0; }
button { font: inherit; color: inherit; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; z-index: 99; background: var(--card); padding: 8px; }

.muted { color: var(--muted); }
.small { font-size: 0.82rem; }
.center { text-align: center; }
.error { color: var(--loss); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- 上と下のバー ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); font-weight: 800; font-size: 1.1rem; }
.logo { width: 32px; height: 32px; border-radius: 9px; }
.lv-chip {
  text-decoration: none; font-weight: 800; font-size: 0.85rem;
  background: var(--ball); color: var(--ball-ink); padding: 4px 12px; border-radius: 999px;
}

.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  max-width: 640px; margin: 0 auto;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgb(0 0 0 / 6%);
}
@media (min-width: 640px) { .bottomnav { border-radius: 20px 20px 0 0; border: 1px solid var(--line); } }
.bottomnav a {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  text-decoration: none; color: var(--muted); font-size: 0.72rem; padding: 4px 0;
}
.bottomnav a .ni { font-size: 1.3rem; line-height: 1.2; filter: grayscale(0.7); }
.bottomnav a[aria-current="page"] { color: var(--accent); font-weight: 700; }
.bottomnav a[aria-current="page"] .ni { filter: none; }
.nav-add {
  justify-self: center; width: 60px; height: 60px; margin-top: -26px;
  border: 4px solid var(--bg); border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 2rem; font-weight: 700; line-height: 1;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent);
  cursor: pointer; transition: transform .15s;
}
.nav-add:active { transform: scale(0.94); }

.banner { margin: 8px 16px; padding: 10px 14px; border-radius: 12px; background: #fde68a; color: #422006; font-size: 0.9rem; }

main { max-width: 640px; margin: 0 auto; padding: 4px 16px 24px; display: flex; flex-direction: column; gap: 12px; }
main:focus { outline: none; }
.page-title { font-size: 1.4rem; margin: 8px 0 0; }

/* ---------- カード ---------- */
.card {
  background: var(--card); border-radius: var(--radius); padding: 16px;
  box-shadow: var(--shadow); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
a.card { text-decoration: none; color: inherit; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.hero {
  background:
    radial-gradient(circle at 105% -10%, color-mix(in srgb, var(--ball) 70%, transparent) 0 70px, transparent 72px),
    linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff; border: 0; gap: 12px; position: relative; overflow: hidden;
}
.hero::after { /* コートの線 */
  content: ""; position: absolute; inset: auto -20px -40px auto; width: 180px; height: 110px;
  border: 3px solid rgb(255 255 255 / 18%); border-radius: 6px; transform: rotate(-12deg);
}
.hello { font-size: 0.95rem; opacity: 0.9; }
.cheer { font-size: 1.15rem; font-weight: 700; }
.hero .btn.primary { background: var(--ball); color: var(--ball-ink); }
.quick { display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; }
.hero .chip { background: rgb(255 255 255 / 16%); color: #fff; border-color: rgb(255 255 255 / 30%); }

.notice { border-left: 5px solid var(--warn); }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi { align-items: center; text-align: center; gap: 2px; padding: 12px 6px; }
.kpi-icon { font-size: 1.4rem; }
.kpi-num { font-size: 1.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-num small { font-size: 0.8rem; margin-left: 1px; }
.kpi-label { font-size: 0.76rem; color: var(--muted); line-height: 1.3; }
.kpi-label em { color: var(--warn); font-style: normal; font-weight: 700; }

.ring { width: 64px; height: 64px; }
.ring circle { fill: none; stroke-width: 8; }
.ring-bg { stroke: var(--card-2); }
.ring-fg { stroke: var(--accent); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .8s ease; }
.ring-fg.done { stroke: #eab308; }
.ring-num { font-size: 22px; font-weight: 800; text-anchor: middle; fill: var(--text); }
.ring-sub { font-size: 12px; text-anchor: middle; fill: var(--muted); }

.level-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lv { font-size: 1.5rem; font-weight: 900; color: var(--accent); }
.lv-title { font-weight: 700; }
.bar { height: 10px; background: var(--card-2); border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #84cc16); border-radius: inherit; transition: width .8s ease; }
.badge-strip { display: flex; flex-wrap: wrap; gap: 4px; font-size: 1.15rem; }
.bdg.off { filter: grayscale(1); opacity: 0.25; }

.focus { background: linear-gradient(135deg, var(--accent-soft), var(--card)); }
.focus-text { font-size: 1.15rem; font-weight: 800; }

.form-dots { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; flex-wrap: wrap; }
.fd { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 800; color: #fff; }
.fd-win { background: var(--win); }
.fd-loss { background: var(--loss); }
.fd-draw { background: var(--draw); }
.form-dots .fd:first-child { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px currentColor; color: #fff; }

.heatmap { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 2px; }
.hm-col { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; flex: 1; min-width: 12px; }
.hm { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--hm0); }
.hm-1 { background: var(--hm1); }
.hm-2 { background: var(--hm2); }
.hm-3 { background: var(--hm3); }
.hm.fut { opacity: 0.25; }
.hm.today { outline: 2px solid var(--text); outline-offset: -1px; }
.hm-legend { display: flex; align-items: center; gap: 3px; justify-content: flex-end; }
.hm-legend .hm { width: 11px; height: 11px; }

.pill { font-size: 0.74rem; padding: 2px 8px; border-radius: 999px; background: var(--card-2); color: var(--muted); white-space: nowrap; }
.pill.hot { background: #fee2e2; color: #b91c1c; font-weight: 700; }

/* ---------- 記録の一覧 ---------- */
.entries { display: flex; flex-direction: column; gap: 8px; }
.entry {
  display: flex; gap: 10px; text-align: left; width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px;
  cursor: pointer; border-left: 5px solid var(--accent); transition: transform .1s;
}
.entry:active { transform: scale(0.99); }
.entry.sport-padel { border-left-color: var(--padel); }
.entry-side { font-size: 1.4rem; }
.entry-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.entry-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.entry-date { font-weight: 700; }
.entry-who { font-size: 0.85rem; color: var(--muted); }
.entry-memo { font-size: 0.88rem; overflow-wrap: anywhere; }
.score { font-weight: 800; font-variant-numeric: tabular-nums; }
.rb { font-size: 0.75rem; font-weight: 800; color: #fff; padding: 1px 7px; border-radius: 6px; }
.rb-win { background: var(--win); }
.rb-loss { background: var(--loss); }
.rb-draw { background: var(--draw); }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font-size: 0.72rem; padding: 1px 7px; border-radius: 999px; }
.tag.good { background: var(--accent-soft); color: var(--accent-2); }
.tag.bad { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.month { font-size: 1rem; margin-top: 8px; }

.empty { text-align: center; color: var(--muted); padding: 16px 8px; }
.empty-icon { font-size: 2.6rem; }

.filters { gap: 8px; }

/* ---------- ボタン・入力 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 8px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--text);
  font-weight: 700; text-decoration: none; cursor: pointer;
}
.btn:disabled { opacity: 0.5; cursor: wait; }
.btn.primary { background: var(--accent); border-color: transparent; color: #fff; }
.btn.big { min-height: 54px; font-size: 1.08rem; width: 100%; border-radius: 14px; }
.btn.small { min-height: 36px; padding: 4px 12px; font-size: 0.88rem; align-self: flex-start; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.warn { background: transparent; color: var(--loss); border-color: var(--loss); align-self: flex-start; }
.btn.icon { width: 44px; padding: 0; font-size: 1.3rem; }
.btn.tiny { min-height: 32px; padding: 0 8px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.linkish { background: none; border: 0; color: var(--accent); font-weight: 700; padding: 4px 0; cursor: pointer; align-self: flex-start; }

.chip {
  min-height: 38px; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); cursor: pointer; font-size: 0.9rem; transition: background .12s, transform .12s;
}
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.chip:active { transform: scale(0.95); }
.chip.mini { min-height: 30px; padding: 2px 10px; font-size: 0.8rem; background: var(--card-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }

.seg { display: flex; background: var(--card-2); border-radius: 12px; padding: 3px; gap: 3px; }
.seg-b { flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font-size: 0.9rem; color: var(--muted); }
.seg-b[aria-pressed="true"] { background: var(--card); color: var(--text); font-weight: 800; box-shadow: var(--shadow); }

.input {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit;
}
textarea.input { resize: vertical; min-height: 84px; }
.input.num { width: 90px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-weight: 700; font-size: 0.92rem; }
.check { display: flex; gap: 8px; align-items: center; font-size: 0.9rem; }
.check input { width: 20px; height: 20px; }
.hint { color: var(--accent); font-weight: 700; }
.form { gap: 14px; }
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper output { font-size: 1.5rem; font-weight: 800; min-width: 2ch; text-align: center; }
.danger { border-color: color-mix(in srgb, var(--loss) 40%, var(--line)); }

/* ---------- 入力シート ---------- */
dialog { color: var(--text); }
.sheet {
  width: 100%; max-width: 640px; max-height: 100dvh; height: 100dvh; margin: 0 auto;
  padding: 0; border: 0; background: var(--bg);
  display: none; flex-direction: column;
}
.sheet[open] { display: flex; animation: up .25s ease; }
.sheet::backdrop { background: rgb(0 0 0 / 45%); }
@media (min-width: 700px) {
  .sheet { height: auto; max-height: 92dvh; margin-top: 4dvh; border-radius: 20px; }
}
.sheet.small { height: auto; max-height: 85dvh; margin-top: auto; margin-bottom: 0; border-radius: 20px 20px 0 0; }
@media (min-width: 700px) { .sheet.small { margin: auto; border-radius: 20px; } }
#entryForm { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sheet-head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: calc(8px + env(safe-area-inset-top)) 8px 8px; background: var(--card); border-bottom: 1px solid var(--line);
}
.sheet-head .btn { justify-self: start; }
.sheet-head h2 { font-size: 1.05rem; }
.xp-live {
  justify-self: end; margin-right: 8px; font-weight: 900; font-size: 0.9rem;
  background: var(--ball); color: var(--ball-ink); padding: 3px 10px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.meter { height: 4px; background: var(--card-2); }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, #84cc16, var(--accent)); transition: width .3s; }
.sheet-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; overscroll-behavior: contain; }
.sheet-foot {
  display: flex; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--line);
}
.sheet-foot .btn.big { flex: 1; }
.sheet-foot .btn:not(.big) { flex: 0 0 auto; }
.sheet-foot .btn.primary:not(.big), .sheet-foot .btn:only-child { flex: 1; }

.kind-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kind {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 4px; border-radius: 14px; border: 2px solid var(--line); background: var(--card);
  font-weight: 700; cursor: pointer;
}
.kind span { font-size: 1.6rem; }
.kind.on { border-color: var(--accent); background: var(--accent-soft); }

.date-row { display: flex; gap: 6px; align-items: center; }
.date-row .input { flex: 1; min-width: 0; }

.block { border: 1px solid var(--line); border-radius: 16px; padding: 12px; margin: 0; display: flex; flex-direction: column; gap: 12px; background: var(--card); }
.block legend { font-weight: 800; padding: 0 6px; }
.sets { display: flex; flex-direction: column; gap: 8px; }
.set-head, .set { display: grid; grid-template-columns: 4.6em 1fr 0.8em 1fr 32px; align-items: center; gap: 6px; }
.set-head span { font-size: 0.78rem; color: var(--muted); text-align: center; }
.set-no { font-size: 0.8rem; color: var(--muted); }
.set-dash { text-align: center; font-weight: 800; }
.step { display: flex; align-items: center; justify-content: space-between; background: var(--card-2); border-radius: 12px; }
.step button { width: 40px; height: 44px; border: 0; background: transparent; font-size: 1.3rem; cursor: pointer; color: var(--accent); font-weight: 800; }
.step output { font-size: 1.4rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.result-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.result-row .muted { flex-basis: 100%; }
.res { flex: 1; min-height: 42px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); font-weight: 800; cursor: pointer; }
.res-win.on { background: var(--win); border-color: var(--win); color: #fff; }
.res-loss.on { background: var(--loss); border-color: var(--loss); color: #fff; }
.res-draw.on { background: var(--draw); border-color: var(--draw); color: #fff; }

.moods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.moodb {
  display: flex; flex-direction: column; align-items: center; padding: 6px 0;
  border: 2px solid transparent; border-radius: 14px; background: var(--card); cursor: pointer; transition: transform .12s;
}
.moodb span { font-size: 1.8rem; line-height: 1.2; filter: grayscale(0.6); opacity: 0.75; }
.moodb small { font-size: 0.68rem; color: var(--muted); }
.moodb.on { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.06); }
.moodb.on span { filter: none; opacity: 1; }

.prev-focus { background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; font-size: 0.92rem; }
.more summary { cursor: pointer; font-weight: 700; color: var(--muted); padding: 4px 0; }
.more[open] { display: flex; flex-direction: column; gap: 12px; }

.dl { display: grid; grid-template-columns: 6em 1fr; gap: 6px 10px; margin: 0; }
.dl dt { color: var(--muted); font-size: 0.88rem; }
.dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.memo-full { white-space: pre-wrap; background: var(--card); border-radius: 12px; padding: 12px; border: 1px solid var(--line); overflow-wrap: anywhere; }

/* ---------- お祝い ---------- */
.celebrate {
  width: min(92vw, 400px); border: 0; border-radius: 24px; padding: 0; background: var(--card);
  overflow: hidden; box-shadow: 0 20px 60px rgb(0 0 0 / 30%);
}
.celebrate[open] { animation: pop .35s cubic-bezier(.2,1.4,.4,1); }
.celebrate::backdrop { background: rgb(0 0 0 / 55%); }
.cel { padding: 24px 20px 20px; display: flex; flex-direction: column; gap: 10px; text-align: center; position: relative; z-index: 1; }
.cel-emoji { font-size: 3.6rem; line-height: 1; animation: bounce 1s ease 0.2s; }
.cel-title { font-weight: 700; color: var(--accent); }
.cel-xp { font-size: 2.4rem; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.cel-parts { list-style: none; padding: 0; margin: 0; font-size: 0.86rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; }
.cel-parts b { color: var(--text); }
.cel-badges { background: var(--card-2); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.cel-badge { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; text-align: left; column-gap: 8px; align-items: center; }
.cel-badge span { grid-row: span 2; font-size: 2rem; text-align: center; }
.cel-badge small { color: var(--muted); }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; opacity: 0.85; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: fall linear forwards; }

@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); } }
@keyframes pop { from { transform: scale(0.7); opacity: 0; } }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
@keyframes bounce { 0%, 100% { transform: none; } 30% { transform: translateY(-14px) scale(1.1); } 60% { transform: translateY(0) scale(0.95); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 分析 ---------- */
.vbars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; height: 180px; }
.vb { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 0; }
.vb-track { flex: 1; width: 70%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-height: 0; }
.vb-n { font-weight: 800; font-size: 0.85rem; }
.vb-bar { width: 100%; min-height: 3px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #84cc16, var(--accent)); }
.vb-l { font-size: 0.8rem; }
.vb-r { font-size: 0.7rem; min-height: 1.2em; }

.hbars { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.hbars li { display: grid; grid-template-columns: 6.5em 1fr 2em; align-items: center; gap: 8px; font-size: 0.86rem; }
.hb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-track { height: 12px; background: var(--card-2); border-radius: 999px; overflow: hidden; }
.hb-track span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.hbars.bad .hb-track span { background: var(--warn); }
.hb-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: center; }
.two-col { display: grid; grid-template-columns: 1fr; gap: 16px; }
.two-col > div { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 560px) { .two-col { grid-template-columns: 1fr 1fr; } }
.big-num { font-size: 1.8rem; font-weight: 900; }

.tbl { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tbl th { text-align: left; font-size: 0.76rem; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); padding: 4px; }
.tbl td { padding: 8px 4px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.tbl td:first-child { overflow-wrap: anywhere; }

.ai-out { display: flex; flex-direction: column; gap: 6px; }
.ai-text { white-space: pre-wrap; background: var(--card-2); border-radius: 12px; padding: 12px; font-size: 0.94rem; overflow-wrap: anywhere; }

/* ---------- バッジ ---------- */
.badge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .badge-grid { grid-template-columns: repeat(3, 1fr); } }
.badge { align-items: center; text-align: center; gap: 4px; padding: 14px 10px; }
.badge-icon { font-size: 2.2rem; }
.badge.off .badge-icon { filter: grayscale(1); opacity: 0.3; }
.badge.off b { color: var(--muted); }
.xp-rules { margin: 0; padding-left: 1.2em; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; font-size: 0.9rem; }
@media (max-width: 400px) { .xp-rules { grid-template-columns: 1fr; } }

.toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 50; background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 999px;
  font-size: 0.9rem; box-shadow: var(--shadow); max-width: calc(100vw - 32px);
}

/* ---------- 作戦ノート ---------- */
.top-right { display: flex; align-items: center; gap: 8px; }
.gear { text-decoration: none; font-size: 1.25rem; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; }
.gear[aria-current="page"] { background: var(--accent-soft); }

:root {
  --court-tennis: #3f7d4e;
  --court-tennis-out: #2f6440;
  --court-padel: #2c6aa0;
  --court-padel-out: #24578a;
  --court-line: #ffffff;
  --shot-opp: #ff5a5f;
  --shot-me: #d9f94a;
}

.court { display: block; width: 100%; height: auto; border-radius: 12px; touch-action: manipulation; }
.court .court-out { fill: var(--court-tennis-out); }
.court .court-in { fill: var(--court-tennis); }
.court-padel .court-out { fill: var(--court-padel-out); }
.court-padel .court-in { fill: var(--court-padel); }
.court .cl { stroke: var(--court-line); stroke-width: 0.08; fill: none; }
.court .wall { stroke: #bfe3ff; stroke-width: 0.35; stroke-linecap: square; }
.court .mesh { stroke: #bfe3ff; stroke-width: 0.15; stroke-dasharray: 0.3 0.25; }
.court .net { stroke: #f1f5f9; stroke-width: 0.22; stroke-dasharray: 0.25 0.12; }
.court .side-label { fill: rgb(255 255 255 / 30%); font-size: 1.3px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.court .shot { fill: none; stroke-width: 0.28; stroke-linecap: round; }
.court .shot.opp { stroke: var(--shot-opp); stroke-dasharray: 0.6 0.35; }
.court .shot.me { stroke: var(--shot-me); }
.court .ah.opp { fill: var(--shot-opp); }
.court .ah.me { fill: var(--shot-me); }
.court .land { fill: none; stroke: var(--shot-me); stroke-width: 0.15; }
.court .who circle { stroke: #fff; stroke-width: 0.14; }
.court .who.opp circle { fill: #e11d48; }
.court .who.me circle { fill: #16a34a; }
.court .who text { fill: #fff; font-size: 0.85px; font-weight: 800; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.court .ball { fill: #f4ff6a; stroke: #3a4a00; stroke-width: 0.08; }
.court.mini { width: 72px; flex: 0 0 72px; border-radius: 8px; }
.court.big { width: 100%; max-height: 58dvh; }
#tacticDetail .court.big { max-height: 46dvh; }
.court.edit { cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }
.court .hit { fill: none; stroke: transparent; stroke-width: 1.4; }
.court .sline.sel .shot { stroke-width: 0.45; filter: drop-shadow(0 0 0.25px #fff); }
.court .who.sel circle { stroke: #facc15; stroke-width: 0.3; }
.court .who.partner circle { fill: #0891b2; }
.court .land.opp { stroke: var(--shot-opp); }
.court .sno { pointer-events: none; }
.court .sno circle { fill: #111827; stroke-width: 0.1; }
.court .sno.opp circle { stroke: var(--shot-opp); }
.court .sno.me circle { stroke: var(--shot-me); }
.court .sno text { fill: #fff; font-size: 0.6px; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.court .pending { fill: none; stroke: #facc15; stroke-width: 0.2; stroke-dasharray: 0.3 0.2; }
.court.mini .sno { display: none; }
.court.mini .side-label { display: none; }

.tgrid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) { .tgrid { grid-template-columns: 1fr 1fr; } }
.tcard {
  display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px; cursor: pointer;
}
.tcard.tpl { cursor: default; background: var(--card-2); }
.tcard-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; align-items: flex-start; }
.tcard-title { line-height: 1.35; }
.tcard-shots { color: var(--muted); }
.tl-opp { color: var(--loss); font-weight: 700; }
.tl-me { color: var(--accent); font-weight: 700; }
.used { color: var(--accent); font-weight: 700; }
.tpromo { border-style: dashed; }

.tdraw { display: flex; flex-direction: column; gap: 8px; }
.ttools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ttool { min-height: 40px; border-radius: 10px; border: 2px solid var(--line); background: var(--card); font-weight: 700; font-size: 0.82rem; cursor: pointer; padding: 2px 4px; }
.ttool.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ttool.tool-shot-opp.on { background: #e11d48; border-color: #e11d48; }
.tselected { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 0; }
.tselected:empty { display: none; }
.tedit-btns { margin-left: auto; display: flex; gap: 14px; }
.tedit-btns .linkish:disabled { color: var(--muted); opacity: 0.5; cursor: default; }
.thelp { color: var(--accent); font-weight: 700; min-height: 1.4em; }
.tcourt { display: flex; justify-content: center; }
.legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lg::before { content: ""; display: inline-block; width: 22px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.lg.opp::before { background: repeating-linear-gradient(90deg, var(--shot-opp) 0 6px, transparent 6px 9px); }
.lg.me::before { background: #84cc16; }
.legend > .btn { margin-left: auto; }
.tdetail-title { font-size: 1.1rem; }
.tshots { font-size: 0.95rem; }