@charset "utf-8";

/* =========================================================
   0) Design Tokens
   ========================================================= */
:root{
  --header-h: 60px;
  --footer-h: 40px;
  --sidebar-w: 200px;

  --radius-s: 4px;
  --radius-m: 8px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 8px rgba(0,0,0,.04);
  --shadow-2: 0 6px 20px rgba(0,0,0,.10);

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN",
               "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;

  --fs-1: 0.875rem;
  --fs-2: 1rem;
  --fs-3: 1.125rem;
  --fs-4: 1.5rem;

  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f1f3f5;
  --text: #111317;
  --muted: #5b626a;
  --border: #d8dbe1;

  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-on: #ffffff;

  --header-bg: #1f2937;
  --footer-bg: #1f2937;

  --sidebar-bg: #374151;
  --sidebar-on: #ffffff;

  --table-head-bg: #2b2f36;
  --table-head-on: #ffffff;
  --table-row: #ffffff;
  --table-row-alt: #f0f2f5;

  --dropzone-bg: #fafafa;
  --dropzone-border: #cfd3da;
  --dropzone-hover: #e7eaef;

  --hl-bg: #fff3bf;
  --hl-on: #111317;
  --hl-ring: #f59e0b;

  --control-h: 38px;

  --danger: #ef4444;
  --danger-hover: #dc2626;
  --danger-on: #fff;

  /* Tarot */
  --tarot-card-w: 120px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0f14;
    --surface: #121821;
    --surface-2: #0f141c;
    --text: #e9edf1;
    --muted: #9aa4b2;
    --border: #253141;

    --accent: #60a5fa;
    --accent-hover: #3b82f6;
    --accent-on: #0b0f14;

    --header-bg: #0f172a;
    --footer-bg: #0f172a;
    --sidebar-bg: #111827;
    --sidebar-on: #e5e7eb;

    --table-head-bg: #1d2430;
    --table-head-on: #e9edf1;
    --table-row: #141a24;
    --table-row-alt: #101621;

    --dropzone-bg: #141a24;
    --dropzone-border: #2a3748;
    --dropzone-hover: #1a2130;

    --hl-bg: #1a2f4a;
    --hl-on: #e9edf1;
    --hl-ring: #93c5fd;
  }
}

/* =========================================================
   1) Base / Reset
   ========================================================= */
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }

body{
  font-family: var(--font-sans);
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color-scheme: light dark;
  accent-color: var(--accent);
}

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

/* Scrollbar */
*{
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 10px; }
*::-webkit-scrollbar-track{ background: transparent; }

/* =========================================================
   2) Header / Footer
   ========================================================= */
header{
  background-color: var(--header-bg);
  color:#fff;
  text-align:center;
  padding: 0 1rem;
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--header-h);
  z-index: 1000;
  display: grid;
  align-items: center;
  box-shadow: var(--shadow-1);
}

header h1{ font-size: var(--fs-4); line-height: 1.2; }
header h3{ font-size: var(--fs-2); font-weight: 500; opacity: .9; }

.menu-toggle,
.theme-toggle{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  padding: .5rem .75rem;
  border-radius: var(--radius-s);
  font-size: var(--fs-2);
  cursor: pointer;
  z-index: 1000;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

.menu-toggle{
  left: 1rem;
  background: transparent;
  color: #fff;
}
.menu-toggle:hover{ opacity: .85; }

.theme-toggle{
  right: 1rem;
  background-color: rgba(255,255,255,.12);
  color:#fff;
}
.theme-toggle:hover{ background-color: rgba(255,255,255,.2); }

footer{
  background-color: var(--footer-bg);
  color:#fff;
  text-align:center;
  padding: .75rem 1rem;
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  height: var(--footer-h);
  z-index: 1000;
  display: grid;
  align-items: center;
  box-shadow: var(--shadow-1);
}

/* =========================================================
   3) Shell Layout
   ========================================================= */
.container{
  display:flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-block-start: var(--header-h);
  padding-block-end: var(--footer-h);
}

.main-content{
  display:flex;
  flex: 1 1 auto;
  overflow: hidden;
}

/* Sidebar */
.sidebar{
  background-color: var(--sidebar-bg);
  color: var(--sidebar-on);
  width: var(--sidebar-w);
  position: fixed;
  top: var(--header-h);
  bottom: var(--footer-h);
  left: 0;
  z-index: 999;
  padding: 10px;
  overflow-y: auto;
  transform: translateX(0);
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: var(--shadow-1);
}
.sidebar.collapsed{ transform: translateX(-100%); }

.sidebar .tablinks{
  display:block;
  width:100%;
  background: transparent;
  color: var(--sidebar-on);
  border: 1px solid transparent;
  padding: .6rem .75rem;
  text-align:left;
  cursor:pointer;
  margin-bottom: 6px;
  border-radius: var(--radius-s);
  font-size: var(--fs-2);
  transition: background-color .15s ease, border-color .15s ease;
}
.sidebar .tablinks:hover{ background-color: rgba(255,255,255,.08); }
.sidebar .tablinks.active{
  background-color: #e5e7eb;
  color:#111;
  border-color:#cfd3da;
}

/* Content */
.content{
  flex: 1 1 auto;
  background-color: var(--surface);
  color: var(--text);
  margin-left: var(--sidebar-w);
  padding: 20px;
  overflow-y: auto;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-2);
  transition: margin-left .25s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
  height: calc(100dvh - var(--header-h) - var(--footer-h));
}
.content.collapsed{ margin-left: 0; }

.tabcontent{ display:none; }
.tabcontent.is-active{ display:block; }

/* Iframes / game zones */
#Clicker,
#Maze,
#mazeContainer{
  position: relative;
  width:100%;
  height:100%;
  display:block;
}
.gameFrame,
#mazeIframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:none;
}

/* =========================================================
   4) Common Components
   ========================================================= */
/* Drop Zone */
#dropZone{
  border: 2px dashed var(--dropzone-border);
  padding: 20px;
  text-align:center;
  background-color: var(--dropzone-bg);
  margin-bottom: 20px;
  border-radius: var(--radius-m);
  transition: background-color .2s ease, border-color .2s ease;
  color: var(--muted);
}
#dropZone.dragover{ background-color: var(--dropzone-hover); }

/* Buttons */
.button,
.close-button,
.deleteButton{
  display:inline-block;
  border:none;
  border-radius: var(--radius-s);
  padding: .6rem 1rem;
  font-size: var(--fs-2);
  cursor:pointer;
  transition: background-color .15s ease, transform .05s ease;
  user-select:none;
}

.button{
  background-color: var(--accent);
  color: var(--accent-on);
}
.button:hover{ background-color: var(--accent-hover); }
.button:active{ transform: translateY(1px); }

.close-button{
  width:100%;
  background-color: var(--header-bg);
  color:#fff;
}
.close-button:hover{ background-color: #2b3a53; }

.deleteButton{
  background-color: var(--danger);
  color: var(--danger-on);
  width: 28px;
  height: 28px;
  cursor:pointer;
  margin-left: 10px;
}
.deleteButton:hover{ background-color: var(--danger-hover); }

/* Forms */
.FormGroup{
  margin-bottom: 12px;
  display:flex;
  align-items:center;
  gap: 10px;
}
.FormGroup label{
  min-width: 60px;
  color: var(--muted);
  font-size: var(--fs-1);
}
.FormGroup input{
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background-color: var(--surface-2);
  color: var(--text);
}

#skills .FormGroup{
  margin-bottom: 6px;
  color: var(--sidebar-on);
}

.skillValue{ width:110px; }

.skills-group{ display:flex; flex-direction: column; gap:6px; }
.skills-group .FormGroup{ margin-bottom: 0; }
.skills-group label{ width:auto; margin-right: 10px; }

.skillSet,
.damageSet{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
  width:100%;
}
.skillSet input,
.damageSet input{
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background-color: var(--surface-2);
  color: var(--text);
}

/* History / Results containers */
#historyContainer,
#detailedResultsContainer{
  margin-top: 20px;
  border: 1px solid var(--border);
  padding: 10px;
  background-color: var(--surface);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
}
#historyContainer{
  max-height: 300px;
  overflow-y:auto;
}

.history-item{
  border: 1px solid var(--border);
  padding: 10px;
  margin-bottom: 10px;
  border-radius: var(--radius-m);
  background-color: var(--surface);
  box-shadow: var(--shadow-1);
}
.history-item h4{ margin-bottom: 6px; color: var(--text); }

/* Collapsible character panels */
.character-container{
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  overflow:hidden;
  background: var(--surface);
}
.character-header{
  background-color: var(--surface-2);
  padding: 10px;
  cursor:pointer;
  font-weight: 700;
  color: var(--text);
}
.character-content{
  padding: 10px;
  background-color: var(--surface);
  border-top: 1px solid var(--border);
}

/* Table */
table{
  width:100%;
  border-collapse: collapse;
  margin-top: 14px;
  background-color: var(--surface);
  border-radius: var(--radius-m);
  overflow:hidden;
  box-shadow: var(--shadow-1);
}
th,td{
  border: 1px solid var(--border);
  padding: 10px;
}
th{
  background-color: var(--table-head-bg);
  color: var(--table-head-on);
  text-align:left;
  font-weight: 700;
}
td{
  background-color: var(--table-row);
  color: var(--text);
  text-align:center;
}
tr:nth-child(even) td{ background-color: var(--table-row-alt); }

/* Highlight cells */
td.highlight{
  position: relative;
  background-color: var(--hl-bg) !important;
  color: var(--hl-on);
  font-weight: 700;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 2px var(--hl-ring),
    0 1px 0 rgba(0,0,0,.06);
  transition: filter .15s ease, box-shadow .15s ease, background-color .15s ease;
}
tr:nth-child(even) td.highlight{ background-color: var(--hl-bg) !important; }
.history-item td.highlight,
.character-content td.highlight{ background-color: var(--hl-bg) !important; }

td.highlight:hover{ filter: brightness(1.04); }

@media (forced-colors: active){
  td.highlight{
    outline: 2px solid Highlight;
    outline-offset: -2px;
    box-shadow:none;
  }
}
@media (prefers-contrast: more){
  td.highlight{ box-shadow: inset 0 0 0 3px var(--hl-ring); }
}

.history-item table{ margin-top: 10px; box-shadow:none; }
.history-item th{ background-color: var(--table-head-bg); }
.history-item tr:nth-child(even) td{ background-color: var(--table-row-alt); }

/* =========================================================
   5) Responsive / Motion
   ========================================================= */
@media (max-width: 768px){
  .sidebar{
    position: fixed;
    transform: translateX(-100%);
    box-shadow: var(--shadow-2);
  }
  .sidebar.collapsed{ transform: translateX(0); }
  .content{
    margin-left: 0;
    padding: 14px;
    border-radius: 0;
    height: calc(100dvh - var(--header-h) - var(--footer-h));
  }
}

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

/* =========================================================
   6) DataViewer 視認性UP
   ========================================================= */
.dv-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
  margin: 10px 0 12px;
}
.dv-toolbar input[type="search"]{
  flex: 1 1 320px;
  min-width: 240px;
  height: var(--control-h);
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  color: var(--text);
}
.dv-toolbar select{
  height: var(--control-h);
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  color: var(--text);
}

/* Growth：技能チップ */
.dv-chiplist{
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
}
.dv-chip{
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-1);
  line-height: 1.8;
  white-space: nowrap;
}

/* TFNum：中身だけスクロール */
.character-content{
  max-height: 62vh;
  overflow:auto;
}

/* DataViewer専用 table tuning */
table.data-table td.skill{ text-align:left; }
table.data-table td.num,
table.data-table td.rate{
  text-align:right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.data-table tr:hover td{ filter: brightness(1.06); }
table.data-table th{
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Toast */
.dv-toast-root{
  position: fixed;
  top: calc(var(--header-h) + 10px);
  right: 12px;
  display:grid;
  gap: 8px;
  z-index: 2000;
  pointer-events:none;
}
.dv-toast{
  pointer-events:none;
  padding: 10px 12px;
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translateY(-6px);
  animation: dvToastIn .18s ease forwards;
  max-width: min(380px, calc(100vw - 24px));
}
.dv-toast.is-leaving{ animation: dvToastOut .25s ease forwards; }
@keyframes dvToastIn{ to{ opacity:1; transform: translateY(0); } }
@keyframes dvToastOut{ to{ opacity:0; transform: translateY(-6px); } }

.dv-growth-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.dv-growth-hint{
  font-size: var(--fs-1);
  color: var(--muted);
  opacity: .9;
  white-space: nowrap;
}
.dv-growth-header:hover .dv-growth-hint{ opacity: 1; }

/* =========================================================
   7) Tarot
   ========================================================= */
#Tarot{
  --tarot-gold: #c9b879;
  --tarot-gold-bright: #eadca9;
  --tarot-gold-dim: rgba(201,184,121,.34);
  --tarot-ink: #ebe7dc;
  --tarot-muted: #aaa69b;
  --tarot-night: #0b1018;
  --tarot-night-2: #101722;
  --tarot-cloth: #101923;
  --tarot-card-w: clamp(124px, 8vw, 148px);
}

#Tarot .tarot-app{
  display:grid;
  gap:16px;
  max-width:1500px;
  margin:0 auto;
  font-family:var(--font-sans);
}

#Tarot .tarot-hero,
#Tarot .tarot-console,
#Tarot .tarot-table,
#Tarot .tarot-reading-section,
#Tarot .tarot-history{
  border:1px solid color-mix(in srgb, var(--tarot-gold) 25%, #283446);
  background:
    linear-gradient(135deg, rgba(201,184,121,.045), transparent 34%),
    var(--tarot-night-2);
  color:var(--tarot-ink);
  border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.15);
}

#Tarot .tarot-hero{
  min-height:126px;
  padding:22px 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  position:relative;
  overflow:hidden;
}
#Tarot .tarot-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 24%, rgba(234,220,169,.12) 0 1px, transparent 1.8px),
    radial-gradient(circle at 34% 72%, rgba(234,220,169,.08) 0 1px, transparent 1.8px),
    radial-gradient(circle at 74% 20%, rgba(234,220,169,.1) 0 1px, transparent 1.8px),
    radial-gradient(circle at 88% 76%, rgba(234,220,169,.08) 0 1px, transparent 1.8px);
  background-size:180px 130px, 240px 170px, 210px 150px, 260px 190px;
  opacity:.8;
}
#Tarot .tarot-hero-copy{ position:relative; z-index:1; }
#Tarot .tarot-eyebrow,
#Tarot .tarot-section-kicker{
  color:var(--tarot-gold);
  font-family:Georgia, "Times New Roman", "Noto Serif JP", serif;
  font-size:.72rem;
  letter-spacing:.22em;
  line-height:1.2;
}
#Tarot .tarot-eyebrow span{ font-size:.58rem; margin:0 .35rem; }
#Tarot .tarot-hero h2{
  margin:8px 0 2px;
  font-family:Georgia, "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size:clamp(1.55rem, 2.1vw, 2rem);
  font-weight:600;
  letter-spacing:.08em;
}
#Tarot .tarot-hero p{ color:var(--tarot-muted); font-size:.92rem; }
#Tarot .tarot-hero-sigil{
  width:92px;
  aspect-ratio:1;
  flex:0 0 auto;
  border:1px solid var(--tarot-gold-dim);
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative;
  color:var(--tarot-gold-bright);
  box-shadow:inset 0 0 0 8px rgba(201,184,121,.025);
}
#Tarot .tarot-hero-sigil::before,
#Tarot .tarot-hero-sigil::after{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(201,184,121,.2);
  transform:rotate(45deg);
}
#Tarot .tarot-hero-sigil::after{ inset:22px; transform:rotate(0deg); border-radius:50%; }
#Tarot .tarot-sigil-moon{ font:2.8rem/1 Georgia,serif; transform:translateX(-2px); }
#Tarot .tarot-sigil-star{ position:absolute; top:18px; right:18px; font-size:.62rem; }

#Tarot .tarot-console{
  padding:16px;
  display:grid;
  grid-template-columns:minmax(220px,.8fr) minmax(300px,1.7fr) minmax(190px,.7fr);
  gap:14px;
  align-items:end;
}
#Tarot .tarot-field{ display:grid; gap:6px; min-width:0; }
#Tarot .tarot-field label,
#Tarot .tarot-history-head label{
  color:var(--tarot-muted);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
}
#Tarot .tarot-field label span{ font-weight:400; opacity:.72; }
#Tarot .tarot-field select,
#Tarot .tarot-field input,
#Tarot .tarot-history-head input,
#Tarot .tarot-history-note{
  width:100%;
  height:42px;
  border:1px solid #334052;
  border-radius:7px;
  padding:0 11px;
  background:#0c121b;
  color:var(--tarot-ink);
  font:inherit;
  color-scheme:dark;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#Tarot .tarot-field input::placeholder,
#Tarot .tarot-history-head input::placeholder{ color:#747b86; }
#Tarot .tarot-field select:focus,
#Tarot .tarot-field input:focus,
#Tarot .tarot-history-head input:focus,
#Tarot .tarot-history-note:focus{
  outline:none;
  border-color:var(--tarot-gold);
  box-shadow:0 0 0 3px rgba(201,184,121,.12);
  background:#0e1520;
}

#Tarot .tarot-reverse-toggle{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  border:1px solid #334052;
  border-radius:7px;
  background:#0c121b;
  cursor:pointer;
  user-select:none;
}
#Tarot .tarot-reverse-toggle input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
#Tarot .tarot-toggle-track{
  width:34px;
  height:18px;
  border:1px solid #4a5667;
  border-radius:99px;
  padding:2px;
  flex:0 0 auto;
  background:#1a2230;
  transition:.18s ease;
}
#Tarot .tarot-toggle-track span{
  display:block;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#737c89;
  transition:.18s ease;
}
#Tarot .tarot-reverse-toggle input:checked + .tarot-toggle-track{
  border-color:var(--tarot-gold);
  background:rgba(201,184,121,.16);
}
#Tarot .tarot-reverse-toggle input:checked + .tarot-toggle-track span{
  transform:translateX(16px);
  background:var(--tarot-gold-bright);
}
#Tarot .tarot-reverse-toggle input:focus-visible + .tarot-toggle-track{
  outline:2px solid var(--tarot-gold);
  outline-offset:3px;
}
#Tarot .tarot-toggle-copy{ display:grid; line-height:1.15; }
#Tarot .tarot-toggle-copy strong{ font-size:.82rem; font-weight:650; }
#Tarot .tarot-toggle-copy small{ margin-top:3px; color:var(--tarot-muted); font-size:.68rem; }

#Tarot .tarot-actions{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:2px;
}
#Tarot .tarot-actions .button{
  min-height:38px;
  border:1px solid transparent;
  border-radius:7px;
  padding:.52rem .9rem;
  font-size:.86rem;
  font-weight:650;
  box-shadow:none;
}
#Tarot .tarot-actions .button:disabled{ opacity:.38; cursor:not-allowed; filter:none; }
#Tarot .tarot-primary{
  background:var(--tarot-gold);
  color:#17140d;
  border-color:var(--tarot-gold-bright) !important;
}
#Tarot .tarot-primary:hover{ background:var(--tarot-gold-bright); }
#Tarot .tarot-primary span{ margin-right:.3rem; }
#Tarot .tarot-secondary{
  background:#182130;
  color:var(--tarot-ink);
  border-color:#364355 !important;
}
#Tarot .tarot-secondary:hover{ background:#202b3b; border-color:#526076 !important; }
#Tarot .tarot-quiet-danger{
  margin-left:auto;
  background:transparent;
  color:#c99898;
  border-color:rgba(201,119,119,.35) !important;
}
#Tarot .tarot-quiet-danger:hover{ background:rgba(154,62,62,.14); color:#e1adad; }

#Tarot .tarot-table,
#Tarot .tarot-reading-section{ overflow:hidden; }
#Tarot .tarot-section-head{
  min-height:68px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-bottom:1px solid rgba(201,184,121,.18);
}
#Tarot .tarot-section-head h3{
  margin:3px 0 0;
  color:var(--tarot-ink);
  font-family:Georgia, "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:.05em;
}
#Tarot .tarot-section-head > p{
  max-width:540px;
  color:var(--tarot-muted);
  font-size:.78rem;
  text-align:right;
}
#Tarot .tarot-status{
  max-width:540px;
  color:var(--tarot-muted);
  font-size:.78rem;
  text-align:right;
}
#Tarot .tarot-status strong{ color:var(--tarot-gold-bright); font-weight:650; }

#Tarot .tarot-cloth{
  min-height:350px;
  padding:30px 22px 34px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(201,184,121,.07), transparent 33%),
    radial-gradient(circle at 15% 18%, rgba(234,220,169,.12) 0 1px, transparent 1.6px),
    radial-gradient(circle at 82% 24%, rgba(234,220,169,.1) 0 1px, transparent 1.6px),
    radial-gradient(circle at 74% 76%, rgba(234,220,169,.08) 0 1px, transparent 1.6px),
    linear-gradient(160deg, #111c28 0%, var(--tarot-cloth) 46%, #0d151f 100%);
  background-size:auto, 190px 160px, 230px 190px, 270px 210px, auto;
}
#Tarot .tarot-cloth::before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(201,184,121,.18);
  border-radius:8px;
  pointer-events:none;
}
#Tarot .tarot-cloth::after{
  content:"✦          ☾          ✦";
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  color:rgba(201,184,121,.4);
  font: .62rem/1 Georgia,serif;
  letter-spacing:.25em;
  white-space:pre;
}
#Tarot .tarot-cloth-ring{
  position:absolute;
  width:min(430px, 60vw);
  aspect-ratio:1;
  left:50%;
  top:51%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(201,184,121,.09);
  border-radius:50%;
  pointer-events:none;
}
#Tarot .tarot-cloth-ring::before,
#Tarot .tarot-cloth-ring::after{
  content:"";
  position:absolute;
  inset:12%;
  border:1px solid rgba(201,184,121,.07);
  transform:rotate(45deg);
}
#Tarot .tarot-cloth-ring::after{ inset:28%; border-radius:50%; transform:none; }
#Tarot .tarot-cloth-axis{
  position:absolute;
  width:min(760px, 75vw);
  height:1px;
  left:50%; top:51%;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg, transparent, rgba(201,184,121,.08), transparent);
  pointer-events:none;
}
#Tarot .tarot-cloth-axis::after{
  content:"";
  position:absolute;
  width:1px;
  height:280px;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:linear-gradient(transparent, rgba(201,184,121,.07), transparent);
}

#Tarot .tarot-board{
  position:relative;
  z-index:1;
  min-height:285px;
  display:grid;
  gap:clamp(14px, 2vw, 28px);
  justify-content:center;
  justify-items:center;
  align-items:center;
  max-width:1160px;
  margin:0 auto;
}
#Tarot .tarot-board:empty::before{
  content:"カードはまだ伏せられていません";
  align-self:center;
  color:#7f8791;
  font-family:Georgia, "Yu Mincho", "Noto Serif JP", serif;
  font-size:.92rem;
  letter-spacing:.08em;
}
#Tarot .tarot-board[data-spread="one"]{ grid-template-columns:minmax(180px, 240px) !important; }
#Tarot .tarot-board[data-spread="three"],
#Tarot .tarot-board[data-spread="death3"]{ grid-template-columns:repeat(3, minmax(150px, 220px)) !important; }
#Tarot .tarot-board[data-spread="five"],
#Tarot .tarot-board[data-spread="death5"]{ grid-template-columns:repeat(5, minmax(132px, 190px)) !important; }
#Tarot .tarot-board[data-spread="death3"] .tarot-card,
#Tarot .tarot-board[data-spread="death5"] .tarot-card{filter:drop-shadow(0 0 13px rgba(143,43,50,.12))}
#Tarot .tarot-board[data-spread="death3"] .tarot-slot h4,
#Tarot .tarot-board[data-spread="death5"] .tarot-slot h4{color:#caa0a0}

#Tarot .tarot-slot{
  width:100%;
  min-width:0;
  display:grid;
  justify-items:center;
  align-content:center;
  gap:10px;
  padding:4px;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  animation:tarotDeal .42s both;
  animation-delay:calc(var(--deal-index, 0) * 70ms);
}
#Tarot .tarot-slot h4{
  order:2;
  margin:0;
  display:flex;
  align-items:center;
  gap:7px;
  color:#bbb6aa;
  font-family:Georgia, "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.08em;
  text-align:center;
}
#Tarot .tarot-slot h4::before,
#Tarot .tarot-slot h4::after{
  content:"";
  width:14px;
  height:1px;
  background:rgba(201,184,121,.32);
}
#Tarot .tarot-slot-index{
  color:var(--tarot-gold);
  font-size:.66rem;
  letter-spacing:.02em;
}

#Tarot .tarot-card{
  order:1;
  width:var(--tarot-card-w);
  aspect-ratio:5 / 8;
  perspective:1100px;
  border-radius:10px;
  position:relative;
  cursor:pointer;
  filter:drop-shadow(0 14px 12px rgba(0,0,0,.28));
  transition:transform .18s ease, filter .18s ease;
}
#Tarot .tarot-card:hover{
  transform:translateY(-4px);
  filter:drop-shadow(0 18px 15px rgba(0,0,0,.38)) drop-shadow(0 0 12px rgba(201,184,121,.12));
}
#Tarot .tarot-card:active{ transform:translateY(-1px) scale(.995); }
#Tarot .tarot-card-inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .68s cubic-bezier(.2,.72,.2,1);
  border-radius:10px;
}
#Tarot .tarot-card.is-flipped .tarot-card-inner{ transform:rotateY(180deg); }
#Tarot .tarot-face{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  backface-visibility:hidden;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(234,220,169,.52);
  background:#111723;
  box-shadow:inset 0 0 0 2px rgba(12,16,23,.86), inset 0 0 0 3px rgba(201,184,121,.18);
}
#Tarot .tarot-face.front{ transform:rotateY(180deg); }
#Tarot .tarot-face::after{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(201,184,121,.16);
  border-radius:6px;
  pointer-events:none;
}
#Tarot .tarot-card svg{ width:100%; height:100%; display:block; }
#Tarot .tarot-pill{
  position:absolute;
  z-index:4;
  top:7px;
  left:50%;
  transform:translateX(-50%);
  min-width:54px;
  padding:3px 8px;
  border:1px solid rgba(234,220,169,.44);
  border-radius:999px;
  background:rgba(9,13,19,.88);
  color:var(--tarot-gold-bright);
  font-size:.65rem;
  line-height:1.3;
  letter-spacing:.08em;
  text-align:center;
  white-space:nowrap;
  display:none;
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}
#Tarot .tarot-card.is-reversed .tarot-pill{ color:#d6b2a4; border-color:rgba(214,178,164,.45); }
#Tarot .tarot-card.is-flipped{ animation:tarotRevealGlow .7s ease both; }
#Tarot .tarot-card:focus-visible{
  outline:2px solid var(--tarot-gold-bright);
  outline-offset:5px;
}

#Tarot .tarot-reading{
  padding:14px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  background:#0e151f;
}
#Tarot .reading-block{
  min-width:0;
  margin:0;
  padding:14px 15px;
  border:1px solid #293547;
  border-radius:8px;
  background:linear-gradient(145deg, rgba(201,184,121,.025), transparent 46%), #121a25;
  color:var(--tarot-ink);
  box-shadow:none;
}
#Tarot .reading-block h4{
  margin:0 0 7px;
  color:var(--tarot-ink);
  font-family:Georgia, "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size:.96rem;
  font-weight:600;
  letter-spacing:.025em;
}
#Tarot .reading-block .meta{
  margin:0 0 7px;
  color:var(--tarot-muted);
  font-size:.74rem;
}
#Tarot .reading-block p{ margin:5px 0 0; font-size:.84rem; line-height:1.75; }
#Tarot .reading-block strong{ color:var(--tarot-gold-bright); font-weight:600; }
#Tarot .reading-position{ position:relative; padding-top:38px; }
#Tarot .reading-position::before{
  content:attr(data-position);
  position:absolute;
  top:12px; left:14px;
  color:var(--tarot-gold);
  font-family:Georgia, "Times New Roman", serif;
  font-size:.63rem;
  letter-spacing:.18em;
}
#Tarot .reading-question,
#Tarot .reading-overall,
#Tarot .reading-empty{ grid-column:1 / -1; }
#Tarot .reading-question{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:baseline;
  border-color:rgba(201,184,121,.3);
}
#Tarot .reading-question .meta{ margin:0; color:var(--tarot-gold); }
#Tarot .reading-overall{
  border-color:rgba(201,184,121,.36);
  background:linear-gradient(105deg, rgba(201,184,121,.08), transparent 48%), #141d29;
}
#Tarot .reading-empty{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--tarot-muted);
  text-align:center;
}
#Tarot .tarot-keywords{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:8px;
}
#Tarot .tarot-keyword{
  display:inline-flex;
  padding:2px 7px;
  border:1px solid rgba(201,184,121,.2);
  border-radius:999px;
  color:#c7c1b4;
  background:rgba(201,184,121,.035);
  font-size:.69rem;
}
#Tarot .tarot-message{ color:#d6d2c8; }

#Tarot .tarot-history{
  overflow:hidden;
}
#Tarot .tarot-history > summary{
  min-height:66px;
  padding:13px 17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
#Tarot .tarot-history > summary::-webkit-details-marker{ display:none; }
#Tarot .tarot-history > summary::after{
  content:"＋";
  color:var(--tarot-gold);
  font-size:1.1rem;
  line-height:1;
}
#Tarot .tarot-history[open] > summary::after{ content:"－"; }
#Tarot .tarot-history-summary-copy{ display:grid; }
#Tarot .tarot-history-summary-copy strong{
  color:var(--tarot-ink);
  font-family:Georgia, "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size:.98rem;
  font-weight:600;
}
#Tarot .tarot-history-summary-copy small{ color:var(--tarot-muted); font-size:.7rem; }
#Tarot .tarot-history-count{
  margin-left:auto;
  padding:2px 8px;
  border:1px solid rgba(201,184,121,.22);
  border-radius:999px;
  color:var(--tarot-muted);
  font-size:.7rem;
}
#Tarot .tarot-history-body{
  padding:14px;
  border-top:1px solid rgba(201,184,121,.18);
  background:#0e151f;
}
#Tarot .tarot-history-head{
  display:grid;
  grid-template-columns:auto minmax(220px, 360px);
  align-items:center;
  justify-content:end;
  gap:10px;
  margin-bottom:10px;
}
#Tarot .tarot-history-head input{ height:38px; }
#Tarot .tarot-history-item{
  display:grid;
  grid-template-columns:minmax(200px,.8fr) minmax(280px,1.5fr) auto;
  gap:10px 14px;
  align-items:center;
  margin-bottom:8px;
}
#Tarot .tarot-history-title h4{ margin:0; }
#Tarot .tarot-history-item > .meta{ min-width:0; }
#Tarot .tarot-history-note{ grid-column:1 / 3; height:38px; }
#Tarot .tarot-history-actions{
  grid-column:3;
  grid-row:1 / span 2;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
#Tarot .tarot-history-actions .button{
  padding:.42rem .7rem;
  border:1px solid #354256;
  background:#182130;
  color:var(--tarot-ink);
  font-size:.75rem;
}
#Tarot .tarot-history-actions .button:hover{ background:#202b3b; }
#Tarot .tarot-history-actions .button.is-danger{
  border-color:rgba(201,119,119,.35);
  background:transparent;
  color:#c99898;
}

@keyframes tarotDeal{
  from{ opacity:0; transform:translateY(12px) scale(.975); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes tarotRevealGlow{
  0%,100%{ filter:drop-shadow(0 14px 12px rgba(0,0,0,.28)); }
  55%{ filter:drop-shadow(0 17px 14px rgba(0,0,0,.32)) drop-shadow(0 0 15px rgba(201,184,121,.26)); }
}

@media (max-width:1080px){
  #Tarot .tarot-console{ grid-template-columns:minmax(210px,.8fr) minmax(280px,1.4fr); }
  #Tarot .tarot-reverse-toggle{ grid-column:1 / -1; max-width:240px; }
  #Tarot .tarot-board[data-spread="five"],
  #Tarot .tarot-board[data-spread="death5"]{ grid-template-columns:repeat(3, minmax(132px, 190px)) !important; }
  #Tarot .tarot-reading{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  #Tarot .reading-question,
  #Tarot .reading-overall,
  #Tarot .reading-empty{ grid-column:1 / -1; }
}

@media (max-width:720px){
  #Tarot{ --tarot-card-w:126px; }
  #Tarot .tarot-hero{ min-height:0; padding:18px; }
  #Tarot .tarot-hero-sigil{ width:70px; }
  #Tarot .tarot-sigil-moon{ font-size:2.15rem; }
  #Tarot .tarot-console{ grid-template-columns:1fr; }
  #Tarot .tarot-reverse-toggle{ grid-column:auto; max-width:none; }
  #Tarot .tarot-actions{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
  #Tarot .tarot-actions .button{ width:100%; }
  #Tarot .tarot-quiet-danger{ margin-left:0; }
  #Tarot .tarot-section-head{ align-items:flex-start; flex-direction:column; gap:5px; }
  #Tarot .tarot-section-head > p,
  #Tarot .tarot-status{ max-width:none; text-align:left; }
  #Tarot .tarot-cloth{ padding-inline:12px; }
  #Tarot .tarot-board,
  #Tarot .tarot-board[data-spread]{
    display:flex;
    flex-wrap:wrap;
    align-content:center;
    justify-content:center;
  }
  #Tarot .tarot-slot{ flex:0 1 145px; }
  #Tarot .tarot-reading{ grid-template-columns:1fr; }
  #Tarot .reading-question,
  #Tarot .reading-overall,
  #Tarot .reading-empty{ grid-column:auto; }
  #Tarot .reading-question{ grid-template-columns:1fr; gap:2px; }
  #Tarot .tarot-history-head{ grid-template-columns:1fr; }
  #Tarot .tarot-history-item{ grid-template-columns:1fr; }
  #Tarot .tarot-history-note,
  #Tarot .tarot-history-actions{ grid-column:auto; grid-row:auto; }
  #Tarot .tarot-history-actions{ justify-content:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  #Tarot .tarot-slot,
  #Tarot .tarot-card.is-flipped{ animation:none; }
  #Tarot .tarot-card,
  #Tarot .tarot-card-inner{ transition:none; }
}

/* =========================================================
   8-b) CharCreater Redesign (compact grid — one‐screen)
   ========================================================= */

#CharCreater .cc-panel-top{ padding: 12px 16px; }

#CharCreater .cc-title{
  font-size: var(--fs-3);
  font-weight: 800;
  margin-bottom: 8px;
}

/* --- Mode row (single line) --- */
#CharCreater .cc-mode-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 6px;
}

#CharCreater .cc-mode-fieldset{
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 2px 8px 4px;
  display: flex;
  gap: 2px;
  margin: 0;
}
#CharCreater .cc-legend{
  font-size: .7rem;
  color: var(--muted);
  padding: 0 4px;
  font-weight: 600;
}
#CharCreater .cc-mode-option{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--radius-s);
  cursor: pointer;
  font-size: .8rem;
  user-select: none;
  transition: background-color .12s ease;
}
#CharCreater .cc-mode-option:hover{ background: rgba(255,255,255,.06); }
#CharCreater .cc-mode-option:has(input:checked){
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* --- Stage --- */
#CharCreater .cc-stage-wrap{ display: flex; align-items: center; gap: 6px; }
#CharCreater .cc-stage-label{
  font-size: .8rem; color: var(--muted); font-weight: 600; white-space: nowrap;
}
#CharCreater .cc-stage-select{
  height: 32px; min-width: 120px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--surface-2); color: var(--text); font-size: .8rem;
}

/* --- Reroll badge --- */
#CharCreater .cc-reroll-badge{
  margin-left: auto;
  padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--muted); font-size: .75rem; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* --- Action buttons --- */
#CharCreater .cc-actions-row{
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px;
}
#CharCreater .cc-actions-row .button{
  padding: .4rem .8rem; font-size: .85rem;
}
#CharCreater .cc-btn-primary{ background: var(--accent); color: var(--accent-on); }
#CharCreater .cc-btn-primary:hover{ background: var(--accent-hover); }

#CharCreater .cc-btn-secondary{
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
}
#CharCreater .cc-btn-secondary:hover{ border-color: var(--accent); }
#CharCreater .cc-btn-secondary.cc-swap-active{
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
  border-color: var(--accent); color: var(--accent); font-weight: 700;
}

#CharCreater .cc-btn-confirm{ background: #059669; color: #fff; }
#CharCreater .cc-btn-confirm:hover{ background: #047857; }
#CharCreater .cc-btn-danger{ background: var(--danger); color: var(--danger-on); }
#CharCreater .cc-btn-danger:hover{ background: var(--danger-hover); }

/* --- Notes --- */
#CharCreater .cc-notes{
  display: flex; flex-wrap: wrap; gap: 2px 14px;
  font-size: .7rem; color: var(--muted); line-height: 1.4;
}
#CharCreater .cc-notes span::before{
  content: "●"; margin-right: 3px; opacity: .4;
}

/* =========================================================
   Stat grid — 5列固定で 5+3 = 全8枠を一画面に
   ========================================================= */
#CharCreater .cc-stat-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 8px;
}

/* --- Stat card: compact --- */
#CharCreater .cc-stat-card{
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  padding: 8px 10px 8px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
  overflow: hidden;
  min-width: 0;
}

/* Group color stripe */
#CharCreater .cc-stat-card::before{
  content: "";
  position: absolute; top: 0; left: 0;
  width: 4px; height: 100%;
  border-radius: var(--radius-s) 0 0 var(--radius-s);
}
#CharCreater .cc-stat-card.cc-group-a::before{ background: var(--accent); }
#CharCreater .cc-stat-card.cc-group-b::before{ background: #f59e0b; }

#CharCreater .cc-stat-card:hover{
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

/* Slotting glow */
#CharCreater .cc-stat-card.slotting{
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 10px color-mix(in srgb, var(--accent) 20%, transparent);
  animation: cc-pulse .9s ease infinite alternate;
}
@keyframes cc-pulse{
  from{ box-shadow: 0 0 0 1px var(--accent), 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent); }
  to  { box-shadow: 0 0 0 1px var(--accent), 0 0 14px color-mix(in srgb, var(--accent) 30%, transparent); }
}

/* Swap */
#CharCreater.swap-mode-on .cc-stat-card{ cursor: pointer; }
#CharCreater .cc-stat-card.swap-picked{
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* --- stat-head: name + value --- */
#CharCreater .cc-stat-card .stat-head{
  display: flex; align-items: center;
  justify-content: space-between; gap: 4px; margin-bottom: 2px;
}
#CharCreater .cc-stat-id{
  display: flex; align-items: baseline; gap: 4px; min-width: 0;
}
#CharCreater .cc-stat-card .stat-name{
  font-size: .95rem; font-weight: 800; letter-spacing: .5px;
}
#CharCreater .cc-stat-card .stat-dice-label{
  font-size: .6rem; color: var(--muted);
}
#CharCreater .cc-stat-input{
  width: 48px; padding: 2px 4px;
  border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--surface); color: var(--text);
  text-align: right; font-weight: 800; font-size: .95rem;
  font-variant-numeric: tabular-nums;
}

/* --- Dice visual: tiny --- */
#CharCreater .cc-dice-visual{
  display: flex; align-items: center; gap: 3px;
  min-height: 22px; margin-bottom: 2px;
}
#CharCreater .cc-dice-visual .die{
  width: 20px; height: 20px; font-size: .7rem;
}
#CharCreater .cc-dice-visual .plus-badge{
  font-size: .6rem; padding: 1px 3px;
}

/* --- Footer: button + breakdown --- */
#CharCreater .cc-stat-footer{
  display: flex; align-items: center; gap: 4px; flex-wrap: nowrap;
}
#CharCreater .cc-btn-roll{
  font-size: .85rem; padding: .6rem .5rem; white-space: nowrap; flex-shrink: 0;
}
#CharCreater .cc-breakdown{
  font-size: .9rem; color: var(--muted); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}

/* --- Totals --- */
#CharCreater .cc-totals{
  margin: 8px 0; padding: 6px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-s);
  font-weight: 700; font-size: .9rem;
  font-variant-numeric: tabular-nums; color: var(--text); text-align: center;
}

/* --- いあきゃら --- */
#CharCreater .cc-ia-panel{
  display: flex; justify-content: center; padding: 8px;
}
#CharCreater .cc-btn-ia{
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; padding: .4rem 1.4rem; font-size: .85rem;
  font-weight: 700; border-radius: var(--radius-m);
  transition: opacity .15s ease;
}
#CharCreater .cc-btn-ia:hover:not(:disabled){ opacity: .9; }
#CharCreater .cc-btn-ia:disabled{
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--border); cursor: not-allowed;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px){
  #CharCreater .cc-stat-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px){
  #CharCreater .cc-stat-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px){
  #CharCreater .cc-stat-grid{ grid-template-columns: repeat(2, 1fr); }
  #CharCreater .cc-mode-row{ flex-direction: column; align-items: stretch; }
  #CharCreater .cc-mode-fieldset{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:2px;
  }
  #CharCreater .cc-mode-option{
    justify-content:center;
    padding:4px 3px;
    font-size:.72rem;
    white-space:nowrap;
  }
  #CharCreater .cc-reroll-badge{ margin-left: 0; text-align: center; }
}

/* =========================================================
   9) NPCCreater (Layout + UI polish, preserve behavior)
   ========================================================= */
#NPCCreater{
  max-width: 1100px;
  margin: 0 auto;
  overflow-x: clip;

  /* ability grid tuning */
  --ab-lb: 44px;
  --ab-in: clamp(68px, 9vw, 96px);
}

#NPCCreater form{
  display:grid;
  gap: 14px;
}

/* FormGroup: narrow friendly */
#NPCCreater .FormGroup{
  flex-wrap: wrap;
  align-items:center;
  gap: 8px 10px;
}
#NPCCreater .FormGroup label{
  min-width: unset;
  white-space: nowrap;
}

/* shrink-friendly controls */
#NPCCreater input,
#NPCCreater select,
#NPCCreater button{
  min-width: 0;
  max-width: 100%;
}

#NPCCreater input[type="text"]{
  flex: 1 1 260px;
  min-width: 180px;
}
#NPCCreater input[type="number"]{
  width: 92px;
}

/* ---------- Job controls: pair layout (final) ---------- */
#NPCCreater #jobControls{
  display: grid;
  grid-template-columns: max-content minmax(240px, 1fr) max-content minmax(240px, 1fr);
  grid-template-areas:
    "catL catS jobL jobS"
    "btn1 btn1 btn2 btn2";
  gap: 10px 12px;
  align-items: center;
  justify-content: start;
}
#NPCCreater #jobControls select{
  width: 100%;
  min-width: 0;
  height: var(--control-h);
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  color: var(--text);
}

#NPCCreater #jobControls label[for="jobCategory"],
#NPCCreater #jobControls .cat-label{ grid-area: catL; }
#NPCCreater #jobControls #jobCategory{ grid-area: catS; }

#NPCCreater #jobControls label[for="jobSelect"],
#NPCCreater #jobControls .job-label{ grid-area: jobL; }
#NPCCreater #jobControls #jobSelect{ grid-area: jobS; }

#NPCCreater #jobControls .button:nth-of-type(1){ grid-area: btn1; }
#NPCCreater #jobControls .button:nth-of-type(2){ grid-area: btn2; }
#NPCCreater #jobControls .button{
  height: var(--control-h);
  width: 100%;
  white-space: nowrap;
}

/* narrow: stack */
@media (max-width: 980px){
  #NPCCreater #jobControls{
    grid-template-columns: 1fr;
    grid-template-areas:
      "catL"
      "catS"
      "jobL"
      "jobS"
      "btn1"
      "btn2";
  }
}

/* Panels */
#NPCCreater #choosePanel,
#NPCCreater #emphasisPanel{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 10px;
  margin: 8px 0;
}
#NPCCreater #choosePanel .hint{
  color: var(--muted);
  font-size: var(--fs-1);
}
#NPCCreater .emphasis-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px 12px;
}
#NPCCreater #jobSkillsContainer .skillName[readonly]{
  opacity: .9;
  background: var(--surface-2);
}

/* ---------- Checkbox: no mismatch (final) ---------- */
#NPCCreater label:has(> input[type="checkbox"]){
  position: relative;
  display: inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 12px 6px 38px;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor:pointer;
  user-select:none;
  line-height: 1;
}

#NPCCreater label:has(> input[type="checkbox"]) > input[type="checkbox"]{
  position:absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  opacity: 0;
  margin: 0;
}

#NPCCreater label:has(> input[type="checkbox"])::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
}

#NPCCreater label:has(> input[type="checkbox"])::after{
  content:"";
  position:absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--accent);
  transition: transform .12s ease;
}

#NPCCreater label:has(> input[type="checkbox"]:checked){
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
#NPCCreater label:has(> input[type="checkbox"]:checked)::after{
  transform: translateY(-50%) scale(1);
}
#NPCCreater label:has(> input[type="checkbox"]:focus-visible){
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- skillSet: grid (final) ---------- */
#NPCCreater .skillSet{
  display:grid;
  grid-template-columns: 70px minmax(180px, 1fr) 92px 32px;
  gap: 8px;
  align-items:center;
}
#NPCCreater .skillSet input{ width:100%; }
#NPCCreater .skillSet .deleteButton{
  width: 32px;
  height: 32px;
  margin-left: 0;
}
@media (max-width: 560px){
  #NPCCreater .skillSet{ grid-template-columns: 1fr 92px 32px; }
  #NPCCreater .skillSet > :first-child{ grid-column: 1 / -1; }
}

/* ---------- Ability layout: stable (final) ---------- */
#NPCCreater .FormGroup:has(#hp):has(#mp):has(#san){
  display:grid;
  grid-template-columns: repeat(3, var(--ab-lb) var(--ab-in));
  justify-content: start;
  gap: 8px 10px;
  align-items:center;
}
#NPCCreater .FormGroup:has(#hp):has(#mp):has(#san) label{
  width: var(--ab-lb);
  justify-self:end;
  white-space: nowrap;
}

#NPCCreater .FormGroup:has(#str):has(#con):has(#pow):has(#dex):has(#app):has(#siz):has(#int):has(#edu){
  display:grid;
  grid-template-columns: repeat(5, var(--ab-lb) var(--ab-in));
  justify-content: start;
  gap: 8px 10px;
  align-items:center;
}
#NPCCreater .FormGroup:has(#str) label{
  width: var(--ab-lb);
  justify-self:end;
  white-space: nowrap;
}

#NPCCreater .FormGroup:has(#hp) input[type="number"],
#NPCCreater .FormGroup:has(#str) input[type="number"]{
  width: 100%;
  min-width: 0;
}

/* =========================================================
   10) NPC Modal / Popup (alert/confirm replacement)
   ========================================================= */
.npc-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .18s ease;
}
.npc-modal-overlay.is-visible{ opacity: 1; }

.npc-modal{
  width: min(420px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  padding: 20px 24px;
  transform: translateY(10px) scale(.97);
  transition: transform .2s ease;
}
.npc-modal-overlay.is-visible .npc-modal{
  transform: translateY(0) scale(1);
}

.npc-modal-title{
  font-size: var(--fs-3);
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.npc-modal-body{
  color: var(--text);
  line-height: 1.65;
  margin-bottom: 18px;
  white-space: pre-wrap;
}

.npc-modal-actions{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.npc-modal-ok{
  background: var(--accent);
  color: var(--accent-on);
  min-width: 80px;
}
.npc-modal-ok:hover{ background: var(--accent-hover); }

.npc-modal-cancel{
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.npc-modal-cancel:hover{
  background: var(--border);
  color: var(--text);
}

/* =========================================================
   11) NPC Command Toggle Panel
   ========================================================= */
.npc-cmd-panel{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 14px 16px;
  margin: 16px 0;
}

.npc-cmd-panel-title{
  font-size: var(--fs-2);
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--text);
}

.npc-cmd-panel-desc{
  font-size: var(--fs-1);
  color: var(--muted);
  margin-bottom: 12px;
}

.npc-cmd-toggles{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
}

/* --- Custom toggle switch --- */
.npc-toggle-label{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
  user-select: none;
}
.npc-toggle-label:hover{
  border-color: var(--accent);
}

/* Hide real checkbox */
.npc-toggle-label > input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Track */
.npc-toggle-track{
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--border);
  transition: background-color .2s ease;
}

/* Thumb */
.npc-toggle-thumb{
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s ease;
}

/* Checked state */
.npc-toggle-label > input:checked + .npc-toggle-track{
  background: var(--accent);
}
.npc-toggle-label > input:checked + .npc-toggle-track .npc-toggle-thumb{
  transform: translateX(16px);
}

/* Focus ring */
.npc-toggle-label > input:focus-visible + .npc-toggle-track{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Text */
.npc-toggle-text{
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.npc-toggle-text strong{
  font-size: var(--fs-1);
  color: var(--text);
  line-height: 1.3;
}
.npc-toggle-text small{
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Unchecked → dim the text */
.npc-toggle-label:has(> input:not(:checked)) .npc-toggle-text strong{
  opacity: .5;
}
.npc-toggle-label:has(> input:not(:checked)) .npc-toggle-text small{
  opacity: .4;
}

.button.is-danger{ background: var(--danger); color: var(--danger-on); }
.button.is-danger:hover{ background: var(--danger-hover); }

#jobControls [hidden] { display: none !important; }

.gas-embed-wrap{
  margin-top: 10px;
  width: 100%;
  min-height: 620px;
  height: min(86vh, 1040px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.08);
  transition: height .18s ease;
}

.gas-embed{
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

/* ---------- Loaded-files badge bar ---------- */
.dv-loaded-files{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  min-height: 0;            /* 空のとき潰れる */
}
.dv-loaded-files:empty{ display: none; }

.dv-loaded-label{
  font-weight: 700;
  font-size: var(--fs-1);
  color: var(--muted);
  white-space: nowrap;
}

.dv-badge{
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  font-size: var(--fs-1);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.dv-reset-btn{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding: 2px 10px;
  border: 1px solid var(--danger);
  border-radius: 999px;
  background: transparent;
  color: var(--danger);
  font-size: var(--fs-1);
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.dv-reset-btn:hover{
  background: var(--danger);
  color: var(--danger-on);
}
/* =========================================================
   11) BustTable
   ========================================================= */
#BustTable{
  max-width: 1180px;
  margin: 0 auto;
}

#BustTable .bt-shell{
  display: grid;
  gap: 14px;
}

#BustTable .bt-card{
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background:
    radial-gradient(900px 260px at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
    var(--surface);
  box-shadow: var(--shadow-1);
  padding: 16px;
}

#BustTable .bt-hero{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  overflow: hidden;
}

#BustTable .bt-kicker{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#BustTable h2{
  margin: 0 0 6px;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  line-height: 1.2;
}

#BustTable h3{
  margin: 0;
  font-size: var(--fs-3);
  line-height: 1.25;
}

#BustTable p{
  color: var(--muted);
  margin: 0;
}

#BustTable .bt-source-note{
  flex: 0 1 380px;
  color: var(--muted);
  border: 1px dashed var(--border);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  border-radius: var(--radius-s);
  padding: 10px 12px;
  font-size: var(--fs-1);
}

#BustTable .bt-layout{
  display: grid;
  grid-template-columns: minmax(320px, .92fr) minmax(320px, 1fr);
  gap: 14px;
  align-items: stretch;
}

#BustTable .bt-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

#BustTable .bt-actions-mini{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

#BustTable .bt-chip-button{
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: var(--fs-1);
  transition: border-color .15s ease, background-color .15s ease, transform .05s ease;
}
#BustTable .bt-chip-button:hover{
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
}
#BustTable .bt-chip-button:active{ transform: translateY(1px); }

#BustTable .bt-form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#BustTable .bt-form-grid label{
  display: grid;
  grid-template-columns: 1fr minmax(72px, 92px) max-content;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  padding: 8px 10px;
  color: var(--muted);
  font-size: var(--fs-1);
}

#BustTable .bt-form-grid input{
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--text);
  text-align: right;
  padding: 4px 8px;
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

#BustTable .bt-form-grid b{
  color: var(--muted);
  font-size: .78rem;
}

#BustTable .bt-button-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

#BustTable .bt-secondary{
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
#BustTable .bt-secondary:hover{
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
}

#BustTable .bt-note{
  color: var(--muted);
  font-size: var(--fs-1);
  margin-top: 10px;
}

#BustTable .bt-result-card{
  display: grid;
  align-content: start;
  gap: 14px;
}

#BustTable .bt-result-main{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#BustTable .bt-rank-pill{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 900;
  letter-spacing: .04em;
}

#BustTable .bt-tone-a{ border-color: #60a5fa; background: color-mix(in srgb, #60a5fa 14%, var(--surface-2)); }
#BustTable .bt-tone-b{ border-color: #34d399; background: color-mix(in srgb, #34d399 14%, var(--surface-2)); }
#BustTable .bt-tone-c{ border-color: #a78bfa; background: color-mix(in srgb, #a78bfa 15%, var(--surface-2)); }
#BustTable .bt-tone-d{ border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 15%, var(--surface-2)); }
#BustTable .bt-tone-e{ border-color: #fb7185; background: color-mix(in srgb, #fb7185 15%, var(--surface-2)); }
#BustTable .bt-tone-f{ border-color: #f43f5e; background: color-mix(in srgb, #f43f5e 18%, var(--surface-2)); }

#BustTable .bt-score{
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#BustTable .bt-score span{
  display: block;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}
#BustTable .bt-score small{
  color: var(--muted);
}

#BustTable .bt-rank-text{
  min-height: 2.2em;
}

#BustTable .bt-metrics{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#BustTable .bt-metrics div{
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  padding: 10px;
  min-width: 0;
}

#BustTable .bt-metrics span{
  display: block;
  color: var(--muted);
  font-size: .72rem;
  white-space: nowrap;
}

#BustTable .bt-metrics strong{
  display: block;
  margin-top: 3px;
  font-size: .95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#BustTable .bt-muted{
  color: var(--muted);
  font-size: var(--fs-1);
}

#BustTable .bt-ref-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

#BustTable .bt-ref-card{
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  padding: 10px;
}

#BustTable .bt-ref-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

#BustTable .bt-ref-top strong{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#BustTable .bt-ref-top span{
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--muted);
  font-size: .72rem;
}

#BustTable .bt-ref-size{
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

#BustTable .bt-ref-meta{
  margin-top: 4px;
  color: var(--muted);
  font-size: .76rem;
}

#BustTable .bt-table-wrap{
  overflow-x: auto;
}

#BustTable .bt-table{
  min-width: 760px;
  margin-top: 0;
  box-shadow: none;
}

#BustTable .bt-table th,
#BustTable .bt-table td{
  text-align: left;
}

#BustTable .bt-table td:nth-child(1),
#BustTable .bt-table td:nth-child(3),
#BustTable .bt-table td:nth-child(4),
#BustTable .bt-table td:nth-child(5){
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 980px){
  #BustTable .bt-hero,
  #BustTable .bt-layout{
    grid-template-columns: 1fr;
    display: grid;
  }
  #BustTable .bt-source-note{
    flex-basis: auto;
  }
  #BustTable .bt-metrics{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px){
  #BustTable .bt-form-grid{
    grid-template-columns: 1fr;
  }
  #BustTable .bt-card-head,
  #BustTable .bt-result-main{
    align-items: stretch;
    flex-direction: column;
  }
  #BustTable .bt-actions-mini{
    justify-content: flex-start;
  }
  #BustTable .bt-score{
    text-align: left;
  }
}

/* BustTable v2 tweaks: weight, under-bust, exact/near references */
#BustTable .bt-metrics{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#BustTable .bt-ref-link{
  display: inline-flex;
  margin-top: 8px;
  color: var(--accent);
  font-size: .76rem;
  text-decoration: none;
}
#BustTable .bt-ref-link:hover{
  text-decoration: underline;
}

#BustTable .bt-empty-card{
  border-style: dashed;
  color: var(--muted);
}

#BustTable .bt-table{
  min-width: 920px;
}

#BustTable .bt-table td:nth-child(1),
#BustTable .bt-table td:nth-child(3),
#BustTable .bt-table td:nth-child(4),
#BustTable .bt-table td:nth-child(5),
#BustTable .bt-table td:nth-child(6),
#BustTable .bt-table td:nth-child(7){
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 980px){
  #BustTable .bt-metrics{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px){
  #BustTable .bt-metrics{
    grid-template-columns: 1fr;
  }
}

/* BustTable v3: dataset/category filters and richer reference cards */
#BustTable .bt-filter-card{
  margin-top: 12px;
}

#BustTable .bt-filter-grid{
  display:grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1.1fr) minmax(240px, .9fr);
  gap: 14px;
}

#BustTable .bt-filter-title{
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: 8px;
}

#BustTable .bt-filter-row{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

#BustTable .bt-toggle{
  display:inline-flex;
  align-items:center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
  color: var(--text-main);
  font-size: .84rem;
  line-height: 1;
  cursor:pointer;
  user-select:none;
}

#BustTable .bt-toggle input{
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  margin: 0;
}

#BustTable .bt-toggle:has(input:checked){
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
}

#BustTable .bt-ref-note{
  margin-top: 6px;
  color: var(--text-muted);
  font-size: .78rem;
}

#BustTable .bt-adult-ref{
  border-color: color-mix(in srgb, #f472b6 45%, var(--border));
}

#BustTable .bt-source-note strong{
  color: var(--text-main);
}

@media (max-width: 900px){
  #BustTable .bt-filter-grid{
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Unipo UX enhancement layer v2
   Existing visual language is preserved; these rules add states,
   helpers, restoration notices and small-screen resilience.
   ============================================================ */
.sidebar .tablinks{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.sidebar .tablinks span{ font-weight:700; }
.sidebar .tablinks small{
  font-size:.68rem;
  opacity:.62;
  letter-spacing:.02em;
}
.sidebar .tablinks.active small{ opacity:.82; }

#dropZone{
  cursor:pointer;
  outline:none;
}
#dropZone:focus-visible{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
#dropZone p{ margin-bottom:10px; }
.dv-drop-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.dv-drop-actions .button{ margin:0; }
.dv-paste-panel{
  margin:12px 0;
  padding:14px;
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  background:var(--surface);
}
.dv-paste-panel textarea{
  width:100%;
  resize:vertical;
  margin:8px 0;
  padding:10px;
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  background:var(--surface-2);
  color:var(--text);
  font-family:ui-monospace, SFMono-Regular, Consolas, monospace;
}
.dv-paste-panel input[type="text"]{
  min-width:220px;
  flex:1;
}
.dv-empty-state{
  margin:12px 0;
  padding:14px 16px;
  border:1px dashed var(--border);
  border-radius:var(--radius-m);
  color:var(--muted);
  background:color-mix(in srgb, var(--surface-2) 76%, transparent);
}
.dv-status-error{ border-color:var(--danger); }
#dataOptions{
  align-items:center;
  flex-wrap:wrap;
  gap:8px 14px;
  margin:12px 0;
}
#dataOptions label{ white-space:nowrap; }
.dv-option-spacer{ flex:1; }
.dv-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.dv-badge-remove{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
  opacity:.72;
  padding:0 1px;
}
.dv-badge-remove:hover{ opacity:1; }

.dv-toast{
  display:flex;
  align-items:center;
  gap:12px;
  max-width:min(92vw, 620px);
}
.unipo-toast-text{ flex:1; white-space:pre-line; }
.unipo-toast-action{
  border:0;
  border-radius:999px;
  padding:5px 10px;
  background:color-mix(in srgb, var(--accent) 25%, var(--surface-2));
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
.unipo-toast-success{ border-left:4px solid var(--success, #4ade80); }
.unipo-toast-warning{ border-left:4px solid #f59e0b; }
.unipo-toast-error{ border-left:4px solid var(--danger); }

.input-error{
  border-color:var(--danger) !important;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--danger) 20%, transparent);
}
.npc-error-summary{
  margin-bottom:14px;
  padding:12px 14px;
  border:1px solid color-mix(in srgb, var(--danger) 60%, var(--border));
  border-radius:var(--radius-m);
  background:color-mix(in srgb, var(--danger) 8%, var(--surface));
}
.npc-error-summary ul{ margin:7px 0 0 1.2em; }
.npc-auto-vitals{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0 0 10px;
  color:var(--muted);
  cursor:pointer;
}
.npc-point-summary{
  margin:10px 0;
  padding:9px 11px;
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  background:var(--surface-2);
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.npc-point-summary.is-over{
  color:var(--danger);
  border-color:color-mix(in srgb, var(--danger) 55%, var(--border));
}
.npc-preview-card{
  margin-top:16px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  background:var(--surface);
}
.npc-preview-head>div{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px 14px;
}
.npc-preview-head strong{ font-size:1.1rem; }
.npc-preview-head span{ color:var(--muted); font-size:.86rem; }
.npc-preview-status{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0;
}
.npc-preview-status span{
  padding:5px 9px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--border);
}
.npc-preview-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.npc-preview-card details{ margin-top:12px; }
.npc-preview-card pre{
  max-height:360px;
  overflow:auto;
  padding:12px;
  border-radius:var(--radius-s);
  background:var(--surface-2);
  white-space:pre-wrap;
  word-break:break-word;
}

#CharCreater .cc-stat-card.swap-available{
  outline:2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset:2px;
}
#CharCreater.swap-mode-on .cc-stat-card:not(.swap-available){ opacity:.6; }
#CharCreater .cc-ia-panel{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}

.gas-embed-wrap{ position:relative; }
.gas-embed-status{
  position:absolute;
  z-index:2;
  inset:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  padding:20px;
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter:blur(4px);
}
.gas-embed-status[hidden]{ display:none; }
.gas-embed-status span{ color:var(--muted); }
.gas-status-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:6px; }

#BustTable .bt-roll-history{
  margin-top:12px;
  color:var(--muted);
}
#BustTable .bt-roll-history>div{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}

@media (max-width:700px){
  .dv-option-spacer{ display:none; }
  #dataOptions{ align-items:stretch; }
  #dataOptions .button{ flex:1 1 auto; }
  .npc-preview-actions .button,
  .tarot-history-actions .button{ flex:1; }
}


/* DataViewer character filter */
.dv-character-filter{
  min-width:210px;
  height:var(--control-h);
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  background:var(--surface-2);
  color:var(--text);
}

/* NPC reusable templates */
.npc-template-panel{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 14px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  background:var(--surface-2);
}
.npc-template-panel strong{ margin-right:4px; }
.npc-template-panel input,
.npc-template-panel select{
  min-width:180px;
  height:var(--control-h);
  padding:6px 9px;
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  background:var(--surface);
  color:var(--text);
}
@media (max-width:700px){
  .dv-character-filter{ width:100%; min-width:0; }
  .npc-template-panel input,
  .npc-template-panel select{ flex:1 1 100%; min-width:0; }
  .npc-template-panel .button{ flex:1 1 auto; }
}

/* =========================================================
   BustTable v5: proportion lab, clearer diagnostics and matching
   ========================================================= */
#BustTable .bt-card-head > div:first-child{
  min-width:0;
}

#BustTable .bt-result-card{
  position:relative;
  overflow:hidden;
}

#BustTable .bt-result-card::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-80px;
  bottom:-100px;
  border:28px solid color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius:50%;
  pointer-events:none;
}

#BustTable .bt-result-subline{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

#BustTable .bt-result-subline strong{
  font-size:1.2rem;
}

#BustTable .bt-result-subline span{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:3px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--muted);
  font-size:.76rem;
  font-weight:700;
}

#BustTable .bt-summary{
  position:relative;
  z-index:1;
  padding:11px 12px;
  border-left:3px solid var(--accent);
  border-radius:0 var(--radius-s) var(--radius-s) 0;
  background:color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  color:var(--text);
  font-size:.9rem;
}

#BustTable .bt-proportion-panel{
  position:relative;
  z-index:1;
  display:grid;
  gap:9px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  background:color-mix(in srgb, var(--surface-2) 86%, transparent);
}

#BustTable .bt-proportion-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}

#BustTable .bt-proportion-head span{
  color:var(--muted);
  font-size:.72rem;
  text-align:right;
}

#BustTable .bt-gauge-row{
  display:grid;
  grid-template-columns:64px minmax(120px, 1fr) 54px;
  align-items:center;
  gap:10px;
  font-size:.8rem;
}

#BustTable .bt-gauge-row > span{
  color:var(--muted);
}

#BustTable .bt-gauge-row > strong{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

#BustTable .bt-gauge{
  position:relative;
  height:10px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
}

#BustTable .bt-gauge i{
  display:block;
  width:var(--value, 0%);
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 58%, var(--surface)), var(--accent));
  transition:width .2s ease;
}

#BustTable .bt-gauge em{
  position:absolute;
  inset-block:-3px;
  left:var(--marker, 50%);
  width:2px;
  transform:translateX(-1px);
  background:var(--text);
  opacity:.66;
}

#BustTable .bt-method-card{
  padding:0;
  overflow:hidden;
}

#BustTable .bt-method-card summary{
  cursor:pointer;
  padding:13px 16px;
  font-weight:800;
  list-style-position:inside;
  user-select:none;
}

#BustTable .bt-method-card[open] summary{
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
}

#BustTable .bt-method-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  padding:14px 16px 16px;
}

#BustTable .bt-method-grid > div{
  padding:10px;
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  background:var(--surface-2);
}

#BustTable .bt-method-grid p{
  margin-top:4px;
  font-size:.78rem;
}

#BustTable .bt-search-row{
  display:grid;
  grid-template-columns:minmax(240px, 1fr) minmax(130px, 180px);
  gap:10px;
  margin-bottom:14px;
}

#BustTable .bt-search-field,
#BustTable .bt-select-field{
  display:grid;
  gap:5px;
  color:var(--muted);
  font-size:.78rem;
  font-weight:700;
}

#BustTable .bt-search-field input,
#BustTable .bt-select-field select{
  width:100%;
  height:38px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  background:var(--surface-2);
  color:var(--text);
}

#BustTable .bt-search-field input:focus,
#BustTable .bt-select-field select:focus{
  border-color:var(--accent);
}

#BustTable .bt-ref-card{
  display:flex;
  flex-direction:column;
  min-height:176px;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

#BustTable .bt-ref-card:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--accent) 54%, var(--border));
  box-shadow:var(--shadow-1);
}

#BustTable .bt-ref-top > div{
  min-width:0;
}

#BustTable .bt-ref-top strong,
#BustTable .bt-ref-top small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#BustTable .bt-ref-top small{
  margin-top:1px;
  color:var(--muted);
  font-size:.7rem;
}

#BustTable .bt-ref-top .bt-match-badge{
  display:grid;
  place-items:center;
  min-width:44px;
  height:28px;
  padding:0 8px;
  border-color:color-mix(in srgb, var(--accent) 46%, var(--border));
  background:color-mix(in srgb, var(--accent) 10%, var(--surface));
  color:var(--text);
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

#BustTable .bt-ref-deltas{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:7px;
}

#BustTable .bt-ref-deltas span{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:2px 6px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--muted);
  font-size:.68rem;
  font-variant-numeric:tabular-nums;
}

#BustTable .bt-ref-link{
  margin-top:auto;
  padding-top:9px;
}

#BustTable .bt-empty-card{
  min-height:110px;
  justify-content:center;
}

@media (max-width:980px){
  #BustTable .bt-method-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:640px){
  #BustTable .bt-search-row,
  #BustTable .bt-method-grid{
    grid-template-columns:1fr;
  }

  #BustTable .bt-proportion-head{
    align-items:flex-start;
    flex-direction:column;
    gap:2px;
  }

  #BustTable .bt-proportion-head span{
    text-align:left;
  }

  #BustTable .bt-gauge-row{
    grid-template-columns:56px minmax(90px, 1fr) 48px;
    gap:7px;
  }
}
#BustTable .bt-input-card{ align-self:start; }
#BustTable,
#BustTable .bt-shell,
#BustTable .bt-card,
#BustTable .bt-table-wrap{
  min-width:0;
  max-width:100%;
}

/* =========================================================
   NPC Creator v3: guided, compact workspace
   ========================================================= */
#NPCCreater{
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px clamp(16px, 2.4vw, 30px) 44px;
  overflow: visible;
}
#NPCCreater .npc-page{
  display: grid;
  gap: 16px;
}
#NPCCreater .npc-hero{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
  padding: 4px 2px 8px;
}
#NPCCreater .npc-eyebrow{
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
}
#NPCCreater .npc-hero h2{
  margin: 0;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  line-height: 1.25;
}
#NPCCreater .npc-hero p{
  max-width: 720px;
  margin-top: 5px;
  color: var(--muted);
  font-size: .92rem;
}
#NPCCreater .npc-progress-card{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 270px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--surface-2);
  color: var(--muted);
  font-size: .82rem;
}
#NPCCreater .npc-progress-card span{ flex: 1; }
#NPCCreater .npc-progress-card strong{
  min-width: 50px;
  color: var(--text);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#NPCCreater #NpcForm{
  display: grid;
  gap: 14px;
}
#NPCCreater .npc-section,
#NPCCreater .npc-cmd-panel,
#NPCCreater .npc-action-bar{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
#NPCCreater .npc-section{
  padding: clamp(16px, 2vw, 22px);
}
#NPCCreater .npc-section-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
#NPCCreater .npc-section-head > div:first-child{
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
#NPCCreater .npc-section-index{
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
  font-size: .74rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
#NPCCreater .npc-section-head h3{
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.25;
}
#NPCCreater .npc-section-head p{
  margin-top: 2px;
  color: var(--muted);
  font-size: .82rem;
}
#NPCCreater .npc-section-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Template strip */
#NPCCreater .npc-template-panel{
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(340px, 1.5fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
}
#NPCCreater .npc-template-copy{
  display: grid;
  gap: 1px;
}
#NPCCreater .npc-template-copy strong{ font-size: .88rem; }
#NPCCreater .npc-template-copy span{
  color: var(--muted);
  font-size: .74rem;
}
#NPCCreater .npc-template-fields{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#NPCCreater .npc-template-panel input,
#NPCCreater .npc-template-panel select{
  width: 100%;
  min-width: 0;
  height: var(--control-h);
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--text);
}
#NPCCreater .npc-template-actions{
  display: flex;
  gap: 6px;
}
#NPCCreater .npc-template-actions .button{
  min-width: 64px;
  white-space: nowrap;
}

/* Profile */
#NPCCreater .npc-profile-row{
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(230px, auto);
  align-items: stretch;
  gap: 12px;
}
#NPCCreater .npc-field{
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}
#NPCCreater .npc-field input{
  width: 100%;
  height: 42px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text);
  font-size: .96rem;
}
#NPCCreater .npc-secret-toggle{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 13px 10px 46px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  cursor: pointer;
}
#NPCCreater .npc-secret-toggle > span{
  display: grid;
  gap: 1px;
}
#NPCCreater .npc-secret-toggle strong{ font-size: .88rem; }
#NPCCreater .npc-secret-toggle small{
  color: var(--muted);
  font-size: .73rem;
  font-weight: 400;
}

/* Ability workspace */
#NPCCreater .npc-roll-button{
  min-width: 132px;
}
#NPCCreater .npc-ability-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(245px, 290px);
  gap: 14px;
  align-items: stretch;
}
#NPCCreater .npc-stat-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(115px, 1fr));
  gap: 9px;
}
#NPCCreater .npc-stat-card{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 66px;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}
#NPCCreater .npc-stat-card > span{
  display: grid;
  color: var(--text);
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.15;
}
#NPCCreater .npc-stat-card small{
  margin-top: 3px;
  color: var(--muted);
  font-size: .67rem;
  font-weight: 500;
}
#NPCCreater .npc-stat-card input{
  width: 66px;
  height: 38px;
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
#NPCCreater .npc-vitals-card{
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-2));
}
#NPCCreater .npc-vitals-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#NPCCreater .npc-vitals-head > div:first-child{
  display: grid;
  gap: 1px;
}
#NPCCreater .npc-vitals-head strong{ font-size: .9rem; }
#NPCCreater .npc-vitals-head small{
  color: var(--muted);
  font-size: .7rem;
}
#NPCCreater .npc-auto-vitals{
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 0;
  padding: 4px 9px 4px 31px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: .72rem;
  cursor: pointer;
}
#NPCCreater .npc-vitals-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
#NPCCreater .npc-vitals-grid label{
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
  text-align: center;
}
#NPCCreater .npc-vitals-grid input{
  width: 100%;
  height: 40px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
}
#NPCCreater .npc-derived-line{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .76rem;
}
#NPCCreater .npc-derived-line strong{
  color: var(--text);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

/* Skills */
#NPCCreater .npc-skills-head{ margin-bottom: 12px; }
#NPCCreater .npc-point-summary{
  margin: 0;
  padding: 7px 10px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: .76rem;
}
#NPCCreater .skills-group{
  display: grid;
  gap: 9px;
}
#NPCCreater #jobControls{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
  grid-template-areas:
    "catL jobL . ."
    "catS jobS btn1 btn2";
  gap: 5px 8px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
}
#NPCCreater #jobControls .cat-label{ grid-area: catL; }
#NPCCreater #jobControls #jobCategorySelect{ grid-area: catS; }
#NPCCreater #jobControls .job-label{ grid-area: jobL; }
#NPCCreater #jobControls #jobSelect{ grid-area: jobS; }
#NPCCreater #jobControls #btnEven{ grid-area: btn1; }
#NPCCreater #jobControls #btnBias{ grid-area: btn2; }
#NPCCreater #jobControls label{
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
}
#NPCCreater #jobControls select,
#NPCCreater #jobControls .button{
  width: 100%;
  height: var(--control-h);
}
#NPCCreater #jobControls select{
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--text);
}
#NPCCreater #jobControls .button{ white-space: nowrap; }
#NPCCreater #choosePanel,
#NPCCreater #emphasisPanel{
  margin: 0;
  padding: 11px 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
#NPCCreater #jobSkillsContainer{
  display: grid;
  gap: 7px;
}
#NPCCreater #jobSkillsContainer:not(:empty)::before{
  content: "職業技能";
  display: block;
  margin: 3px 0 -1px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
}
#NPCCreater .skillSet,
#NPCCreater .damageSet{
  display: grid;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}
#NPCCreater .skillSet{
  grid-template-columns: 74px minmax(180px, 1fr) 94px 32px;
}
#NPCCreater .damageSet{
  grid-template-columns: 74px minmax(180px, 1fr) auto 32px;
}
#NPCCreater .skillSet > label,
#NPCCreater .damageSet > label{
  color: var(--muted);
  font-size: .73rem;
  font-weight: 800;
  white-space: nowrap;
}
#NPCCreater .skillSet input,
#NPCCreater .damageSet input{
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text);
}
#NPCCreater .dbContainer{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
#NPCCreater .dbContainer label{
  color: var(--muted);
  font-size: .72rem;
}
#NPCCreater .deleteButton{
  width: 30px;
  height: 30px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  border-radius: 6px;
  background: transparent;
  color: color-mix(in srgb, var(--danger) 80%, var(--text));
}
#NPCCreater .deleteButton:hover{
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
}
#NPCCreater .npc-inline-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
}

/* Command settings */
#NPCCreater .npc-cmd-panel{
  overflow: hidden;
}
#NPCCreater .npc-cmd-panel > summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 66px;
  padding: 13px 18px;
  cursor: pointer;
  list-style: none;
}
#NPCCreater .npc-cmd-panel > summary::-webkit-details-marker{ display: none; }
#NPCCreater .npc-cmd-panel > summary > span{
  display: flex;
  align-items: center;
  gap: 11px;
}
#NPCCreater .npc-cmd-panel > summary > span > span:last-child{
  display: grid;
  gap: 1px;
}
#NPCCreater .npc-cmd-panel summary strong{ font-size: .95rem; }
#NPCCreater .npc-cmd-panel summary small{
  color: var(--muted);
  font-size: .72rem;
}
#NPCCreater .npc-cmd-panel summary em{
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: .72rem;
  font-style: normal;
  white-space: nowrap;
}
#NPCCreater .npc-cmd-panel > summary::after{
  content: "⌄";
  color: var(--muted);
  transition: transform .16s ease;
}
#NPCCreater .npc-cmd-panel[open] > summary::after{ transform: rotate(180deg); }
#NPCCreater .npc-cmd-body{
  padding: 0 16px 16px;
}
#NPCCreater .npc-cmd-toggles{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
#NPCCreater .npc-toggle-label{
  min-height: 72px;
  padding: 10px 10px 10px 50px;
  border-radius: 8px;
  background: var(--surface-2);
}
#NPCCreater .npc-toggle-text strong{ font-size: .8rem; }
#NPCCreater .npc-toggle-text small{
  margin-top: 2px;
  line-height: 1.35;
  font-size: .66rem;
}

/* Bottom action */
#NPCCreater .npc-action-bar{
  position: sticky;
  bottom: 10px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(10px);
}
#NPCCreater .npc-action-summary{
  display: grid;
  gap: 1px;
}
#NPCCreater .npc-action-summary strong{ font-size: .86rem; }
#NPCCreater .npc-action-summary span{
  color: var(--muted);
  font-size: .7rem;
}
#NPCCreater .npc-action-buttons{
  display: flex;
  gap: 8px;
}
#NPCCreater .npc-create-button{
  min-width: 210px;
  font-weight: 800;
}
#NPCCreater .npc-clear-button{
  order: -1;
}
#NPCCreater .npc-error-summary{
  margin: 0;
}
#NPCCreater .npc-preview-card{
  margin-top: 2px;
  border-radius: 12px;
}

/* checkbox overrides for the redesigned controls */
#NPCCreater .npc-secret-toggle > input[type="checkbox"],
#NPCCreater .npc-auto-vitals > input[type="checkbox"]{
  position: absolute;
  opacity: 0;
}
#NPCCreater .npc-secret-toggle::before,
#NPCCreater .npc-auto-vitals::before{
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
}
#NPCCreater .npc-auto-vitals::before{
  left: 8px;
  width: 15px;
  height: 15px;
  border-radius: 4px;
}
#NPCCreater .npc-secret-toggle::after,
#NPCCreater .npc-auto-vitals::after{
  content: "";
  position: absolute;
  left: 17px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) scale(0);
  border-radius: 3px;
  background: var(--accent);
  transition: transform .12s ease;
}
#NPCCreater .npc-auto-vitals::after{
  left: 11px;
  width: 9px;
  height: 9px;
}
#NPCCreater .npc-secret-toggle:has(input:checked),
#NPCCreater .npc-auto-vitals:has(input:checked){
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
}
#NPCCreater .npc-secret-toggle:has(input:checked)::after,
#NPCCreater .npc-auto-vitals:has(input:checked)::after{
  transform: translateY(-50%) scale(1);
}

@media (max-width: 1050px){
  #NPCCreater .npc-template-panel{
    grid-template-columns: 1fr;
  }
  #NPCCreater .npc-template-copy{
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 10px;
  }
  #NPCCreater .npc-template-actions{ justify-content: flex-end; }
  #NPCCreater .npc-stat-grid{ grid-template-columns: repeat(3, minmax(110px, 1fr)); }
  #NPCCreater .npc-cmd-toggles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #NPCCreater #jobControls{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "catL jobL"
      "catS jobS"
      "btn1 btn2";
  }
}
@media (max-width: 780px){
  #NPCCreater{ padding-inline: 12px; }
  #NPCCreater .npc-hero{
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  #NPCCreater .npc-progress-card{ min-width: 0; }
  #NPCCreater .npc-profile-row,
  #NPCCreater .npc-ability-layout{
    grid-template-columns: 1fr;
  }
  #NPCCreater .npc-stat-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #NPCCreater .npc-stat-card{
    grid-template-columns: 1fr;
    gap: 6px;
    text-align: center;
  }
  #NPCCreater .npc-stat-card input{ width: 100%; }
  #NPCCreater .npc-action-bar{
    align-items: stretch;
    flex-direction: column;
  }
  #NPCCreater .npc-action-buttons,
  #NPCCreater .npc-action-buttons .button{ width: 100%; }
  #NPCCreater .npc-action-buttons{ flex-direction: row; }
  #NPCCreater .npc-create-button{ min-width: 0; }
}
@media (max-width: 620px){
  #NPCCreater .npc-section{ padding: 14px; }
  #NPCCreater .npc-section-head{
    align-items: flex-start;
    flex-direction: column;
  }
  #NPCCreater .npc-section-actions,
  #NPCCreater .npc-section-actions .button{ width: 100%; }
  #NPCCreater .npc-template-fields{ grid-template-columns: 1fr; }
  #NPCCreater .npc-template-actions{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  #NPCCreater .npc-template-actions .button{ min-width: 0; }
  #NPCCreater .npc-stat-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #NPCCreater .npc-skills-head #npcPointSummaryMount{ width: 100%; }
  #NPCCreater .npc-point-summary{ display: block; text-align: center; }
  #NPCCreater #jobControls{
    grid-template-columns: 1fr;
    grid-template-areas:
      "catL" "catS" "jobL" "jobS" "btn1" "btn2";
  }
  #NPCCreater .skillSet{
    grid-template-columns: minmax(0, 1fr) 84px 30px;
  }
  #NPCCreater .skillSet > label{ grid-column: 1 / -1; }
  #NPCCreater .damageSet{
    grid-template-columns: minmax(0, 1fr) auto 30px;
  }
  #NPCCreater .damageSet > label{ grid-column: 1 / -1; }
  #NPCCreater .npc-cmd-panel > summary{
    align-items: flex-start;
    padding: 12px 14px;
  }
  #NPCCreater .npc-cmd-panel summary em{ display: none; }
  #NPCCreater .npc-cmd-toggles{ grid-template-columns: 1fr; }
  #NPCCreater .npc-inline-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #NPCCreater .npc-inline-actions .button{ width: 100%; }
  #NPCCreater .npc-action-buttons{ flex-direction: column-reverse; }
}

/* Keep redesigned checkbox layouts ahead of the legacy generic checkbox rule. */
#NPCCreater label.npc-secret-toggle:has(> input[type="checkbox"]){
  display:flex;
  align-items:center;
  gap:10px;
  min-height:64px;
  padding:10px 13px 10px 46px;
  border-radius:8px;
  line-height:1.3;
}
#NPCCreater label.npc-auto-vitals:has(> input[type="checkbox"]){
  display:inline-flex;
  min-height:30px;
  margin:0;
  padding:4px 9px 4px 31px;
  border-radius:999px;
  line-height:1;
}
#NPCCreater label.npc-secret-toggle:has(> input[type="checkbox"])::before,
#NPCCreater label.npc-auto-vitals:has(> input[type="checkbox"])::before{
  left:13px;
  width:18px;
  height:18px;
  border-radius:5px;
}
#NPCCreater label.npc-auto-vitals:has(> input[type="checkbox"])::before{
  left:8px;
  width:15px;
  height:15px;
  border-radius:4px;
}
#NPCCreater label.npc-secret-toggle:has(> input[type="checkbox"])::after{
  left:17px;
  width:10px;
  height:10px;
}
#NPCCreater label.npc-auto-vitals:has(> input[type="checkbox"])::after{
  left:11px;
  width:9px;
  height:9px;
}

/* =========================================================
   20) Divination suite: shared navigation + three new systems
   ========================================================= */
.divination-switcher{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:0 0 12px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:999px;
  width:max-content;
  max-width:100%;
  background:color-mix(in srgb,var(--surface) 86%,transparent);
  box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.divination-switcher button{
  border:0;
  background:transparent;
  color:var(--muted);
  min-height:31px;
  padding:5px 12px;
  border-radius:999px;
  font:inherit;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.divination-switcher button:hover{
  color:var(--text);
  background:var(--surface-2);
}
.divination-switcher button.is-current{
  color:var(--text);
  background:var(--surface-2);
  box-shadow:0 0 0 1px var(--border),0 3px 14px rgba(0,0,0,.12);
}
.divination-switcher button span{margin-right:4px;opacity:.9}
.divination-app{
  width:min(1220px,100%);
  margin:0 auto;
  padding:12px 16px 30px;
}
.divination-eyebrow{
  display:inline-block;
  margin-bottom:7px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:.68rem;
  letter-spacing:.22em;
  font-weight:700;
  opacity:.72;
}
.divination-console{
  display:flex;
  align-items:end;
  gap:10px;
  margin:12px 0;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:var(--shadow-1);
}
.divination-field{display:grid;gap:5px;min-width:220px}
.divination-field.grow{flex:1 1 360px}
.divination-field label{
  font-size:.72rem;
  color:var(--muted);
  font-weight:700;
}
.divination-field label span{font-weight:500;opacity:.72}
.divination-field input,.divination-field select{
  width:100%;
  min-height:39px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface-2);
  color:var(--text);
  padding:7px 10px;
  font:inherit;
}
.divination-actions{display:flex;gap:7px;align-items:center;white-space:nowrap}
.divination-actions .button{min-height:39px}
.divination-stage,.divination-reading-section{
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow-1);
}
.divination-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 15px;
  border-bottom:1px solid var(--border);
}
.divination-section-head > div{display:grid;gap:1px}
.divination-section-head span{
  color:var(--muted);
  font:700 .63rem/1.2 Georgia,"Times New Roman",serif;
  letter-spacing:.18em;
}
.divination-section-head h3{font-size:1rem;line-height:1.3}
.divination-section-head p{max-width:600px;color:var(--muted);font-size:.72rem;text-align:right}
.divination-empty-reading{
  padding:26px;
  text-align:center;
  color:var(--muted);
  border:1px dashed var(--border);
  border-radius:10px;
}

/* Rune casting */
.rune-app{
  --rune-ink:#d7c9a3;
  --rune-stone:#30343b;
  --rune-stone-2:#20242a;
  --rune-rust:#a66b4d;
}
.rune-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px;
  align-items:center;
  min-height:150px;
  padding:20px 24px;
  border:1px solid color-mix(in srgb,var(--rune-ink) 35%,var(--border));
  border-radius:16px;
  overflow:hidden;
  color:#ece8dd;
  background:
    radial-gradient(circle at 83% 30%,rgba(215,201,163,.08),transparent 26%),
    linear-gradient(125deg,#15191c,#202226 55%,#131719);
  box-shadow:0 14px 38px rgba(0,0,0,.18);
}
.rune-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
  background-image:repeating-linear-gradient(17deg,transparent 0 18px,rgba(255,255,255,.03) 19px,transparent 20px 38px);
}
.rune-hero > div:first-child{position:relative;z-index:1;max-width:760px}
.rune-hero h2{font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;font-size:1.75rem;letter-spacing:.05em;margin-bottom:5px}
.rune-hero p{color:#b8b6ae;font-size:.82rem;line-height:1.8}
.rune-hero-wheel{
  position:relative;width:142px;height:142px;justify-self:center;border:1px solid rgba(215,201,163,.34);border-radius:50%;
  box-shadow:inset 0 0 0 9px rgba(215,201,163,.025),inset 0 0 0 10px rgba(215,201,163,.12);
}
.rune-hero-wheel::before,.rune-hero-wheel::after{content:"";position:absolute;inset:26px;border:1px solid rgba(215,201,163,.16);transform:rotate(45deg)}
.rune-hero-wheel::after{inset:45px;border-radius:50%;transform:none}
.rune-hero-wheel b{position:absolute;inset:0;display:grid;place-items:center;color:#e0cf9e;font:400 2.8rem "Segoe UI Historic",serif;text-shadow:0 0 20px rgba(224,207,158,.2)}
.rune-hero-wheel span{position:absolute;color:#9f9273;font:1.15rem "Segoe UI Historic",serif}
.rune-hero-wheel span:nth-child(1){top:8px;left:62px}.rune-hero-wheel span:nth-child(2){top:58px;right:10px}.rune-hero-wheel span:nth-child(4){bottom:8px;left:62px}.rune-hero-wheel span:nth-child(5){top:58px;left:10px}
.rune-primary{background:#6d5840!important;color:#fff!important;border-color:#907654!important}.rune-primary:hover{background:#80694c!important}
.rune-cloth{
  position:relative;min-height:290px;padding:30px 26px;overflow:hidden;
  background:
    radial-gradient(circle at 50% 55%,rgba(149,104,67,.12),transparent 36%),
    radial-gradient(circle at 20% 18%,rgba(255,255,255,.025),transparent 20%),
    #171a1d;
}
.rune-ring{position:absolute;left:50%;top:50%;width:260px;height:260px;transform:translate(-50%,-50%);border:1px solid rgba(215,201,163,.13);border-radius:50%;box-shadow:inset 0 0 0 34px rgba(215,201,163,.008)}
.rune-ring::before,.rune-ring::after{content:"";position:absolute;inset:37px;border:1px solid rgba(215,201,163,.07);transform:rotate(45deg)}
.rune-ring::after{transform:rotate(0);border-radius:50%;inset:66px}
.rune-board{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;gap:28px;min-height:230px}
.rune-board[data-spread="five"],.rune-board[data-spread="hagalaz5"]{display:grid;grid-template-columns:repeat(5,minmax(112px,1fr));gap:13px;width:min(850px,100%);margin:auto}
.rune-empty{display:grid;place-items:center;text-align:center;color:#8d8b82;gap:3px}
.rune-empty > span{font:3.8rem "Segoe UI Historic",serif;color:#6e6554;margin-bottom:5px}.rune-empty strong{color:#b8b2a4;font-family:Georgia,"Yu Mincho",serif}.rune-empty small{font-size:.72rem}
.rune-stone-wrap{display:grid;justify-items:center;gap:8px;animation:runeDrop .42s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--i)*70ms)}
.rune-position{color:#a9a392;font-size:.68rem;letter-spacing:.12em}
.rune-stone{
  position:relative;width:126px;height:152px;display:grid;place-items:center;align-content:center;gap:4px;
  transform:rotate(var(--tilt));overflow:hidden;border:1px solid rgba(215,201,163,.22);border-radius:46% 54% 48% 52% / 38% 45% 55% 62%;
  background:radial-gradient(circle at 34% 24%,#444a50 0,#30353a 38%,#202428 75%,#191c1f 100%);
  box-shadow:inset 7px 8px 19px rgba(255,255,255,.04),inset -10px -12px 24px rgba(0,0,0,.32),0 12px 24px rgba(0,0,0,.28);
}
.rune-stone-grain{position:absolute;inset:0;opacity:.25;background:repeating-radial-gradient(circle at 40% 30%,transparent 0 6px,rgba(255,255,255,.025) 7px,transparent 8px 15px)}
.rune-glyph{position:relative;color:#d7c9a3;font:400 4.15rem/1 "Segoe UI Historic",Georgia,serif;text-shadow:0 2px 2px #000,0 0 13px rgba(215,201,163,.14)}
.rune-stone small{position:relative;color:#89877e;font:600 .58rem/1 Georgia,serif;letter-spacing:.14em;text-transform:uppercase}
@keyframes runeDrop{from{opacity:0;transform:translateY(-28px) rotate(-10deg) scale(.9)}to{opacity:1;transform:none}}
.rune-reading{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}
.rune-reading-card{padding:14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.rune-reading-card header{display:flex;align-items:center;gap:11px;margin-bottom:8px}.rune-reading-glyph{display:grid;place-items:center;width:42px;height:42px;border:1px solid color-mix(in srgb,#a78960 50%,var(--border));border-radius:50%;font:1.55rem "Segoe UI Historic",serif;color:#b6976d}.rune-reading-card header small{color:var(--muted);font-size:.62rem;letter-spacing:.08em}.rune-reading-card h4{font-size:1rem}.rune-reading-card h4 span{color:var(--muted);font:500 .65rem Georgia,serif;margin-left:5px}.rune-keywords{display:flex;gap:5px;flex-wrap:wrap;margin:6px 0 9px}.rune-keywords span{padding:2px 7px;border-radius:999px;background:color-mix(in srgb,#a78960 11%,var(--surface));border:1px solid color-mix(in srgb,#a78960 25%,var(--border));font-size:.65rem}.rune-reading-card p{font-size:.78rem;line-height:1.75}.rune-shadow{margin-top:7px;color:var(--muted)}
.rune-synthesis{grid-column:1/-1;padding:16px 18px;border-radius:11px;border:1px solid color-mix(in srgb,#a78960 38%,var(--border));background:linear-gradient(120deg,color-mix(in srgb,#a78960 7%,var(--surface)),var(--surface))}.rune-synthesis small{font:700 .62rem Georgia,serif;letter-spacing:.18em;color:#a78960}.rune-synthesis h4{margin:2px 0 5px;font-family:Georgia,"Yu Mincho",serif}.rune-synthesis p{font-size:.8rem;line-height:1.8}

/* I Ching */
.iching-app{--yi-red:#9f4238;--yi-paper:#e7dcc1;--yi-ink:#24221c}
.iching-hero{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) 150px;align-items:center;min-height:150px;padding:21px 25px;border-radius:16px;overflow:hidden;
  border:1px solid color-mix(in srgb,#b39a6e 36%,var(--border));background:linear-gradient(112deg,#e8dfc9,#d7ccb0);color:#26231d;box-shadow:0 13px 32px rgba(0,0,0,.12)
}
.iching-hero::before{content:"";position:absolute;inset:0;opacity:.22;background:repeating-linear-gradient(87deg,transparent 0 9px,rgba(76,61,37,.08) 10px,transparent 11px 23px)}
.iching-hero > div:first-child{position:relative;z-index:1;max-width:780px}.iching-hero h2{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:1.8rem;letter-spacing:.12em;margin-bottom:5px}.iching-hero p{font-size:.81rem;line-height:1.8;color:#5b5446}.iching-seal{position:relative;z-index:1;justify-self:center;width:105px;height:105px;border:2px solid rgba(126,47,41,.7);display:grid;place-items:center;transform:rotate(-3deg);box-shadow:inset 0 0 0 5px rgba(126,47,41,.08)}.iching-seal::before{content:"";position:absolute;inset:7px;border:1px solid rgba(126,47,41,.45)}.iching-seal span{font:700 3.1rem "Yu Mincho",serif;color:#853b35}.iching-seal small{position:absolute;right:8px;bottom:5px;color:#853b35;font-family:"Yu Mincho",serif}
.iching-primary{background:#8d443b!important;color:#fff!important;border-color:#a85b50!important}.iching-primary:hover{background:#9d4d43!important}
.iching-paper{position:relative;min-height:330px;padding:30px 42px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(108deg,#ddd3bb,#eee6d5 48%,#d9cfb7);color:#27231d}
.iching-paper::before{content:"";position:absolute;inset:0;opacity:.28;background:repeating-linear-gradient(4deg,transparent 0 12px,rgba(77,64,42,.05) 13px,transparent 14px 28px)}
.iching-watermark{position:absolute;right:6%;top:50%;transform:translateY(-50%);font-size:13rem;color:rgba(65,54,37,.035);line-height:1}
.iching-lines{position:relative;z-index:1;width:min(610px,100%);display:grid;gap:7px}.iching-empty{display:grid;place-items:center;gap:3px;text-align:center;color:#796e59}.iching-empty span{font-size:4.5rem;color:#9f8e70}.iching-empty strong{font-family:"Yu Mincho",serif;color:#4f493d}.iching-empty small{font-size:.72rem}
.iching-line{display:grid;grid-template-columns:28px minmax(230px,1fr) 36px 112px;align-items:center;gap:10px;min-height:35px;animation:yiLineIn .34s ease both;animation-delay:calc(var(--i)*55ms)}.iching-line-no{font:700 .66rem Georgia,serif;color:#817661;text-align:center}.iching-line-mark{height:15px;display:flex;gap:24px;align-items:center}.iching-line-mark i{display:block;height:9px;background:#28251f;box-shadow:0 1px 0 rgba(255,255,255,.2)}.iching-line.yang .iching-line-mark i{width:100%}.iching-line.yin .iching-line-mark i{width:calc(50% - 12px)}.iching-line.changing .iching-line-mark i{background:#6f332d}.iching-change-mark{font:700 1.1rem Georgia,serif;color:#8b3a32;text-align:center}.iching-line small{font:600 .62rem/1.3 ui-monospace,"Cascadia Mono",monospace;color:#877a63}
@keyframes yiLineIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.iching-reading{padding:12px}.iching-hex-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.iching-hex-card{position:relative;padding:17px 18px;border:1px solid color-mix(in srgb,#a98c5c 30%,var(--border));border-radius:10px;background:linear-gradient(125deg,color-mix(in srgb,#d0ba8d 7%,var(--surface)),var(--surface));overflow:hidden}.iching-hex-card::after{content:"易";position:absolute;right:12px;bottom:-24px;font:700 7rem "Yu Mincho",serif;color:color-mix(in srgb,#9a7049 5%,transparent);pointer-events:none}.iching-hex-card > small{color:#967a53;font:700 .62rem Georgia,serif;letter-spacing:.16em}.iching-hex-number{margin-top:7px;color:var(--muted);font-size:.66rem}.iching-hex-card h3{font:700 1.4rem "Yu Mincho","Hiragino Mincho ProN",serif;letter-spacing:.06em}.iching-hex-card > strong{display:block;margin:2px 0 9px;color:#9b5a43;font-size:.75rem}.iching-trigrams{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.iching-trigrams span{padding:3px 8px;border:1px solid var(--border);border-radius:999px;font-size:.66rem;color:var(--muted);background:var(--surface-2)}.iching-hex-card p{position:relative;z-index:1;font-size:.79rem;line-height:1.8}.iching-hex-card.is-changed{border-color:color-mix(in srgb,#8b3e35 38%,var(--border))}.iching-change-panel{margin-top:10px;padding:15px 17px;border-left:3px solid #96473d;border-radius:8px;background:var(--surface-2)}.iching-change-panel small{color:#995246;font:700 .61rem Georgia,serif;letter-spacing:.16em}.iching-change-panel h4{margin:2px 0 5px}.iching-change-panel p{font-size:.78rem;line-height:1.78}.iching-change-panel p+p{margin-top:6px;color:var(--muted)}

/* Lenormand */
.lenormand-app{--len-cream:#efe3c4;--len-gold:#b69b65;--len-red:#8b4f4f;--len-green:#52655b}
.lenormand-hero{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) 205px;align-items:center;min-height:150px;padding:21px 25px;border-radius:16px;overflow:hidden;
  border:1px solid color-mix(in srgb,#b69b65 43%,var(--border));color:#efe9da;background:linear-gradient(118deg,#23302d,#2f3b37 56%,#1a2624);box-shadow:0 14px 36px rgba(0,0,0,.18)
}
.lenormand-hero::before{content:"";position:absolute;inset:8px;border:1px solid rgba(213,190,138,.16);border-radius:11px;pointer-events:none}.lenormand-hero::after{content:"❦";position:absolute;left:50%;bottom:-70px;font:8rem Georgia,serif;color:rgba(226,204,155,.035)}.lenormand-hero > div:first-child{position:relative;z-index:1;max-width:760px}.lenormand-hero h2{font:700 1.75rem Georgia,"Yu Mincho",serif;letter-spacing:.06em;margin-bottom:5px}.lenormand-hero p{color:#b9bdb4;font-size:.81rem;line-height:1.8}.lenormand-hero-cards{position:relative;z-index:1;height:110px;display:flex;align-items:center;justify-content:center}.lenormand-hero-cards span{position:absolute;width:68px;height:98px;display:grid;place-items:center;border:1px solid #bda773;border-radius:5px;background:#e8ddc1;color:#544939;font:2rem Georgia,serif;box-shadow:0 9px 18px rgba(0,0,0,.28)}.lenormand-hero-cards span:nth-child(1){transform:translateX(-48px) rotate(-10deg)}.lenormand-hero-cards span:nth-child(2){z-index:2;transform:translateY(-5px)}.lenormand-hero-cards span:nth-child(3){transform:translateX(48px) rotate(10deg)}
.lenormand-primary{background:#456159!important;color:#fff!important;border-color:#647b74!important}.lenormand-primary:hover{background:#526f66!important}
.lenormand-table{position:relative;min-height:330px;padding:28px 22px;overflow:auto;background:radial-gradient(circle at 50% 30%,rgba(201,181,133,.08),transparent 34%),linear-gradient(90deg,#16221f,#1b2925 50%,#15211e)}.lenormand-table::before{content:"";position:absolute;inset:13px;border:1px solid rgba(197,176,127,.12);pointer-events:none}.lenormand-table-ornament{position:absolute;inset:0;display:grid;place-items:center;font:12rem Georgia,serif;color:rgba(211,190,141,.026);pointer-events:none}.lenormand-board{position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--len-cols,3),132px);justify-content:center;gap:13px;min-width:max-content}.lenormand-empty{grid-column:1/-1;min-width:520px;min-height:245px;display:grid;place-items:center;align-content:center;gap:3px;text-align:center;color:#858e87}.lenormand-empty span{font-size:3rem;color:#a58e60}.lenormand-empty strong{font-family:Georgia,"Yu Mincho",serif;color:#bfc0b7}.lenormand-empty small{font-size:.72rem}.len-card{position:relative;width:132px;height:205px;padding:8px;border:1px solid #b79c68;border-radius:6px;background:#e7dcc0;color:#403a30;box-shadow:0 10px 20px rgba(0,0,0,.3);animation:lenDeal .38s ease both;animation-delay:calc(var(--i)*55ms)}.len-card::before{content:"";position:absolute;inset:5px;border:1px solid rgba(91,75,47,.24);border-radius:3px;pointer-events:none}.len-card-number{position:absolute;top:10px;left:11px;font:700 .65rem Georgia,serif;color:#806f50}.len-card-art{height:116px;margin:17px 5px 3px;display:grid;place-items:center;border-bottom:1px solid rgba(93,74,44,.24);background:radial-gradient(circle,#f2e8ce,#ddd0b0)}.len-card-art span{font:2.8rem Georgia,"Segoe UI Symbol",serif;color:#5d5140}.len-card-name{text-align:center;display:grid;line-height:1.2}.len-card-name small{font:600 .52rem Georgia,serif;letter-spacing:.1em;color:#85765c}.len-card-name strong{font:700 .86rem "Yu Mincho",serif}.len-card-pos{position:absolute;left:50%;bottom:-23px;transform:translateX(-50%);white-space:nowrap;color:#aead9f;font-size:.6rem;letter-spacing:.08em}.lenormand-board{padding-bottom:24px}@keyframes lenDeal{from{opacity:0;transform:translateY(-18px) rotate(-4deg)}to{opacity:1;transform:none}}
.lenormand-reading{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:12px}.len-reading-card{padding:13px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2)}.len-reading-card header{display:flex;gap:9px;align-items:center;margin-bottom:7px}.len-reading-card header>span{display:grid;place-items:center;width:31px;height:31px;border:1px solid color-mix(in srgb,#b69b65 42%,var(--border));border-radius:50%;color:#a18657;font:700 .65rem Georgia,serif}.len-reading-card header small{color:var(--muted);font-size:.6rem}.len-reading-card h4{font-size:.9rem}.len-keywords{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:7px}.len-keywords span{font-size:.62rem;padding:2px 6px;border-radius:999px;border:1px solid var(--border);background:var(--surface)}.len-reading-card p{font-size:.75rem;line-height:1.75}.len-chain{grid-column:1/-1;padding:15px 17px;border:1px solid color-mix(in srgb,#b69b65 38%,var(--border));border-radius:10px;background:linear-gradient(120deg,color-mix(in srgb,#b69b65 6%,var(--surface)),var(--surface))}.len-chain small{color:#a78d5d;font:700 .61rem Georgia,serif;letter-spacing:.17em}.len-chain h4{margin:2px 0 5px;font-family:Georgia,"Yu Mincho",serif}.len-chain p{font-size:.78rem;line-height:1.8}.len-pair-strip{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}.len-pair-strip span{padding:3px 7px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);font-size:.61rem;color:var(--muted)}.len-pair-strip b{color:#a98d5d}

@media(max-width:1000px){
  .divination-console{flex-wrap:wrap}.divination-field.grow{min-width:calc(100% - 250px)}.divination-actions{margin-left:auto}
  .rune-board[data-spread="five"],.rune-board[data-spread="hagalaz5"]{grid-template-columns:repeat(5,minmax(100px,1fr))}.rune-stone{width:108px;height:132px}.rune-glyph{font-size:3.5rem}
  .lenormand-reading{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .divination-app{padding-inline:10px}.divination-switcher{width:100%;border-radius:10px;display:grid;grid-template-columns:repeat(4,1fr)}.divination-switcher button{padding-inline:5px}
  .rune-hero,.iching-hero,.lenormand-hero{grid-template-columns:1fr}.rune-hero-wheel,.iching-seal,.lenormand-hero-cards{display:none}
  .divination-console{align-items:stretch}.divination-field,.divination-field.grow{min-width:100%;width:100%}.divination-actions{width:100%;margin:0}.divination-actions .button{flex:1 1 0}
  .divination-section-head{align-items:flex-start;flex-direction:column;gap:4px}.divination-section-head p{text-align:left}
  .rune-board,.rune-board[data-spread="five"]{display:flex;justify-content:flex-start;overflow-x:auto;gap:14px;padding:4px 3px 14px}.rune-stone-wrap{flex:0 0 112px}.rune-reading{grid-template-columns:1fr}
  .iching-paper{padding-inline:18px}.iching-line{grid-template-columns:23px minmax(150px,1fr) 26px}.iching-line small{display:none}.iching-line-mark{gap:16px}.iching-line.yin .iching-line-mark i{width:calc(50% - 8px)}.iching-hex-pair{grid-template-columns:1fr}
  .lenormand-table{padding-inline:14px}.lenormand-reading{grid-template-columns:1fr}.lenormand-empty{min-width:280px}
}
@media(max-width:480px){
  .divination-switcher{grid-template-columns:repeat(2,1fr)}
  .divination-actions{flex-direction:column}.divination-actions .button{width:100%}
  .rune-hero,.iching-hero,.lenormand-hero{padding:17px}.rune-hero h2,.iching-hero h2,.lenormand-hero h2{font-size:1.45rem}
  .iching-line-mark{gap:11px}.iching-line.yin .iching-line-mark i{width:calc(50% - 6px)}
}


/* ===== deliberately suspicious divination modes ===== */
.rune-board[data-spread="hagalaz5"]{position:relative;isolation:isolate}
.rune-board[data-spread="hagalaz5"]::before{content:"";position:absolute;inset:-26px -42px;z-index:-1;pointer-events:none;background:repeating-linear-gradient(118deg,transparent 0 18px,rgba(189,211,220,.08) 19px 21px,transparent 22px 41px);filter:blur(.2px)}
.rune-board[data-spread="hagalaz5"] .rune-stone{box-shadow:0 14px 28px rgba(0,0,0,.45),0 0 0 1px rgba(205,226,232,.09),0 0 22px rgba(171,199,208,.08)}
.rune-board[data-spread="hagalaz5"] .rune-glyph{color:#d9e4e5;text-shadow:0 0 13px rgba(208,232,238,.18)}
.rune-chaos-synthesis{border-left-color:#879fa5!important;background:linear-gradient(110deg,color-mix(in srgb,#8aa0a5 9%,var(--surface-2)),var(--surface-2))!important}
.rune-chaos-synthesis small{color:#9fb1b5!important}

.iching-lines[data-mode="heavenflip"]{position:relative}
.iching-lines[data-mode="heavenflip"]::before{content:"乾坤";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);font:700 7rem "Yu Mincho",serif;letter-spacing:.12em;color:rgba(133,55,46,.055);pointer-events:none}
.iching-lines[data-mode="heavenflip"] .iching-line.changing .iching-line-mark i{background:#7f3029;box-shadow:0 0 8px rgba(127,48,41,.16)}
.iching-chaos-panel{border-left-width:5px!important;border-left-color:#7f3029!important;background:linear-gradient(105deg,rgba(127,48,41,.095),var(--surface-2))!important}
.iching-chaos-panel small{color:#9b4d43!important}

.lenormand-board[data-spread="coffin5"] .len-card{filter:saturate(.72) brightness(.89);box-shadow:0 13px 27px rgba(0,0,0,.42)}
.lenormand-board[data-spread="coffin5"] .len-card-art{background:radial-gradient(circle,#ddd2b9,#bfb39a)}
.lenormand-board[data-spread="coffin5"] .len-card-art span{color:#514c44;text-shadow:0 1px 0 rgba(255,255,255,.2)}
.len-coffin-chain{border-left-color:#81796a!important;background:linear-gradient(115deg,color-mix(in srgb,#81796a 9%,var(--surface-2)),var(--surface-2))!important}
.len-coffin-chain small{color:#9a907e!important}