:root {
  color-scheme: dark;

  /* fixed ink (for text on light buttons even in dark themes) */
  --ink: #0B1220;

  /* palette */
  --navy: #102C57;
  --blue: #1679AB;
  --pink1: #FFB1B1;
  --pink2: #FFCBCB;
  --gray0: #F4F6F8;
  --gray1: #E6E9EE;
  --gray2: #C9D1DC;

  /* semantic */
  --bg: var(--navy);
  --textOnBg: var(--gray0);
  --mutedOnBg: rgba(244, 246, 248, .78);

  --surface: var(--gray0);
  --surface2: var(--gray1);
  --border: var(--gray2);

  --text: #0B1220;
  --muted: rgba(11, 18, 32, .72);

  --primary: var(--blue);
  --primaryHv: #1A8EC6;
  --onPrimary: #FFFFFF;

  --danger: var(--pink1);
  --onDanger: var(--navy);

  --shadow: 0 10px 25px rgba(0,0,0,.18);
  --radius: 16px;

  /* toast + bottom bar (theme-aware) */
  --toastBg: var(--surface2);
  --toastFg: var(--text);
  --toastBorder: var(--border);
  --toastActionBg: var(--primary);
  --toastActionFg: var(--onPrimary);
  --toastActionBorder: var(--border);

  --bottomBarBg: var(--bg);
  --bottomBarBorder: rgba(244,246,248,.22);

  --toastActionBorder: transparent;

  /* typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ===== Theme presets =====
   Selected by: document.documentElement.dataset.theme (stored in localStorage "__mj_theme")
*/

html[data-theme="katate"] { color-scheme: dark; }


/* カラーパレット: モスアンバー */
html[data-theme="moss_umber"]{
  color-scheme: dark;
  --bg: #2C3930;
  --navy: #2C3930;
  --textOnBg: #DCD7C9;
  --surface: #3F4F44;
  --surface2: #344238;
  --border: #A27B5C;
  --text: #DCD7C9;
  --muted: rgba(220,215,201,.78);
  --primary: #A27B5C;
  --primaryHv: #AD8B70;
  --onPrimary: #2C3930;
  --pink1: #D27C7C;
  --pink2: #E7B3B3;
  --toastBg: #465A4C;
  --toastBorder: #A27B5C;
  --bottomBarBg: var(--bg);
  --bottomBarBorder: rgba(220,215,201,.22);
}


/* カラーパレット: ブラッシュピーチ */
html[data-theme="blush_peach"]{
  color-scheme: light;
  --bg: #FFDCDC;
  --navy: #FFDCDC;
  --textOnBg: #0B1220;
  --surface: #FFF2EB;
  --surface2: #FFE8CD;
  --border: #FFD6BA;
  --primary: #D1AF99;
  --primaryHv: #C0A18D;
  --onPrimary: #0B1220;
  --pink1: #E6C1A7;
  --pink2: #FFD6BA;
  --bottomBarBg: var(--surface);
  --bottomBarBorder: rgba(11,18,32,.12);
  --toastBg: var(--surface2);
}

/* カラーパレット: ストーンロード（石畳 + 空色アクセント） */
html[data-theme="stone_road"]{
  color-scheme: light;
  /* Base: stone/earth, Accent: sky blue, Sub accent: olive green */
  --bg: #E9DFC9;          /* stone pavement */
  --navy: #E9DFC9;
  --textOnBg: #4A4236;    /* charcoal brown */

  --surface: #F6F1E6;     /* sandstone card */
  --surface2: #E1D4BE;    /* darker stone */
  --border: #C8BFA8;

  --text: #4A4236;
  --muted: rgba(74,66,54,.78);

  --primary: #86B6DC;     /* sky accent */
  --primaryHv: #74A8D2;
  --onPrimary: #1A2A33;

  /* Secondary accents (used in some UI accents) */
  --pink1: #7E9B6A;       /* olive green */
  --pink2: #9DBB85;       /* light olive */

  --bottomBarBg: var(--surface);
  --bottomBarBorder: rgba(74,66,54,.14);
  --toastBg: var(--surface2);
  --toastBorder: rgba(134,182,220,.35);
}

/* カラーパレット: ストーンロード（Night） */
html[data-theme="stone_road_dark"]{
  color-scheme: dark;
  /* Night stone with gentle sky accent */
  --bg: #1F1E1A;
  --navy: #1F1E1A;
  --textOnBg: #ECE8DE;

  --surface: #2B2A24;
  --surface2: #35342D;
  --border: #4E4A3F;

  --text: #ECE8DE;
  --muted: rgba(236,232,222,.78);

  --primary: #6EA6CF;
  --primaryHv: #5E96BF;
  --onPrimary: #0E1A22;

  --pink1: #8FA77A;
  --pink2: #B4C7A1;

  --toastBg: var(--surface2);
  --toastBorder: rgba(110,166,207,.30);
  --bottomBarBg: var(--bg);
  --bottomBarBorder: rgba(236,232,222,.18);
  --statusBarBg: var(--bg);
}

/* カラーパレット: 湖畔の聖域（画像モチーフ） */
html[data-theme="lakeside"]{
  color-scheme: light;
  /* base: misty meadow / accent: lake teal / highlight: sunbeam */
  --bg: #E6F2EC;
  --navy: #E6F2EC;
  --textOnBg: #243733;

  --surface: #F9FFFC;
  --surface2: #DFF0E8;
  --border: #9FBFB4;

  --text: #243733;
  --muted: rgba(36,55,51,.70);

  --primary: #3FA7A3;
  --primaryHv: #2E8F8B;
  --onPrimary: #F9FFFC;

  --pink1: #E6D36A; /* sunbeam */
  --pink2: #8BC4A1; /* young green */

  --bottomBarBg: var(--surface);
  --bottomBarBorder: rgba(36,55,51,.12);
  --toastBg: var(--surface2);
  --toastBorder: rgba(159,191,180,.55);
}

/* lakeside: subtle radial gradient (darker at bottom-left) */
html[data-theme="lakeside"] body{
  background:
    radial-gradient(circle at 0% 100%, rgba(47,111,94,.18) 0%, rgba(47,111,94,0) 62%),
    var(--bg);
}

/* カラーパレット: 湖畔の聖域 - Dark（夜の湖畔） */
html[data-theme="lakeside_dark"]{
  color-scheme: dark;
  --bg: #162322;
  --navy: #162322;
  --textOnBg: #EAF7F3;

  --surface: #1E3432;
  --surface2: #233F3C;
  --border: #2F6F5E;

  --text: #EAF7F3;
  --muted: rgba(234,247,243,.74);

  --primary: #4FBDB4;
  --primaryHv: #3FA7A3;
  --onPrimary: #162322;

  --pink1: #C9B84A; /* moonlight */
  --pink2: #8BC4A1;

  --toastBg: var(--surface2);
  --toastBorder: rgba(79,189,180,.28);
  --bottomBarBg: var(--bg);
  --bottomBarBorder: rgba(234,247,243,.18);
  --statusBarBg: var(--bg);
}



body { margin:0; font-family:var(--font-sans); background:var(--bg); color:var(--textOnBg); font-size:18px; line-height:1.55; letter-spacing:.01em; font-variant-numeric: tabular-nums; }

/* Status bar / top safe-area paint color.
   Default: use the accent (light themes). Dark themes override to use the dark base so the status bar isn't neon. */
:root{ --statusBarBg: var(--primary); }

/* iOS PWA/Safari: paint the top safe-area (status bar) with the theme accent. */
@supports (padding-top: env(safe-area-inset-top)) {
  body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: env(safe-area-inset-top);
    background: var(--statusBarBg);
    z-index: 10000;
    pointer-events: none;
  }
}

/* Home: richer theme picker */
.themeRow{ align-items: flex-start; }
.themeSelect{ width:100%; }
.themePicker{ margin-top:10px; }
.themePickerHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.themePickerTitle{ font-weight:700; }
.segRow{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.segBtn{ padding:8px 10px; font-size:14px; border-radius:999px; background:var(--surface2); border:1px solid var(--border); color:var(--text); }
.segBtn.active{ background:var(--primary); border-color:var(--primaryHv); color:var(--onPrimary); }
.themeGrid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
@media (min-width: 520px){ .themeGrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.themeCardBtn{ width:100%; text-align:left; padding:12px; border-radius:16px; background:var(--surface); border:1px solid var(--border); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
html[data-theme="lakeside_dark"] .themeCardBtn,
html[data-theme="stone_road_dark"] .themeCardBtn{ box-shadow: 0 10px 20px rgba(0,0,0,.28); }
.themeCardBtn.active{ outline: 3px solid var(--primary); outline-offset: 2px; }
.themeCardTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.themeName{ font-weight:700; font-size:15px; line-height:1.2; }
.themeModeTag{ font-size:12px; opacity:.75; }
.swatches{ display:flex; gap:6px; margin-top:10px; }
.sw{ width:18px; height:18px; border-radius:6px; border:1px solid rgba(0,0,0,.12); }
html[data-theme="lakeside_dark"] .sw,
html[data-theme="stone_road_dark"] .sw{ border-color: rgba(255,255,255,.18); }
.themeNote{ margin-top:8px; font-size:12px; opacity:.75; line-height:1.25; }
.themeSectionTitle{ margin-top:14px; margin-bottom:8px; font-weight:700; font-size:14px; opacity:.85; }

main { max-width: 920px; margin: 0 auto; padding: 18px; padding-top: calc(18px + env(safe-area-inset-top, 0px)); padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
h1 { font-size: 22px; margin: 12px 0 14px; }
h2 { font-size: 20px; margin: 12px 0 10px; }
/* App brand / logo */
.appBrand{ display:flex; justify-content:center; margin-top:10px; }
.appLogo{ width:min(420px, 88vw); height:auto; display:block; }
.appTitle{ text-align:center; }

label { display:block; margin: 6px 0 6px; opacity:.9; }
.card {background:var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 14px; margin: 12px 0; box-shadow: var(--shadow); color: var(--text);}


/* Browse/Today cards */
.cardMain { min-width: 0; }
.cardTitle { font-weight: 900; font-size: 20px; line-height: 1.15; }
.cardMeta { opacity: .85; }
.cardActions { display:flex; gap:8px; justify-content:flex-end; align-items:center; flex-wrap: nowrap; }
.cardActions a.btn, .cardActions button { flex: 0 0 auto; }
@media (max-width: 420px) { .cardActions { flex-wrap: wrap; } }

details.metaDetails > summary { cursor: pointer; }
details.metaDetails { margin-top: 8px; }
.row { display:flex; gap:12px; flex-wrap: wrap; align-items:center; }

/* Header nav button rows: never overlap.
   - Use flex on wide screens.
   - On narrow screens these rows become CSS grid (see media queries below).
   - Allow label wrapping so long Japanese strings don't spill over adjacent buttons.
*/
.row.nav2, .row.nav3 {
  flex-wrap: wrap;
  width: auto;
  justify-content: flex-end;
  gap: 10px;
}
.row.nav2 > button, .row.nav2 > a, .row.nav2 > .btn {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}
.row.nav3 > button, .row.nav3 > a, .row.nav3 > .btn {
  min-width: 0;
  white-space: normal;
  line-height: 1.15;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Page header: when nav buttons are placed ABOVE the title */
.headerNavTop {
  justify-content: flex-end;
  margin-top: 6px;
  margin-bottom: 6px;
}
.headerNavTop + h1 { margin-top: 0; }

.row.space { justify-content: space-between; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid2 > button, .grid2 > a.btn { white-space: nowrap; word-break: keep-all; }
@media (max-width: 420px) { .grid2 { grid-template-columns: 1fr; } }

/* Always keep 2 columns (used for record input where side-by-side matters) */
.grid2fixed { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid2fixed > button, .grid2fixed > a.btn { white-space: nowrap; word-break: keep-all; }
.grid3 { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.grid3fixed { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.topActions3 { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.grid4 { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.grid5 { display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.grid3 > button, .grid3 > a.btn, .grid3fixed > button, .grid3fixed > a.btn, .topActions3 > button, .topActions3 > a.btn, .grid4 > button, .grid4 > a.btn, .grid5 > button, .grid5 > a.btn { white-space: nowrap; word-break: keep-all; }
@media (max-width: 520px) { .grid5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid3fixed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .topActions3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/*
  IMPORTANT (layout stability):
  On iOS/Safari, elements with width:100% inside grid/flex rows can overflow
  if they use the default content-box sizing (padding adds on top of width).
  This was especially visible for white anchor buttons (a.btn).
*/
button { appearance:none; border:1px solid var(--border); background:var(--surface2); color:var(--text); padding:14px 16px; border-radius: 14px; font-size: 18px; box-sizing: border-box; max-width: 100%; }
button.primary { background:var(--primary); border-color:var(--onPrimary); color: var(--onPrimary); }
button.danger { background:var(--danger); border-color: transparent; }
button:hover { filter: brightness(1.03); }
button.primary:hover { background: var(--primaryHv); border-color: var(--primaryHv); }

button.small { padding: 10px 12px; font-size: 16px; border-radius: 12px; }
button.tiny { padding: 8px 10px; font-size: 15px; border-radius: 12px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(22,121,171,.55); outline-offset: 2px; }

button.active {outline: 3px solid var(--primary); outline-offset: 2px;}
button.disabled { opacity:.5; pointer-events:none; }
input, select, textarea { width:100%; box-sizing:border-box; padding: 12px 14px; border-radius: 14px; border:1px solid var(--border); background:#FFFFFF; color:var(--ink); font-size: 18px; }

/* iOS Safari: input[type=date] can visually overlap when placed side-by-side.
   Use a grid + min-width:0 to ensure the control can shrink without overflow. */
input[type="date"]{ display:block; width:100%; max-width:100%; min-width:0; -webkit-appearance:none; appearance:none; padding-right: 40px; }

/* Browse filter form (date/rule/venue/grain + buttons) */
.filterGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items:end;
}
.filterGrid .field{ min-width:0; }
.filterGrid .fieldLabel{

  font-size: 14px;
  opacity: .75;
  margin: 0 0 6px 2px;
}
.filterGrid .btnRow{ align-self:stretch; }

@media \(max-width: 520px\)\{
  \.filterGrid\{ grid-template-columns: 1fr; \}
\}
/* date inputs: keep readable but prevent overflow */
.dateGrid input[type="date"]{ font-size: 16px; }
textarea { min-height: 86px; }
hr { border:0; border-top:1px solid var(--border); margin: 14px 0; }

/* HR with centered title (used for Houju section) */
.hrTitle{position:relative; margin:14px 0; text-align:center;}
.hrTitle:before{content:""; position:absolute; left:0; right:0; top:50%; border-top:1px solid var(--border); transform:translateY(-50%);}
.hrTitle span{position:relative; display:inline-block; padding:0 10px; font-size:12px; color:var(--muted); background:var(--surface); line-height:1.4;}

a { color: var(--primary); text-decoration:none; }
/* anchor buttons (used in browse/today) */
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #FFFFFF;
  color: var(--primary);
  font-weight: 800;
  box-sizing: border-box;
  max-width: 100%;
}
a.btn:hover { filter: brightness(1.03); }
a.btn.small { padding: 10px 12px; font-size: 16px; border-radius: 12px; }
a.btn.tiny { padding: 8px 10px; font-size: 15px; border-radius: 12px; }
.mono { font-family:var(--font-mono); font-size: 16px; font-variant-numeric: tabular-nums; }
/* numeric readability */
.score, .rank, .stat, .num { font-variant-numeric: tabular-nums; }
.smalltext { font-size: 16px; color: var(--muted); }
.bigkyoku { font-size: 44px; font-weight: 950; letter-spacing: .6px; line-height: 1.08; }
.timer { font-size: 20px; opacity:.9; }

@media (max-width: 420px) {
  .bigkyoku { font-size: 38px; }
}
.list { display:flex; flex-direction:column; gap:10px; }
.item {padding:12px; border-radius: 14px; border:1px solid var(--border); background:var(--surface2); color: var(--text);}
.itemRow { display:flex; justify-content: space-between; gap:12px; align-items:flex-start; }
.badge {display:inline-block; padding:6px 10px; border-radius: 999px; border:1px solid var(--border); font-size: 14px; background: #FFFFFF; color: var(--text);}
.badge.active {border-color:var(--primary); background: rgba(22,121,171,.12);}
.badge.finalized {border-color:var(--pink2); background: rgba(255,203,203,.28);}
.badge.synced {border-color:var(--pink1); background: rgba(255,177,177,.22);}
.statsBig { font-size: 22px; font-weight: 800; }
.statsLine {
  font-size: 18px;
  opacity: .92;
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.statsLabel { white-space: nowrap; }
.statsVal { font-weight: 800; }

/* Slider stats lines: keep value readable on mobile (no right-align, no percent-first tricks) */
.statsLine { display:flex; gap:10px; flex-wrap:wrap; align-items:baseline; }
.statsLine .statsLabel { opacity:.9; }
.statsLine .statsVal { font-weight:900; }

.kv { display:flex; gap:12px; flex-wrap:wrap; align-items:baseline; }
.kv b { font-size: 24px; }
.overlay { position: fixed; inset:0; background: rgba(16,44,87,.72); display:none; align-items:center; justify-content:center; padding: 16px; z-index: 999; }
.overlay.show { display:flex; }
.modal {width: min(560px, 100%); background:var(--surface); border:1px solid var(--border); border-radius: 16px; padding: 16px; color: var(--text);}
.modal h3 { margin: 0 0 10px; font-size: 20px; }
.modal p { margin: 10px 0; }

@keyframes blinkAnim { 0%,100% { opacity:1; } 50% { opacity:.15; } }
.blink { animation: blinkAnim 0.55s linear 0s 5; }
button.win { background:var(--primary); border-color:var(--onPrimary); color: var(--onPrimary); }
button.draw { background:var(--gray2); border-color:var(--navy); color: var(--ink); }
/* red/pink buttons: no outline border (user preference) */
button.houju { background:var(--pink1); border-color: transparent; }
button.other { background:var(--pink2); border-color: transparent; color: var(--ink); }
button.neutral { background:var(--gray1); border-color:var(--navy); color: var(--ink); }
textarea.memoWide { min-height: 160px; }

@media (max-width: 520px) {
  /* Button rows: centered, equal spacing, neat wrap */
  .row:not(.space):not(.nav3) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
  }
  .row:not(.space):not(.nav3) > button,
  .row:not(.space):not(.nav3) > a,
  .row:not(.space):not(.nav3) > .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Header nav2 (2 buttons): keep the old "two pills" look; never overlap */
  .row.nav2 {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
  }
  .row.nav2 > button,
  .row.nav2 > a,
  .row.nav2 > .btn {
    flex: 0 1 auto;
    min-width: 0;
    width: auto !important;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 12px;
    font-size: 16px;
  }

  .row.nav3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
  }
  .row.nav3 > button,
  .row.nav3 > a,
  .row.nav3 > .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 10px 8px;
    font-size: 14px;
  }
}

/* Ultra-narrow screens: 3-wide header nav becomes 2-wide (no overlap) */

/* Ultra-narrow screens: nav2 can wrap (still no overlap) */
@media (max-width: 360px) {
  .row.nav2 { flex-wrap: wrap; }
  .row.nav2 > button,
  .row.nav2 > a,
  .row.nav2 > .btn {
    flex: 1 1 calc(50% - 10px);
  }
}

@media (max-width: 420px) {
  .row.nav3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .row.nav3 > button,
  .row.nav3 > a,
  .row.nav3 > .btn {
    font-size: 13px;
    padding: 10px 6px;
  }
}

@media (max-width: 340px) {
  .row.nav3 {
    grid-template-columns: 1fr;
  }
}

/* ===== Toast bar (quick feedback + action) ===== */
.toastBar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  max-width: min(920px, calc(100vw - 24px));
  width: calc(100vw - 24px);
  background: var(--toastBg);
  color: var(--toastFg);
  border: 1px solid var(--toastBorder);
  padding: 10px 12px;
  border-radius: 14px;
  display: none;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow);
}
.toastBar.show { display: flex; }
.toastBar .toastMsg { flex: 1; font-size: 15px; line-height: 1.2; }
.toastBar .toastAction {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  background: var(--toastActionBg);
  border: 1px solid var(--toastActionBorder);
  color: var(--toastActionFg);
}
.toastBar .toastAction:active { transform: translateY(1px); }

/* KPI cards (browse detail) */
.kpiRow{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;align-items:flex-start;}
/*
  KPI cards are rendered as nested `.card` inside a parent `.card` (e.g. summary blocks).
  When theme bg/surface tones are close, nested cards can visually merge.
  Use `--surface2` for KPI cards so they stay card-like across themes.
*/
.kpiCard{background:var(--surface2);padding:12px;margin:0;min-width:0;flex:1 1 160px;display:flex;flex-direction:column;justify-content:flex-start;gap:6px;}
.kpiTitle{font-size:13px;opacity:.75;}
.kpiValue{font-size:20px;font-weight:800;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kpiSub{font-size:12px;opacity:.72;margin-top:2px;}
.kpiDelta{font-size:12px;font-weight:700;opacity:.65;margin-top:-2px;line-height:1.1;}

/* Mobile: iPhone Pro Max is 430px-ish, so use a slightly wider breakpoint */
@media (max-width:520px){
  .kpiRow{gap:8px;}
  .kpiCard{padding:10px;flex:1 1 calc(50% - 8px);}
  .kpiTitle{font-size:13px;}
  .kpiValue{font-size:16px;line-height:1.1;}
  .kpiValue span{font-size:12px !important;}
  .kpiSub{display:none;}
}

@media (max-width:360px){
  .kpiCard{padding:9px;flex:1 1 100%;}
  .kpiValue{font-size:16px;}
}



/* sessions_manage: mini session cards */
.miniCard { padding: 14px 14px; }
.miniCard .miniMeta { margin-top: 4px; }
.miniCard .miniChecks { display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.miniCard .miniChecks label { display:inline-flex; align-items:center; gap:6px; margin:0; white-space:nowrap; word-break: keep-all; }
.miniCard .miniChecks input[type="checkbox"]{ width:22px; height:22px; flex:0 0 auto; }
@media (max-width: 520px){
  .miniCard .miniChecks { width:100%; justify-content:flex-start; }
}

/* sessions_manage: action buttons row in the summary card */
.sessionsActions.row { gap:10px; }
@media (max-width:520px){
  .sessionsActions.row > button,
  .sessionsActions.row > a.btn { padding: 12px 12px; font-size: 16px; border-radius: 14px; }
  .sessionsActions.row > button.primary,
  .sessionsActions.row > button.danger { min-height: 52px; }
}
/* カラーパレット: ティールレモン */
html[data-theme="teal_lemon"]{
  color-scheme: dark;
  /* 基調: ティール（面積大） / アクセント: レモンイエロー（面積中） / 差し色: マゼンタレッド（面積小） */
  --bg: #007988;
  --navy: #007988;
  --textOnBg: #F4F6F8;

  --surface: #008899;
  --surface2: #00707E;
  --border: #CACA10;

  --text: #F4F6F8;
  --muted: rgba(244,246,248,.78);

  --primary: #F2F206;
  --primaryHv: #DCDC05;
  --onPrimary: #003E46;

  --pink1: #D70043;
  --pink2: #FF6D95;

  --toastBg: var(--surface2);
  --toastBorder: rgba(242,242,6,.35);

  --bottomBarBg: var(--bg);
  --bottomBarBorder: rgba(244,246,248,.18);
}


/* Record: agari han band buttons */
.hanband { margin-top: 10px; }
.hanbandRow { gap: 8px; }
.hanbandRow button { white-space: nowrap; }
/* Two-row layout (han1-4+mangan) + (haneman..yakuman)
   On narrow screens the first grid may wrap to multiple lines; ensure the
   second row never visually collides with the first.
*/
.hanbandRow + .hanbandRow { margin-top: 8px; }

/* Record page compact mode */
body.recordCompact .card { padding: 12px; margin: 10px 0; }
body.recordCompact h2 { font-size: 18px; margin: 8px 0 6px; }
body.recordCompact hr { margin: 10px 0; }
body.recordCompact .row { gap: 8px; }
body.recordCompact .grid2fixed, body.recordCompact .grid3fixed, body.recordCompact .grid4, body.recordCompact .grid5 { gap: 8px; }
body.recordCompact button { padding: 12px 12px; font-size: 16px; border-radius: 14px; }
body.recordCompact button.tiny { padding: 7px 8px; font-size: 14px; }
body.recordCompact button.small { padding: 8px 8px; font-size: 14px; }
body.recordCompact .bigkyoku { font-size: 40px; }
@media (max-width: 420px) { body.recordCompact .bigkyoku { font-size: 34px; } }

/* Record screen bottom bar (count + actions)
   NOTE: ユーザー要望により「常時固定」ではなく、他のボタンと同様に
   画面下部に通常配置（重なり防止）する。
*/
body.recordCompact main{ padding-bottom: 18px; }
.bottomBar{
  position: static;
  /* main に左右 padding があるので、ここで 100% + 左右 margin を足すと
     はみ出して「右にずれる/見切れる」原因になる。
     → 横幅は auto、左右 margin は 0 にして main の padding に任せる。 */
  width: auto;
  background: var(--cardBg);
  color: var(--fg);
  border: 1px solid var(--cardBorder);
  border-radius: 16px;
  padding: 12px 12px;
  margin: 10px 0 calc(12px + env(safe-area-inset-bottom, 0px)) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  box-shadow: var(--shadow);
}
.bottomActions{ display:flex; gap: 8px; align-items:center; margin-left:auto; flex-wrap: wrap; justify-content: flex-end; }
.bottomCount{ font-size: 13px; opacity: .8; white-space: nowrap; }
.bottomActions > button{ white-space: nowrap; }

/* --- Record: guidance (dim non-recommended buttons but keep clickable) --- */
.is-dim{ opacity: .35; filter: saturate(.65); }
.is-next{ outline: 2px solid rgba(255,255,255,.22); outline-offset: 2px; }
body.recordCompact .topActions3 > button.small { padding: 8px 6px; font-size: 13px; }


/* --- Record: commit state highlight (ready-to-save) --- */
#stateCommitWrap .stateLabel{
  font-size: 13px;
  margin: 6px 0 6px;
  opacity: .86;
}
#stateCommitWrap.ready{
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: 14px;
}
#stateCommitWrap.ready button{
  background: var(--primary);
  color: var(--onPrimary);
  border-color: var(--primaryHv);
}
#stateCommitWrap.ready button:hover{
  background: var(--primaryHv);
  border-color: var(--primaryHv);
}


/* Finalize screen: avoid content hidden behind bottomBar */
body.finalize main{ padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
/* Finalize bottomBar button layout */
body.finalize .bottomBarInner{
  display:flex;
  gap: 8px;
  width: 100%;
  align-items: center;
}
body.finalize .bottomBarInner > button{
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
}

/* browse v54: KPI cards + sliders */
.sectionRow{display:flex;align-items:center;gap:10px;margin:8px 12px 0 12px}
.sectionTitle{font-weight:800;opacity:.9}
.sectionLine{height:2px;flex:1;background:rgba(255,255,255,.25);border-radius:999px}
.kpiGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* KPIカードは「カードの中のカード」になりがちなので、テーマの --surface2 を使って一段濃くする */
.kpiCard{border-radius:16px;padding:12px 12px 10px 12px;border:1px solid rgba(0,0,0,.08);background:var(--surface2);box-shadow:0 1px 0 rgba(0,0,0,.04)}
html[data-theme$="_dark"] .kpiCard{border:1px solid rgba(255,255,255,.12);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.kpiLabel{font-size:13px;opacity:.9}
.kpiValue{font-size:clamp(16px,4.8vw,28px);font-weight:900;letter-spacing:.01em;margin-top:6px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpiSub{display:block !important;margin-top:4px;font-size:clamp(11px,3.2vw,13px);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpiPrimary .kpiValue{font-size:clamp(18px,5.4vw,32px)}
.sliderWrap{margin:8px 12px 0 12px}
.slider{display:flex;gap:10px;overflow:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.slide{min-width:85%;scroll-snap-align:start;border-radius:16px;padding:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.dots{display:flex;gap:6px;justify-content:center;margin-top:6px;opacity:.8}
.dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}
.dot.active{background:rgba(255,255,255,.9)}
.fatal{margin:10px 12px;padding:10px 12px;border-radius:12px;background:rgba(255,0,0,.12);border:1px solid rgba(255,0,0,.25);color:#fff;font-size:12px;white-space:pre-wrap}


/* --- Slider stats: percent-first & right-align value only (v62) --- */
.statsLine{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap;
}
.statsLabel{
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
}
.statsVal{
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
  font-weight: 900;
}



/* --- mini KPI cards inside slider --- */
.miniKpiGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}
@media (max-width: 380px){
  .miniKpiGrid{ grid-template-columns:1fr; }
}

.miniKpiGrid3{
  grid-template-columns:repeat(3, 1fr);
}
@media (max-width: 430px){
  .miniKpiGrid3{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 360px){
  .miniKpiGrid3{ grid-template-columns:1fr; }
}
.miniKpiCard{
  border:1px solid rgba(255,255,255,0.18);
  border-radius:16px;
  padding:10px 12px;
  background:rgba(0,0,0,0.06);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
.miniKpiLabel{
  font-size:13px;
  opacity:0.85;
  margin-bottom:6px;
  line-height:1.15;
}
.miniKpiValue{
  font-size:22px;
  font-weight:900;
  line-height:1.05;
  letter-spacing:0.2px;
}
.miniKpiSub{
  font-size:13px;
  opacity:0.85;
  margin-top:4px;
  line-height:1.15;
}


/* --- sync.html checkbox wrapping fix (iOS) --- */
/* Checkbox line: robust wrap on iOS (avoid horizontal overflow) */
.checkLine{display:grid;grid-template-columns:26px 1fr;column-gap:10px;row-gap:6px;align-items:start;max-width:100%;width:100%;}
.checkLine input{margin-top:4px;}
.checkLine span{min-width:0;white-space:normal;overflow-wrap:anywhere;word-break:break-word;}

/* Optional: clip horizontal overflow inside cards (used on sync.html) */
.clipX{overflow-x:hidden;}
.card .smalltext{max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word;}


/* fix72: prevent horizontal overflow on iOS, keep checkbox help text inside card */
html, body { max-width: 100%; overflow-x: hidden; }
.card, .panel, .container, .content { max-width: 100%; }
.smalltext { max-width: 100%; overflow-wrap:anywhere; word-break: break-word; }
/* (legacy) */

/* --- Busy hints (lightweight) --- */
.busyMini{position:fixed;right:12px;bottom:72px;z-index:9998;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,0.92);box-shadow:0 10px 30px rgba(0,0,0,0.15);font-weight:800;}
.busyMini .busySpinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(0,0,0,0.25);border-top-color:rgba(0,0,0,0.75);animation:busySpin 0.9s linear infinite;}
@keyframes busySpin{to{transform:rotate(360deg);}}