@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=M+PLUS+1p:wght@500;800&display=swap');
/* ============================================================
   theme-neon.css — 正式な見た目「ネオン・サイバー」（D-367・2026-10-13 オーナー「ネオンでいきましょう！！」）
   ★theme-v2.css の「後」に読む上書きの1枚★ 配置・ボタンの場所・流れは変えず、色と形だけ。
   おかしければ、各ページの <link rel="stylesheet" href="/theme-neon.css"> を1行消せば theme-v2（黒×金）に戻る。管理画面には読ませない
   ★文字の見やすさは全部の文字で測ってから出す★（明るい・暗いの両方・WCAG 4.5／大きい字 3.0）
   黒〜紫の地にネオン（暗い配色）／白〜薄紫の地に濃いネオン色（明るい配色）。格子・角を斜めに切った板とボタン
   ★色は必ず下の変数を通す★（明るい配色では、ネオンの桃・水色を濃くして白地でも読めるようにしている） */
:root[data-theme="dark"] {
  --bg:#06040d; --card:#0d0a1a; --field:#130f24; --hover:#1b1532;
  --line:rgba(255,79,168,.32); --line2:rgba(63,240,255,.38); --ink:#f6f2ff; --sub:#b4abd6;
  --gold:#ff5cae; --onGold:#1a0612; --goldGrad:linear-gradient(90deg,#ff5cae,#c77dff); /* 主役のボタンの塗り。暗い配色は明るいネオンに濃い字 */ --goldSoft:rgba(255,79,168,.14); --goldLine:rgba(255,79,168,.7);
  --sk-c1:#ff4fa8; --sk-c2:#3ff0ff; --sk-c2ink:#3ff0ff; --sk-part:#6b3fd0; --sk-header:rgba(6,4,13,.78); --sk-grid:rgba(140,100,255,.08);
  --sk-blob1:rgba(255,79,168,.22); --sk-blob2:rgba(63,240,255,.16); --sk-btn:linear-gradient(90deg,#cf1f76,#7a2bd0); --sk-selBg:rgba(63,240,255,.14);
  color-scheme:dark;
}
:root:not([data-theme="dark"]) {
  --bg:#f5f2ff; --card:#ffffff; --field:#faf8ff; --hover:#efeaff;
  --line:rgba(214,31,128,.28); --line2:rgba(12,140,165,.4); --ink:#1a1033; --sub:#544a76;
  --gold:#c4176f; --onGold:#ffffff; --goldGrad:linear-gradient(90deg,#d61f80,#7a2fd8); /* 主役のボタンの塗り。明るい配色は濃いネオンに白い字 */ --goldSoft:rgba(214,31,128,.08); --goldLine:rgba(196,23,111,.6);
  --sk-c1:#d61f80; --sk-c2:#0c8ca5; --sk-c2ink:#066e82; --sk-part:#7a2fd8; --sk-header:rgba(250,248,255,.85); --sk-grid:rgba(120,80,255,.09);
  --sk-blob1:rgba(255,79,168,.18); --sk-blob2:rgba(63,200,255,.18); --sk-btn:linear-gradient(90deg,#d61f80,#7a2fd8); --sk-selBg:rgba(12,140,165,.10);
  color-scheme:light;
}
body { font-family:"M PLUS 1p", system-ui, sans-serif !important; background:var(--bg) !important;
  background-image:radial-gradient(800px 500px at 15% -10%, var(--sk-blob1), transparent 70%), radial-gradient(800px 500px at 95% 20%, var(--sk-blob2), transparent 70%),
    linear-gradient(var(--sk-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sk-grid) 1px, transparent 1px) !important;
  background-size:auto, auto, 32px 32px, 32px 32px !important; background-attachment:fixed !important; }
header { background:var(--sk-header) !important; border-bottom:1px solid var(--line) !important; }
.brand { font-family:"Orbitron", sans-serif !important; letter-spacing:.28em !important; color:var(--sk-c1) !important; }
:root[data-theme="dark"] .brand { color:#fff !important; text-shadow:0 0 6px #ff4fa8, 0 0 18px #ff4fa8, 0 0 36px rgba(255,79,168,.6); }
.card { background:var(--card) !important; border:1px solid var(--line) !important; border-radius:0 !important;
  clip-path:polygon(0 18px, 18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); box-shadow:0 0 40px var(--sk-blob1) !important; }
.secHead { font-weight:800 !important; letter-spacing:.12em !important; color:var(--ink) !important; }
.secHead b { font-family:"Orbitron", sans-serif; border-radius:4px !important; transform:skewX(-12deg); border:1px solid var(--sk-c2) !important; color:var(--sk-c2ink) !important; width:28px !important; }
:root[data-theme="dark"] .secHead b { box-shadow:0 0 12px rgba(63,240,255,.5); }
.tabs:not(#sources) button[aria-selected=true] { color:var(--ink) !important; border-bottom-color:var(--sk-c1) !important; }
#sources { background:transparent !important; border:1px solid var(--line2) !important; border-radius:0 !important; gap:6px !important; padding:6px !important; }
#sources button { border-radius:0 !important; clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%); background:var(--hover) !important; color:var(--sub) !important; }
#sources button[aria-selected=true] { background:var(--sk-btn) !important; color:#fff !important; box-shadow:none !important; }
#sources button[aria-selected=true] small { color:#fff !important; opacity:.92; }
.seg button { border-radius:0 !important; clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); color:var(--sub) !important; background:var(--field) !important; }
.seg button[aria-selected=true] { background:var(--sk-selBg) !important; border-color:var(--sk-c2) !important; color:var(--ink) !important; }
.seg button[aria-selected=true] .sub { color:var(--sk-c2ink) !important; }
textarea, select, input[type=text] { border-radius:0 !important; border-color:var(--line2) !important; background:var(--field) !important; color:var(--ink) !important; }
select option { background:var(--card) !important; color:var(--ink) !important; }
textarea:focus, select:focus { border-color:var(--sk-c2) !important; box-shadow:0 0 0 1px var(--sk-c2) !important; }
.slot .dropzone { border-radius:0 !important; border:1px dashed var(--sk-c2) !important; background:var(--sk-selBg) !important; }
.slot .dropzone .plus { color:var(--sk-c2ink) !important; }
#goRow #go { background:var(--sk-btn) !important; color:#fff !important; border:0 !important; border-radius:0 !important;
  clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%); padding:15px 46px !important; font-weight:900 !important; letter-spacing:.18em !important; box-shadow:0 0 30px var(--sk-blob1) !important; }
#goRow #go.working { background:var(--card) !important; color:var(--sk-c1) !important; }
/* 作る画面の残り */
.genPh { background:linear-gradient(var(--sk-grid) 1px, transparent 1px) 0 0/100% 6px, var(--field) !important; border:1px solid var(--sk-c2) !important; border-radius:0 !important;
  clip-path:polygon(0 14px,14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%); }
.genPh .genPhTx { color:var(--sk-c2ink) !important; font-weight:800; letter-spacing:.06em; }
#resultTitle { font-family:"Orbitron","M PLUS 1p",sans-serif; letter-spacing:.2em; color:var(--sk-c1); }
.grid figure { background:var(--card) !important; border:1px solid var(--line) !important; border-radius:0 !important;
  clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%); transition:border-color .2s; }
.grid figure:hover { border-color:var(--sk-c2) !important; }
.grid .said { color:var(--ink) !important; }
#pickerBox .inner, #bookPickBox .inner, #charBox .inner { background:var(--card) !important; border:1px solid var(--line); border-radius:0 !important; }
@media (max-width:560px){ #sources button{min-width:0 !important;padding:9px 6px !important;font-size:13px !important} #sources button small{white-space:normal !important;font-size:11px !important;text-align:center} #goRow #go{padding:14px 28px !important} }

/* ── お店の全画面へ（D-367）：金を直に書いていた所も、ネオンの塗りと字の色にそろえる ── */
#shortBox button.gold, .pendBtns button.gold, .bk-chip.on { background:var(--goldGrad) !important; border-color:transparent !important; color:var(--onGold) !important; }
.bk-card .acts .copy { white-space:nowrap; letter-spacing:0 !important; } /* ネオンの字は幅が広く「コピ／ー」と折り返した */

/* ── チビルクサ（D-368） ── */
.genPh { flex-direction:column; justify-content:center; }
.genPh .genChibi { position:relative; width:min(72%, 260px); aspect-ratio:1/1; object-fit:cover; border-radius:18px; display:block; margin:12px auto 0;
  box-shadow:0 0 0 1px var(--line), 0 0 28px var(--sk-blob1); }
/* ★横の枠は高さが足りず、チビと帯を縦に積むと上下が切れた（2026-10-13 オーナー）★ → 横に並べる */
.genPh.genWide { flex-direction:row; align-items:center; gap:4%; padding:0 5%; }
.genPh.genWide .genChibi { width:auto; height:72%; margin:0; flex:none; }
.genPh.genWide .gq { flex:1; min-width:0; width:auto; margin:0; }
.genPh.genWide .gq-h { flex-wrap:wrap; row-gap:4px; } .genPh.genWide .gq-pill, .genPh.genWide .gq-r { white-space:nowrap; }
#result { position:relative; }
.chibiDone { position:absolute; top:10px; right:12px; width:118px; height:118px; z-index:3; pointer-events:none; animation:chibiIn .45s cubic-bezier(.2,.9,.3,1.3) both; }
.chibiDone.bye { animation:chibiOut .5s ease-in forwards; }
.chibiDone .chibiDoneV { width:100%; height:100%; object-fit:cover; border-radius:50%; border:2px solid var(--sk-c1); box-shadow:0 0 22px var(--sk-blob1); }
@keyframes chibiIn { from { transform:scale(.3) translateY(20px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes chibiOut { to { transform:scale(.6) translateY(-10px); opacity:0; } }
@media (max-width:560px) { .chibiDone { width:84px; height:84px; top:8px; right:8px; } }
#offline .offChibi { width:min(60vw, 220px); aspect-ratio:1/1; object-fit:cover; border-radius:22px; display:block; margin:0 auto; box-shadow:0 0 30px var(--sk-blob1); }
@media (prefers-reduced-motion: reduce) { .chibiDone, .chibiDone.bye { animation:none; } }

/* ── モーション（D-367 追記）：時間の帯に直に書いてあった金・黄色を、ネオンの色に ── */
.tl-h { background:var(--sk-c2) !important; }
.tl-tseg:not(.base) { border-left-color:var(--sk-c2) !important; }
.tl-item.p { background:var(--sk-part) !important; color:#ffffff !important; }
.tlzoom .tlplay.on { color:var(--m-onacc, var(--onGold)) !important; }
#paneldock .panel { box-shadow:0 0 0 2px var(--sk-c1) inset !important; }