/* 新版の見た目（D-141）：今のアプリ（app/observer-design.css・viewer-shell.css）の基調を引き継ぐ。
   夜空の地・ガラスの板（backdrop-filter は使わない＝動く地図の上で重くなるため。今のアプリと同じ判断）・金は記録と目印だけ・ラベンダーは操作 */
@font-face{font-family:'Cormorant Garamond';src:url('assets/fonts/latin.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Shippori Mincho';src:url('assets/fonts/serif.woff2') format('woff2');font-weight:500 700;font-display:swap}
@font-face{font-family:'Zen Kaku Gothic New';src:url('assets/fonts/sans.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/mono.woff2') format('woff2');font-weight:400 500;font-display:swap}
:root{
  --c-space:#05071A;--c-space-2:#070A1D;--c-panel:rgba(12,14,42,.78);--c-panel-solid:#0e1030;
  --c-text:#EEF0FB;--c-text-2:#C9CDEA;--c-muted:#B4BAE6;--c-faint:#A3AAD8;
  --c-lav:#D6CCFF;--c-lav-a:rgba(214,204,255,.62);--c-lav-b:rgba(150,128,245,.38);--c-lav-c:rgba(120,100,240,.48);
  --c-gold:#D9B65E;--c-gold-2:#F2D58A;--c-live:#8FE3C8;--c-warn:#ffb39b;--c-line:rgba(255,255,255,.12);
  --f-latin:'Cormorant Garamond','Shippori Mincho',serif;--f-serif:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  --f-sans:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic UI',Meiryo,system-ui,sans-serif;--f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --r-btn:14px;--r-card:22px;--tap:44px;--ease:cubic-bezier(.2,.7,.2,1);
  /* 旧い名前（各画面の部品がまだ使う）を新しい色に結ぶ */
  --bg:var(--c-space);--paper:var(--c-panel-solid);--ink:var(--c-text);--accent:var(--c-lav);--muted:var(--c-muted)
}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:var(--c-space);color:var(--c-text);font-family:var(--f-sans);-webkit-text-size-adjust:100%}
#map{position:fixed;inset:0}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9;background:url(assets/grain.png) 0 0/128px 128px;opacity:.16}
.eyebrow{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;color:var(--c-gold);margin:0}.eyebrow.lav{color:var(--c-lav)}
.muted{color:var(--c-muted)}.warn{color:var(--c-warn)}.ok{color:var(--c-live)!important}

/* ガラスの板 */
.glass,#sheet,#found,#auth,#orders,#tg,#tr,#desk,#claim,#layers,#qtoast,#status,#night .paper{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025) 40%,rgba(90,80,220,.07)),var(--c-panel);
  border:1px solid var(--c-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 40px rgba(0,0,0,.45);color:var(--c-text)}

/* ボタン：ガラス＋光のすじ。主の操作はラベンダー */
button{position:relative;overflow:hidden;font:inherit;font-size:14px;min-height:40px;padding:8px 14px;border-radius:var(--r-btn);cursor:pointer;color:#E9EBFA;
  border:1px solid rgba(255,255,255,.15);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 55%,rgba(120,110,255,.07)),rgba(10,12,36,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -6px 14px rgba(110,100,240,.14),0 6px 16px rgba(0,0,0,.3);transition:transform .12s,border-color .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button::before{content:"";position:absolute;inset:-1px;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-130%);transition:transform .7s ease;pointer-events:none}
@media (hover:hover){button:hover{border-color:rgba(214,204,255,.5)}button:hover::before{transform:translateX(130%)}}
button:active{transform:scale(.96)}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--c-lav);outline-offset:2px}
button.main,.btn.prim{background:linear-gradient(180deg,var(--c-lav-a),var(--c-lav-b) 60%,var(--c-lav-c));border-color:rgba(236,230,255,.7);color:#fff;font-weight:700;text-shadow:0 1px 6px rgba(40,20,120,.7)}
button.ghost{background:rgba(10,12,36,.35);box-shadow:none;color:var(--c-text-2)}
button:disabled{opacity:.4;cursor:default}
input,select,textarea{font:inherit;font-size:16px;padding:8px 10px;border:1px solid var(--c-line);border-radius:12px;background:#131633;color:var(--c-text);width:100%}
input[type=checkbox]{width:18px;height:18px;accent-color:#9f8ae9}input[type=color]{height:44px;padding:3px}
::placeholder{color:var(--c-faint)}

/* 左上の記録・右上のボタン */
#status{cursor:pointer;position:fixed;left:10px;top:max(10px,env(safe-area-inset-top));font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--c-text-2);padding:7px 11px;border-radius:12px;z-index:3}
#topbar{position:fixed;right:10px;top:max(10px,env(safe-area-inset-top));display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100vw - 20px);z-index:3}
#topbar button{min-height:40px;padding:7px 12px}
#topbar #found-open{background:linear-gradient(180deg,var(--c-lav-a),var(--c-lav-b) 60%,var(--c-lav-c));border-color:rgba(236,230,255,.7);font-weight:700;animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 rgba(150,128,245,0)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 22px rgba(150,128,245,.55)}}
#who{color:var(--c-text-2);font-size:12px}
#tg-open,#desk-open{position:relative}
#tg-open[data-unread]:not([data-unread=""])::after,#desk-open[data-unread]:not([data-unread=""])::after{content:attr(data-unread);position:absolute;top:2px;right:2px;background:var(--c-gold);color:#2a1f05;border-radius:9px;min-width:17px;height:17px;font-size:10px;font-weight:700;line-height:17px;text-align:center;padding:0 4px;animation:pop .4s var(--ease)}
@keyframes pop{from{transform:scale(.4)}to{transform:scale(1)}}

/* 線の層 */
#layers{position:fixed;right:10px;top:calc(max(10px,env(safe-area-inset-top)) + 52px);z-index:6;border-radius:18px;padding:8px 10px;min-width:230px;animation:rise .25s var(--ease)}
#layers label{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:0 6px;font-size:14px}#layers p{margin:4px 6px;font-size:11px;color:var(--c-muted);max-width:230px}

/* 下からの引き出し（区画の札・建国・登録・命令書・電報・条約・机） */
#sheet,#found,#auth,#orders,#tg,#tr,#desk{position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:560px;border-radius:var(--r-card) var(--r-card) 0 0;border-bottom:0;
  padding:14px 16px calc(16px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .32s var(--ease);overflow:auto;overscroll-behavior:contain}
#sheet::before,#found::before,#auth::before,#orders::before,#tg::before,#tr::before,#desk::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:rgba(214,204,255,.35);margin:0 auto 10px}
#sheet.open,#found.open,#auth.open,#orders.open,#tg.open,#tr.open,#desk.open{transform:none}
#sheet{max-height:70vh;z-index:4}#found{max-height:62vh;z-index:4}#auth{z-index:5}#orders,#tg{max-height:78vh;z-index:4}#tr{max-width:620px;max-height:82vh;z-index:4}#desk{max-height:84vh;z-index:4;padding-top:6px}
header{display:flex;justify-content:space-between;align-items:center;gap:8px}header b{font-family:var(--f-serif);font-size:18px;letter-spacing:.08em;color:var(--c-text)}header .ghost{padding:4px 12px;min-height:34px}
h2,h3{font-family:var(--f-serif);font-weight:600;letter-spacing:.06em;color:var(--c-text)}
h4{margin:16px 0 6px;font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.22em;color:var(--c-gold);border-bottom:1px solid var(--c-line);padding-bottom:4px}
label{display:grid;gap:4px;font-size:12px;color:var(--c-muted);margin:10px 0 4px}
p{line-height:1.7}
.row{display:flex;justify-content:space-between;gap:8px;margin-top:10px;align-items:center}
.card,.pv,dl.card,#tg li,#tr .treaty,#desk li,#orders .atk,#orders .mv{border:1px solid var(--c-line);border-radius:16px;background:rgba(19,22,51,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}

/* 区画の札 */
#sheet h2{margin:0 0 2px;font-size:22px}#sheet .sub{color:var(--c-faint);font-family:var(--f-mono);font-size:10px;letter-spacing:.06em}
#sheet dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:12px 0 0;font-size:14px}#sheet dt{color:var(--c-muted)}#sheet dd{margin:0}
#sheet .chip{display:inline-block;width:.8em;height:.8em;border-radius:3px;margin-right:6px;vertical-align:-.05em;box-shadow:0 0 0 1px rgba(255,255,255,.4)}
#sheet .card{margin-top:12px;padding:12px 14px}#sheet .card h3{margin:0 0 6px;font-size:17px;color:var(--c-gold-2)}#sheet .card h3 span{font-size:12px;color:var(--c-muted);margin-left:8px}
#sheet .occ{color:var(--c-warn);font-weight:700}#sheet button{margin-right:6px}

/* 建国 */
#found header b{font-size:17px}#found p{margin:6px 0;font-size:14px}#found .lead{font-size:15px}
.meter{display:flex;justify-content:space-between;font-size:13px;margin-top:6px}.bar{height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;margin:4px 0}
.bar::after{content:"";display:block;height:100%;width:calc(var(--p)*100%);background:linear-gradient(90deg,var(--c-lav-b),var(--c-lav));transition:width .3s var(--ease)}.bar.over::after{background:var(--c-warn)}
#found dl.card{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:14px;padding:8px 12px;margin:8px 0}#found dl.card dt{color:var(--c-muted)}#found dl.card dd{margin:0}
#found textarea{font-family:var(--f-mono);font-size:12px;word-break:break-all}
.toast{position:sticky;bottom:0;background:var(--c-panel-solid);border:1px solid var(--c-line);color:var(--c-text);padding:8px 12px;border-radius:12px;margin-top:8px;font-size:13px}

/* 登録・ログイン */
.tabs{display:flex;gap:4px}.tab{padding:6px 12px;min-height:34px;color:var(--c-muted)}.tab.on{background:linear-gradient(180deg,var(--c-lav-a),var(--c-lav-b));color:#fff;border-color:rgba(236,230,255,.7)}
#auth p{margin:8px 0;font-size:14px}

/* 引き継ぎ */
#claim{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:40;width:min(380px,calc(100vw - 32px));border-radius:var(--r-card);padding:18px;animation:rise .3s var(--ease)}
#claim h3{margin:0 0 8px;font-size:18px;color:var(--c-gold-2)}#claim p{font-size:13px;margin:0 0 10px}#claim input{margin-bottom:8px}#claim .row{justify-content:flex-end}

/* 命令書 */
#orders p{margin:6px 0;font-size:14px}#orders label,#orders .lbl{margin:10px 0 4px}
#orders .buy{display:grid;grid-template-columns:1fr 72px auto;gap:6px;margin:4px 0}#orders .buy .ghost{padding:6px 8px}
#orders .pv{padding:10px 14px;margin:10px 0}#orders .pv dl{display:grid;grid-template-columns:1fr auto;gap:3px 12px;margin:4px 0;font-size:14px}#orders .pv dd{margin:0;text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}#orders .pv dd.big{font-size:17px;font-weight:700;color:var(--c-gold-2)}
#orders .atk,#orders .mv{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px;margin:8px 0}#orders .atk label,#orders .mv label{margin:0;font-size:12px}#orders .atk .ghost{grid-column:span 2}#orders .mv b{grid-column:span 2;font-size:13px;color:var(--c-lav)}
#orders label.chk{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:6px 0;color:var(--c-text-2)}#orders label.chk input{width:auto;margin-top:3px}

/* 電報 */
#tg label{margin:8px 0 4px}#tg .row .muted{font-size:12px}#tg p{font-size:14px;margin:6px 0}
#tg ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}#tg li{padding:10px 12px;animation:rise .3s var(--ease)}#tg li.out{background:rgba(60,50,130,.35)}
#tg .meta{display:flex;justify-content:space-between;font-size:12px;color:var(--c-muted)}#tg .meta b{color:var(--c-gold-2)}#tg li p{white-space:pre-wrap;word-break:break-word;margin:4px 0 0;font-family:var(--f-serif)}

/* 条約 */
#tr header{position:sticky;top:-14px;background:var(--c-panel-solid);padding:6px 0;z-index:1}
#tr .treaty{padding:14px 16px;margin:10px 0}#tr .tmeta{display:flex;justify-content:space-between;font-size:12px;color:var(--c-muted)}#tr .st-in_force{color:var(--c-live)}#tr .st-ending,#tr .st-ended{color:var(--c-warn)}
#tr h3{margin:6px 0 8px;font-size:18px;text-align:center;color:var(--c-gold-2)}#tr .body{white-space:pre-wrap;word-break:break-word;font-family:var(--f-serif);font-size:14px;line-height:1.9;margin:0}
#tr .sig{display:grid;gap:6px;margin-top:12px;border-top:1px solid var(--c-line);padding-top:8px}#tr .sig div{display:flex;justify-content:space-between;gap:8px;font-size:13px}#tr .sig b{border-left:4px solid;padding-left:6px}#tr .sig span{color:var(--c-muted)}
#tr .form label.check{display:flex;gap:8px;align-items:center}#tr p{font-size:14px}

/* 机 */
#desk header{border-left:6px solid;padding:10px 0 8px 12px;margin:8px 0 4px;position:sticky;top:-6px;background:var(--c-panel-solid);border-radius:4px}
#desk header b{display:block;font-size:19px}#desk header span{font-size:12px;color:var(--c-muted)}
#desk ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}#desk li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;flex-wrap:wrap}
#desk li.todo{border-color:rgba(242,213,138,.6);box-shadow:inset 3px 0 0 var(--c-gold),inset 0 1px 0 rgba(255,255,255,.08);animation:todoGlow 3s ease-in-out infinite}
@keyframes todoGlow{0%,100%{box-shadow:inset 3px 0 0 var(--c-gold)}50%{box-shadow:inset 3px 0 0 var(--c-gold),0 0 14px rgba(217,182,94,.25)}}
#desk li div{display:grid}#desk li b{font-size:14px}#desk li span{font-size:12px;color:var(--c-muted)}#desk li button{white-space:nowrap;padding:6px 10px}
#desk .nums{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px;margin:0}#desk .nums dt{color:var(--c-muted)}#desk .nums dd{margin:0;font-family:var(--f-mono)}
#desk p{font-size:14px;margin:6px 0}#desk .foot{border-top:1px solid var(--c-line);padding-top:10px;margin-top:14px}#desk .haps li{display:block}

/* 運命の夜 */
#night-banner{position:fixed;left:50%;transform:translateX(-50%);top:calc(max(10px,env(safe-area-inset-top)) + 56px);background:linear-gradient(180deg,rgba(242,213,138,.25),rgba(120,90,30,.25)),var(--c-panel);color:var(--c-gold-2);border-color:rgba(242,213,138,.6);font-family:var(--f-serif);font-size:14px;letter-spacing:.06em;white-space:nowrap;z-index:3;animation:breatheGold 3s ease-in-out infinite}
@keyframes breatheGold{0%,100%{box-shadow:0 0 0 rgba(242,213,138,0)}50%{box-shadow:0 0 22px rgba(242,213,138,.45)}}
@media (max-width:600px){#night-banner{top:auto!important;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 8px);white-space:normal!important;max-width:calc(100vw - 32px)}}
#night{position:fixed;inset:0;pointer-events:none;z-index:6;background:linear-gradient(rgba(5,7,26,.7),transparent 30%,transparent 70%,rgba(5,7,26,.85))}
#night .title{position:absolute;left:0;right:0;top:max(14px,env(safe-area-inset-top));text-align:center;color:var(--c-gold-2);font-family:var(--f-latin);letter-spacing:.3em;font-size:15px}
#night .paper{position:absolute;left:50%;top:calc(max(14px,env(safe-area-inset-top)) + 38px);transform:translateX(-50%);width:min(92vw,520px);border-left:6px solid var(--c,#D9B65E);border-radius:16px;padding:12px 16px;display:grid;gap:4px;opacity:0}
#night .paper.in{animation:paperIn .5s var(--ease) forwards}
@keyframes paperIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
#night .paper small{font-family:var(--f-mono);font-size:10px;letter-spacing:.3em;color:var(--c-gold)}#night .paper b{font-family:var(--f-serif);font-size:21px;letter-spacing:.06em;line-height:1.4}#night .paper span{font-size:13px;color:var(--c-muted)}
#night .lyuka{position:absolute;left:0;right:0;bottom:calc(68px + env(safe-area-inset-bottom));text-align:center;color:var(--c-lav);font-family:var(--f-serif);font-size:15px;letter-spacing:.08em;margin:0;padding:0 16px}
#night .ctl{position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;justify-content:center;gap:10px;pointer-events:auto}#night .count{color:var(--c-faint);font-size:12px;align-self:center;font-family:var(--f-mono)}

/* 画質を軽くした知らせ */
#qtoast{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;font-size:13px;padding:8px 12px;border-radius:14px;max-width:calc(100vw - 32px)}#qtoast button{margin-left:8px}

/* 入り（最初の画面）：星が流れる夜空。リュカが中央で話す */
#intro{position:fixed;inset:0;z-index:20;background:radial-gradient(500px 420px at 100% 0%,rgba(130,110,240,.34),transparent 65%),radial-gradient(500px 500px at 0% 100%,rgba(60,120,220,.22),transparent 60%),var(--c-space);transition:opacity .6s var(--ease);overflow:hidden}
#intro::before{content:"";position:absolute;inset:-10% -50%;background:url(assets/stars.svg) 0 0/900px auto repeat;opacity:.5;animation:drift 90s linear infinite}
@keyframes drift{to{transform:translateX(-450px)}}
#intro.out{opacity:0}#intro-skip{position:absolute;right:14px;top:max(14px,env(safe-area-inset-top));z-index:2}
#intro .row{position:absolute;left:0;right:0;bottom:calc(28px + env(safe-area-inset-bottom));justify-content:center;opacity:0;animation:rise .8s var(--ease) 1.2s forwards;z-index:22}
#intro-go{min-width:200px}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 案内役リュカ（src/lyuka.js） */
#guide{position:fixed;left:8px;top:calc(max(10px,env(safe-area-inset-top)) + 44px);z-index:25;display:flex;align-items:flex-start;gap:6px;max-width:min(440px,calc(100vw - 16px));pointer-events:none;opacity:0;transform:translateY(-8px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
#guide.in{opacity:1;transform:none}
#guide .g-fig{position:relative;flex:none;width:76px;height:114px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5));animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
#guide .g-fig::before{content:"";position:absolute;left:-10px;right:-10px;top:4px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(145,128,191,.35),transparent 70%)}
#guide .lt-portrait,#guide .lt-ov,#guide .lt-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 0}
#guide .lt-portrait{opacity:0;transition:opacity .18s ease}#guide .lt-portrait.on{opacity:1}#guide .lt-ov{opacity:0}#guide .lt-ov.on{opacity:1}
#guide .g-bubble{position:relative;pointer-events:auto;border-radius:6px 18px 18px 18px;padding:10px 32px 10px 14px;margin-top:10px;min-width:0}
#guide .g-text{margin:4px 0 0;font-family:var(--f-serif);font-size:14px;line-height:1.75;color:var(--c-text);white-space:pre-wrap}
#guide .g-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}#guide .g-acts:empty{display:none}#guide .g-acts button{min-height:36px;padding:5px 12px;font-size:13px}
#guide .g-close{position:absolute;right:4px;top:4px;min-height:26px;width:26px;padding:0;border-radius:50%;font-size:14px;line-height:1;background:transparent;box-shadow:none;border-color:transparent;color:var(--c-muted)}
#guide.big{left:50%;top:auto;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);flex-direction:column;align-items:center;max-width:min(560px,calc(100vw - 24px));gap:0}
#guide.big.in{transform:translateX(-50%)}
#guide.big .g-fig{width:min(260px,58vw);height:min(390px,52vh)}#guide.big .g-fig::before{top:30px;height:70%}
#guide .g-fig{-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)} /* 絵の下端をぼかして地図・夜空になじませる */
#guide.big .g-bubble{width:min(520px,calc(100vw - 24px));margin-top:-28px;border-radius:18px;padding:14px 18px;text-align:center}#guide.big .g-text{font-size:15px;line-height:1.95}#guide.big .g-close{display:none}
@media (max-width:899px){#guide{top:calc(max(10px,env(safe-area-inset-top)) + 100px)}} /* スマホは右上のボタンが2段になるので、その下に */
@media (min-width:900px){#guide{top:calc(max(10px,env(safe-area-inset-top)) + 48px)}#guide .g-fig{width:96px;height:144px}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}#intro .row{opacity:1}}