/* 奇門遁甲 時盤 UI試作 — スタイル（index.html <style> から抽出・T-20260707-01） */
:root{
  --gold:#d9b25c; --gold-hi:#f6dc8a; --gold-dim:#8a6f3a;
  --paper:#e8dcc0; --mut:#9a8d70; --cyan:#aadfee;
  --red:#d96a5a; --seal:#a03325; --ink:#0a0807;
  /* ▼テーマトークン（既定=墨金）。着せ替え時は THEMES の cssVars がここを上書きする */
  --accent-rgb:217,178,92; --accent-hi-rgb:246,220,138;
  --cyan-rgb:170,223,238; --red-rgb:217,106,90;
  --paper-rgb:232,220,192; --mut-rgb:154,141,112;
  --gate-kichi:#ffd97a; --gate-kichi-rgb:255,217,122;
  --gate-kyou:#ff9384; --gate-kyou-glow-rgb:255,120,100;
  --gate-hei:#d8cfb8; --pat-col:#d8c9a4;
  --chi-col:#c6b28b; --chi-rgb:198,178,139;
  --star-col:#e8d6a8; --pillar-col:#eadfbf;
  --kyou-glow-rgb:255,140,120; --kyou-deep-rgb:190,60,45;
  --seal-a:#b8442f; --seal-b:#8c2a1c; --seal-text:#f3e2ce;
  --bg-0:#191410; --bg-1:#0c0a08; --bg-2:#060504;
  --board-bg-a:rgba(26,20,12,.92); --board-bg-b:rgba(12,9,6,.94);
  --cell-bg-a:rgba(46,36,20,.35); --cell-bg-b:rgba(10,8,5,.2);
  --center-bg-a:rgba(58,44,22,.5); --center-bg-b:rgba(12,9,6,.3);
  --panel-a:rgba(24,18,10,.97); --panel-b:rgba(10,8,6,.97);
  --flash-a:rgba(255,236,180,.5); --flash-b:rgba(255,220,140,.12);
  --pulse-in:rgba(70,52,22,.55);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh; color:var(--paper);
  background:radial-gradient(1100px 700px at 50% 40%, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-2) 100%);
  font-family:'Shippori Mincho','Yu Mincho','游明朝',serif;
  overflow-x:hidden;
}
body::before{ /* vignette */
  content:''; position:fixed; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(0,0,0,.5) 100%);
}
canvas#bg{position:fixed; inset:0; z-index:0}
#trail,#fx{position:fixed; inset:0; pointer-events:none}
#trail{z-index:30} #fx{z-index:31}

/* ---- 背景の法陣（八卦・十二支の輪） ---- */
#rings{position:fixed; inset:0; display:grid; place-items:center; z-index:0; pointer-events:none}
#rings svg{position:absolute; width:min(96vmin,900px); height:min(96vmin,900px);
  filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.45));}
#ringBase{opacity:.13; animation:spin 110s linear infinite; transition:opacity .8s}
#ringBurst{opacity:0; animation:spinR 9s linear infinite; transition:opacity 1.4s}
body.casting #ringBase{opacity:.17}
body.casting #ringBurst{opacity:.20; transition:opacity .35s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinR{to{transform:rotate(-360deg)}}

/* ---- 掃過する巨大文字 ---- */
#sweep{position:fixed; inset:0; display:grid; place-items:center; pointer-events:none; z-index:35;
  font-family:'Yuji Syuku',serif; font-size:54vmin; line-height:1; white-space:nowrap;
  color:rgba(var(--accent-hi-rgb),.14); text-shadow:0 0 70px rgba(var(--accent-rgb),.38); opacity:0}
#sweep.go{animation:sweep .95s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes sweep{
  0%{opacity:0; transform:translateX(46vw) scale(1.12) skewX(-6deg)}
  16%{opacity:1} 80%{opacity:.85}
  100%{opacity:0; transform:translateX(-52vw) scale(.94) skewX(-6deg)}
}

/* ---- ヘッダ ---- */
header{position:relative; z-index:20; display:flex; flex-wrap:wrap; align-items:center;
  gap:8px 18px; padding:16px 22px 8px}
h1{font-family:'Yuji Syuku',serif; font-weight:400; margin:0;
  font-size:clamp(24px,4vmin,38px); letter-spacing:.32em; color:var(--gold-hi);
  text-shadow:0 0 18px rgba(var(--accent-rgb),.35)}
h1 small{font-size:.42em; letter-spacing:.18em; color:var(--mut); margin-left:.6em}
.badge{font-size:11.5px; letter-spacing:.12em; color:#e8b7a6; padding:3px 9px;
  border:1px solid rgba(var(--red-rgb),.55); border-radius:3px; background:rgba(120,40,30,.18)}
.controls{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-left:auto}
input[type=datetime-local],select{
  background:#141009; border:1px solid var(--gold-dim); color:#e8dcc0;
  padding:7px 9px; border-radius:4px; font-family:inherit; font-size:14px; color-scheme:dark}
button{cursor:pointer; background:linear-gradient(180deg,#241c0e,#171106);
  border:1px solid var(--gold-dim); color:#f0dfae; padding:8px 13px; border-radius:4px;
  font-family:inherit; font-size:13.5px; letter-spacing:.14em;
  transition:box-shadow .25s, transform .12s}
button:hover{box-shadow:0 0 14px rgba(217,178,92,.35)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.35; cursor:default; box-shadow:none}
#cast{font-family:'Yuji Syuku',serif; font-size:17px; padding:8px 20px 8px 26px;
  letter-spacing:.55em; border-color:var(--gold); color:#ffe9a8}

/* ---- 盤 ---- */
main{position:relative; z-index:10; display:flex; justify-content:center; padding:10px 12px 0}
#stage{position:relative}
#gridfx{position:absolute; pointer-events:none; overflow:visible; opacity:0; z-index:5}
#gridfx.draw{opacity:1}
#gridfx.fade{opacity:0; transition:opacity .9s}
#gridfx line,#gridfx rect{fill:none; stroke:var(--gold-hi); stroke-width:1.5;
  filter:drop-shadow(0 0 5px rgba(var(--accent-hi-rgb),.8))}
#gridfx.draw line,#gridfx.draw rect{stroke-dasharray:1; stroke-dashoffset:1; animation:drawline .7s ease forwards}
@keyframes drawline{to{stroke-dashoffset:0}}

#board{position:relative; width:min(76vmin,690px); aspect-ratio:1/1;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:5px; padding:9px;
  background:linear-gradient(160deg, var(--board-bg-a), var(--board-bg-b));
  border:1px solid rgba(var(--accent-rgb),.65);
  outline:1px solid rgba(var(--accent-rgb),.22); outline-offset:7px;
  box-shadow:0 0 90px rgba(var(--accent-rgb),.10), inset 0 0 70px rgba(0,0,0,.65)}
#board.shake{animation:shake .16s linear}
@keyframes shake{
  0%,100%{transform:translate(0,0)} 25%{transform:translate(2.5px,-2px)}
  50%{transform:translate(-2px,1.5px)} 75%{transform:translate(1.5px,2px)}}
#board.pulse{animation:boardPulse .85s ease-out}
@keyframes boardPulse{
  30%{box-shadow:0 0 160px rgba(var(--accent-hi-rgb),.5), inset 0 0 60px var(--pulse-in)}}

.cell{position:relative; border:1px solid rgba(var(--accent-rgb),.30); overflow:hidden; cursor:pointer;
  background:radial-gradient(120% 120% at 50% 32%, var(--cell-bg-a), var(--cell-bg-b) 70%)}
.cell:hover{border-color:rgba(var(--accent-hi-rgb),.7)}
.cell.gr-kichi{box-shadow:inset 0 0 36px rgba(var(--accent-rgb),.16)}
.cell.gr-kyou{box-shadow:inset 0 0 36px rgba(var(--kyou-deep-rgb),.16); border-color:rgba(var(--red-rgb),.42)}
.cell .inner{position:absolute; inset:0; padding:5% 6%; opacity:0; transform:scale(1.55); filter:blur(7px)}
.cell.locked .inner{opacity:1; transform:scale(1); filter:blur(0);
  transition:opacity .38s ease, transform .5s cubic-bezier(.2,1.5,.4,1), filter .38s ease}
#board.skipfast .cell.locked .inner{transition-duration:.15s,.15s,.15s}
.cell.ph .inner{opacity:1; transform:none; filter:none}
.cell.ph{cursor:default}

.god{position:absolute; top:5%; left:6%; font-family:'Yuji Syuku',serif; color:var(--cyan);
  font-size:clamp(12px,3vmin,23px); text-shadow:0 0 10px rgba(var(--cyan-rgb),.45)}
.dir{position:absolute; top:6%; right:7%; color:var(--mut);
  font-size:clamp(9px,1.8vmin,12px); letter-spacing:.22em}
.stems{position:absolute; left:8%; top:50%; transform:translateY(-54%);
  display:flex; flex-direction:column; align-items:center}
.ten{font-family:'Yuji Syuku',serif; font-size:clamp(30px,8.2vmin,62px); line-height:1.02;
  color:var(--gold-hi);
  text-shadow:0 0 16px rgba(var(--accent-hi-rgb),.55), 0 0 44px rgba(var(--accent-rgb),.3)}
.chi{font-family:'Yuji Syuku',serif; font-size:clamp(17px,4.4vmin,34px); line-height:1.1;
  color:var(--chi-col); text-shadow:0 0 10px rgba(var(--chi-rgb),.3)}
.sg{position:absolute; right:8%; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px}
.star{font-family:'Yuji Syuku',serif; font-size:clamp(13px,3.3vmin,25px); color:var(--star-col)}
.gate{font-family:'Yuji Syuku',serif; font-size:clamp(14px,3.6vmin,27px)}
.gate.g-kichi{color:var(--gate-kichi); text-shadow:0 0 12px rgba(var(--gate-kichi-rgb),.6)}
.gate.g-hei{color:var(--gate-hei)}
.gate.g-kyou{color:var(--gate-kyou); text-shadow:0 0 12px rgba(var(--gate-kyou-glow-rgb),.45)}
.pat{position:absolute; left:6%; bottom:calc(5% + 1.55em); font-size:clamp(10px,2.1vmin,14px);
  color:var(--pat-col); letter-spacing:.04em}
.pat em{font-style:normal; margin-left:.35em}
.pat em.m-kichi{color:var(--gate-kichi)} .pat em.m-kyou{color:var(--gate-kyou)}
.score{position:absolute; left:6%; bottom:5%; font-size:clamp(9px,1.9vmin,12.5px);
  color:var(--mut); font-variant-numeric:tabular-nums; letter-spacing:.05em}
.sealn{position:absolute; right:5%; bottom:5%; width:1.4em; height:1.4em;
  font-size:clamp(13px,2.9vmin,21px); font-family:'Yuji Syuku',serif; display:grid; place-items:center;
  color:var(--seal-text); background:radial-gradient(circle at 35% 30%, var(--seal-a), var(--seal-b));
  border-radius:15%; transform:rotate(-3deg);
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 1px 6px rgba(0,0,0,.5), inset 0 0 6px rgba(255,190,160,.28)}
.locked .sealn{animation:stamp .5s cubic-bezier(.2,1.6,.35,1) .16s backwards}
@keyframes stamp{
  0%{transform:rotate(-14deg) scale(2.8); opacity:0}
  55%{opacity:1} 100%{transform:rotate(-3deg) scale(1)}}

.cell.center{cursor:default; border-color:rgba(var(--accent-hi-rgb),.5);
  background:radial-gradient(closest-side, var(--center-bg-a), var(--center-bg-b))}
.center .inner{display:flex; flex-direction:column; align-items:center;
  justify-content:space-evenly; padding:4%; position:absolute; inset:0}
.kyoku{font-family:'Yuji Syuku',serif; font-size:clamp(13px,3.3vmin,25px); color:var(--gold-hi);
  letter-spacing:.14em; white-space:nowrap; text-shadow:0 0 14px rgba(var(--accent-hi-rgb),.5)}
.pillars{writing-mode:vertical-rl; font-family:'Yuji Syuku',serif;
  font-size:clamp(12px,2.9vmin,21px); line-height:1.2; color:var(--pillar-col); max-height:5.2em}
.pillars span::before{content:attr(data-l); display:block; font-size:.44em; color:var(--mut); letter-spacing:0}
.sub{font-size:clamp(9px,2vmin,12.5px); color:var(--mut); letter-spacing:.12em; text-align:center; line-height:1.7}
.chic{font-family:'Yuji Syuku',serif; font-size:clamp(18px,4.6vmin,34px); color:var(--chi-col)}
.chic i{font-style:normal; font-size:.4em; color:var(--mut); vertical-align:middle; margin-right:.5em; letter-spacing:.2em}

#watermark{position:absolute; left:2px; bottom:-26px; font-size:11px;
  color:rgba(var(--paper-rgb),.42); letter-spacing:.14em}
#hint{position:absolute; top:calc(100% + 30px); width:100%; text-align:center;
  font-size:12.5px; color:rgba(var(--paper-rgb),.55); letter-spacing:.2em;
  animation:hintFloat 3.2s ease-in-out infinite}
body.cast-done #hint{animation:none; opacity:0; transition:opacity .8s}
@keyframes hintFloat{50%{opacity:.45}}

footer{position:relative; z-index:10; text-align:center; padding:44px 16px 18px;
  font-size:11.5px; color:rgba(var(--mut-rgb),.9); line-height:1.9; max-width:780px; margin:0 auto}

/* ---- 完成後の呼吸 ---- */
body.cast-done .cell.gr-kichi .ten{animation:breathe 3.6s ease-in-out infinite}
@keyframes breathe{50%{text-shadow:0 0 24px rgba(var(--accent-hi-rgb),.9), 0 0 64px rgba(var(--accent-rgb),.5)}}
body.cast-done .cell.gr-kyou .ten{animation:breatheR 4.4s ease-in-out infinite}
@keyframes breatheR{50%{text-shadow:0 0 22px rgba(var(--kyou-glow-rgb),.75), 0 0 56px rgba(var(--kyou-deep-rgb),.4)}}

/* ---- 全画面フラッシュ ---- */
#flash{position:fixed; inset:0; pointer-events:none; z-index:50; opacity:0;
  background:radial-gradient(circle at 50% 45%, var(--flash-a), var(--flash-b) 45%, transparent 70%);
  transition:opacity .5s}
#flash.on{opacity:1; transition:opacity .06s}

/* ---- 詳細パネル ---- */
#detail{position:fixed; top:0; right:0; height:100%; width:min(320px,86vw); z-index:40;
  background:linear-gradient(200deg, var(--panel-a), var(--panel-b));
  border-left:1px solid var(--gold-dim); padding:22px 20px;
  transform:translateX(103%); transition:transform .3s ease; overflow:auto}
#detail.open{transform:none}
#detail h2{font-family:'Yuji Syuku',serif; font-weight:400; color:var(--gold-hi);
  letter-spacing:.2em; font-size:22px; margin:.2em 0 .7em}
#detail dl{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:14px; margin:0}
#detail dt{color:var(--mut); letter-spacing:.15em}
#detail dd{margin:0}
#dClose{position:absolute; top:10px; right:12px; background:none; border:none;
  font-size:20px; color:var(--mut); padding:4px 10px}
.demoNote{margin-top:16px; font-size:11px; color:#c9948a; line-height:1.8;
  border-top:1px dashed rgba(var(--red-rgb),.4); padding-top:10px}

/* ---------- v1.1: 経度・評価トグル・トースト・3Dキャンバス ---------- */
#lonWrap{display:flex; align-items:center; gap:6px; font-size:12.5px;
  color:var(--mut); letter-spacing:.1em}
#lon{width:76px; background:#141009; border:1px solid var(--gold-dim); color:#e8dcc0;
  padding:7px 6px; border-radius:4px; font-family:inherit; font-size:13.5px; color-scheme:dark}
#geoBtn{padding:6px 8px; font-size:12px}
#lonOff{font-variant-numeric:tabular-nums; color:var(--mut); font-size:12px; white-space:nowrap}
#toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(8px);
  z-index:60; background:rgba(20,15,8,.94); border:1px solid var(--gold-dim);
  color:var(--paper); padding:9px 16px; border-radius:5px; font-size:13px;
  letter-spacing:.08em; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s}
#toast.on{opacity:1; transform:translateX(-50%) translateY(0)}
/* 評価表示は開発者設定（config.js judgeDisplay・D-0018）: marks=数値のみ隠す／off=全判定要素を隠す */
body.judge-marks .score{display:none}
body.judge-off .score, body.judge-off .pat em{display:none}
body.judge-off .gate{color:var(--gate-hei); text-shadow:none}
body.judge-off .cell.gr-kichi, body.judge-off .cell.gr-kyou{
  box-shadow:inset 0 0 30px rgba(0,0,0,.28); border-color:rgba(var(--accent-rgb),.30)}
body.judge-off .cell .ten{animation:none!important}
#gl{position:fixed; inset:0; z-index:30; pointer-events:none; opacity:1; transition:opacity .6s}

/* ---------- 認証ウィジェット（React化・D-0027） ---------- */
.authArea{position:relative; display:flex; align-items:center; gap:8px}
.userchip{max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12px; color:var(--gold-hi); letter-spacing:.05em;
  border:1px solid var(--gold-dim); border-radius:999px; padding:5px 12px;
  background:rgba(20,15,8,.6)}
.authpop{position:absolute; top:calc(100% + 8px); right:0; z-index:45; width:240px;
  background:linear-gradient(200deg, rgba(24,18,10,.97), rgba(10,8,6,.97));
  border:1px solid var(--gold-dim); border-radius:6px; padding:14px;
  display:flex; flex-direction:column; gap:8px; box-shadow:0 8px 30px rgba(0,0,0,.5)}
.authpop label{display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--mut); letter-spacing:.1em}
.authpop input{background:#141009; border:1px solid var(--gold-dim); color:#e8dcc0;
  padding:6px 8px; border-radius:4px; font-family:inherit; font-size:13px}
.authBtns{display:flex; gap:8px}
.authBtns button{flex:1}
.authErr{font-size:11.5px; color:#ff9384; line-height:1.6}
.authNote{font-size:10.5px; color:var(--mut); line-height:1.7}

@media (max-width:720px){
  header{padding:12px 12px 6px}
  .controls{margin-left:0}
  #board{width:min(94vmin,94vw)}
  #detail{top:auto; bottom:0; height:auto; max-height:46vh; width:100%;
    border-left:none; border-top:1px solid var(--gold-dim); transform:translateY(103%)}
  #detail.open{transform:none}
}
@media (prefers-reduced-motion:reduce){
  #ringBase,#ringBurst,#hint{animation:none}
}