:root{--ground:#05070d;--panel:#0b0f19;--ink:#ecebe6;--dim:#9aa0ad;--gold:#e9b64a;--pad:24px}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--ground);color:var(--ink);overflow:hidden}
body{font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic UI","Meiryo",system-ui,sans-serif;font-size:14px;line-height:1.7;font-feature-settings:"palt";-webkit-font-smoothing:antialiased}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
canvas#gl:active{cursor:grabbing}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;letter-spacing:.04em}
button:disabled{cursor:default;opacity:.5}
button:focus-visible,#rail:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
p,h1,h2,h3,dl{margin:0}
.num,#clock,.coords,.when,.big{font-variant-numeric:tabular-nums}

/* ヒーロー */
#hero{position:fixed;left:var(--pad);top:13vh;max-width:calc(100vw - 28px);z-index:5;transition:opacity .9s}
#hero[hidden]{display:block;opacity:0;pointer-events:none}
#hero h1{white-space:nowrap;font-size:clamp(30px,5.4vw,72px);font-weight:700;line-height:1.25;letter-spacing:.02em}
#hero p{margin:16px 0 32px;font-size:clamp(16px,1.6vw,20px);color:var(--dim);max-width:30em}
#go{background:var(--gold);color:#1a1405;font-weight:700;font-size:16px;padding:14px 34px;border-radius:2px;min-height:48px}
#go:not(:disabled):hover{background:#f2c660}
#boot{display:none;position:fixed;right:var(--pad);bottom:48px;list-style:none;padding:0;color:var(--dim);font-size:12px;text-align:right;transition:opacity 1.4s;z-index:4;max-width:60vw}
#boot.quiet,body.on #boot{opacity:0;pointer-events:none}
#boot li{animation:in .5s both}
@keyframes in{from{opacity:0;transform:translateY(4px)}}

/* 操作面の出し入れ */
#left,#stamp,#instr,#card,#tools{opacity:0;pointer-events:none;transition:opacity 1s .4s}
body.on #left,body.on #stamp,body.on #instr,body.on #card,body.on #tools{opacity:1;pointer-events:auto}
body.instant *{transition-duration:0s!important;transition-delay:0s!important}

/* 左: 時間 */
#left{position:fixed;left:var(--pad);top:var(--pad);bottom:76px;width:150px;display:flex;flex-direction:column;gap:14px;z-index:3}
#viewbtn{align-self:flex-start;font-size:12px;color:var(--dim);padding:6px 0;min-height:32px;text-align:left}
#viewbtn:hover{color:var(--ink)}
#rail{position:relative;flex:1;width:14px;margin-left:6px;cursor:ns-resize;touch-action:none}
#rail::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;background:#2a2f3c}
#rail .seg{position:absolute;left:5px;width:4px;background:#171b27;pointer-events:none}
#rail .seg:nth-child(2){background:#3a4054}
.tick{position:absolute;left:-5px;width:24px;height:24px;margin-top:-12px;display:flex;align-items:center}
.tick::before{content:"";width:6px;height:6px;margin-left:9px;background:#6a7084;border-radius:50%}
.tick.key::before{width:9px;height:9px;margin-left:7.5px;background:var(--ink)}
.tick span{position:absolute;left:30px;white-space:nowrap;font-size:12px;color:var(--dim);opacity:0;transition:opacity .2s;pointer-events:none}
.tick.key span,.tick:hover span,.tick.now span{opacity:1}
.tick.now span{color:var(--ink)}
.tick.now::before{background:var(--gold)}
.thumb{position:absolute;left:1px;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--gold);pointer-events:none}

/* 時刻 */
#stamp{position:fixed;left:50%;top:var(--pad);transform:translateX(-50%);text-align:center;z-index:3}
#date{font-size:18px;font-weight:500;letter-spacing:.04em}
#clock{font-size:12px;color:var(--dim)}
.ctl{display:flex;justify-content:center;gap:4px;margin-top:6px}
.ctl button{font-size:12px;color:var(--dim);padding:6px 12px;min-height:32px}
.ctl button:hover{color:var(--ink)}

/* 右: 装置 */
#instr{position:fixed;right:var(--pad);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;z-index:3;align-items:flex-end}
.ins{display:flex;flex-direction:column;align-items:flex-end;padding:10px 0 10px 18px;min-height:48px;color:var(--dim);position:relative}
.ins b{font-size:15px;letter-spacing:.12em;font-weight:500}
.ins span{font-size:13px}
.ins:hover{color:var(--ink)}
.ins[aria-pressed=true]{color:var(--ink)}
.ins[aria-pressed=true]::after{content:"";position:absolute;right:-12px;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--ink)}
body[data-mode=sample] .ins[aria-pressed=true]{color:var(--gold)}
body[data-mode=sample] .ins[aria-pressed=true]::after{background:var(--gold)}

/* 下: 根拠カード */
#card{position:fixed;left:50%;bottom:44px;transform:translateX(-50%);width:min(440px,calc(100vw - 340px));background:var(--panel);padding:14px 18px 12px;z-index:3;border-radius:2px}
#card .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
#card .place{font-size:16px;font-weight:500}
#card .ins-name{font-size:12px;color:var(--dim);letter-spacing:.08em;white-space:nowrap}
#card .coords,#card .when{font-size:13px;color:var(--dim)}
#card .body{margin-top:10px}
#card .body:empty{display:none}
#card .ins-long{display:none}
.note{font-size:13px;color:var(--dim);line-height:1.7;margin-top:6px}
.big{font-size:26px;font-weight:500}.big span{font-size:12px;color:var(--dim);font-weight:400}
.curve{color:var(--ink);margin-top:4px}.curve svg{display:block;width:100%;height:auto;max-height:56px}
.curve .dot{fill:var(--ink)}
.thumbimg{display:block;width:100%;max-height:130px;object-fit:cover;background:#000}
.mass{display:flex;gap:28px;align-items:flex-end}
.mass .m{display:flex;gap:10px;align-items:flex-end;font-size:12px;line-height:1.5;color:var(--dim)}
.mass .d{display:block;border-radius:50%;background:var(--gold)}
.mass .d.big{width:44px;height:44px;font-size:0}.mass .d.small{width:6px;height:6px;background:var(--ink)}

/* ラベル */
#labels{position:fixed;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.lab{position:absolute;left:0;top:0;font-size:12px;white-space:nowrap;color:var(--ink);margin:-26px 0 0 8px}
.lab::before{content:"";position:absolute;left:-8px;top:20px;width:5px;height:5px;background:var(--ink);border-radius:50%}
.lab.feat{color:var(--dim)}.lab.feat::before{background:var(--dim)}
.lab.far{color:var(--dim)}

/* 発見・ヒント */
#discover{position:fixed;left:50%;top:22%;transform:translate(-50%,8px);max-width:min(560px,calc(100vw - 48px));text-align:center;opacity:0;pointer-events:none;transition:opacity .8s,transform .8s;z-index:4}
#discover.show{opacity:1;transform:translate(-50%,0)}
#discover p{text-wrap:balance;font-size:clamp(17px,2.2vw,24px);font-weight:500;line-height:1.6;background:var(--ground);padding:10px 18px;border-radius:2px}
#hint{position:fixed;left:50%;bottom:210px;transform:translateX(-50%);font-size:12px;color:var(--dim);opacity:0;transition:opacity .6s;z-index:4;text-align:center}
#hint.show{opacity:1}

/* 試料カード */
#grain{position:fixed;right:var(--pad);bottom:44px;width:min(340px,calc(100vw - 48px));background:var(--panel);padding:14px 16px 12px;z-index:6;border-radius:2px;display:none}
#grain.show{display:block}
#grain h3{font-size:18px;color:var(--gold);font-weight:500}
#grain .where{font-size:12px;color:var(--dim);margin-bottom:8px}
#grain img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#000;display:block}
#grain .spec{color:var(--ink);margin-top:10px}.spec svg{width:100%;height:auto;display:block}
.spec text{fill:var(--dim);font-size:10px}.spec .band{fill:#2f3446}
#grain .specnote,#grain .credit{font-size:11px;color:var(--dim);margin-top:4px}
#grain-close{position:absolute;right:12px;top:10px;font-size:12px;color:var(--dim);padding:4px 6px}

/* 道具・パネル */
#tools{position:fixed;right:var(--pad);top:var(--pad);display:flex;gap:2px;z-index:6}
#tools button{font-size:12px;color:var(--dim);padding:8px 10px;min-height:36px}
#tools button:hover{color:var(--ink)}
.panel{position:fixed;right:var(--pad);top:64px;width:min(400px,calc(100vw - 48px));max-height:calc(100vh - 120px);overflow:auto;background:var(--panel);padding:20px 22px;z-index:8;border-radius:2px}
.panel[hidden]{display:none}
.panel h2{font-size:14px;font-weight:500;margin-bottom:10px;letter-spacing:.04em}
.panel h2:not(:first-child){margin-top:22px}
.panel p{font-size:13px;color:var(--dim);margin-bottom:8px}
.panel a{color:var(--ink);text-underline-offset:3px}
.panel .small{font-size:12px}
.panel .x{position:absolute;right:14px;top:14px;font-size:12px;color:var(--dim);padding:4px 6px}
.panel .lines p{color:var(--ink)}
.panel dl{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;font-size:13px}
.panel dt{color:var(--dim)}.panel dd{text-align:right;font-variant-numeric:tabular-nums}
.panel label{display:block;font-size:12px;color:var(--dim);margin-top:10px}
.panel input{display:block;width:100%;margin-top:4px;background:var(--ground);color:var(--ink);border:0;padding:10px 12px;font:inherit;font-size:14px;border-radius:2px;min-height:40px}
#jump{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
#jump h2,#jump label:first-of-type,#jump button{grid-column:1/-1}
#jump button,.panel .row button{background:var(--ink);color:var(--ground);padding:10px 18px;margin-top:12px;min-height:44px;font-weight:500;border-radius:2px}
.panel .row{display:flex;gap:10px;flex-wrap:wrap}
body.panel-back #card,body.panel-report #card{opacity:1}

#foot{position:fixed;left:var(--pad);bottom:14px;font-size:12px;z-index:3}
#foot a{background:var(--ground);padding:3px 8px;color:#a4a9b6;text-decoration:none}#foot a:hover{color:var(--ink)}
#fade{position:fixed;inset:0;background:var(--ground);opacity:0;pointer-events:none;transition:opacity .42s;z-index:7}
#fade.show{opacity:1}
#fail{position:fixed;inset:0;background:var(--ground);z-index:20;padding:20vh 24px;max-width:560px}
#fail[hidden]{display:none}#fail h2{margin-bottom:12px}#fail p{color:var(--dim)}
#nojs{position:fixed;inset:0;background:var(--ground);z-index:30;padding:20vh 24px}

/* 試料のとき(物質): 金を使うのはここだけ */
body[data-view=far] #instr{opacity:.35}

/* スマートフォン */
@media (max-width:760px){
  :root{--pad:14px}
  #left{width:34px;top:76px;bottom:240px}
  #rail{margin-left:4px}.tick.key span{display:none}.tick.now span{display:block}
  #viewbtn{position:fixed;left:var(--pad);top:var(--pad);z-index:3;max-width:100px}
  #stamp{top:var(--pad);left:auto;right:var(--pad);transform:none;text-align:right}
  #tools{top:auto;bottom:2px;right:var(--pad)}
  #foot{bottom:12px;max-width:50vw;line-height:1.4}
  #instr{top:auto;bottom:50px;left:var(--pad);right:var(--pad);background:var(--panel);padding:0 14px;border-radius:2px;transform:none;flex-direction:row;justify-content:space-between;align-items:flex-start}
  .ins{align-items:flex-start;padding:6px 6px 12px 0}
  .ins[aria-pressed=true]::after{right:auto;left:0;top:auto;bottom:4px;margin:0;width:100%;height:2px}
  #card{width:calc(100vw - 28px);bottom:124px;padding:10px 14px}
  #card .ins-long{display:none}
  .thumbimg{max-height:84px}
  #hint{bottom:340px}
  #boot{left:var(--pad);right:auto;text-align:left;bottom:60px;max-width:calc(100vw - 28px)}#boot li:nth-last-child(n+4){display:none}
  #left{bottom:360px}
  #discover{top:16%}
  #hero{top:11vh}
  #grain{bottom:56px;max-height:70vh;overflow:auto}
  .panel{top:56px;right:14px;left:14px;width:auto}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01s!important;animation:none!important}}
body[data-view=far] #card .ins-name,body[data-view=far] #card .ins-long{display:none}
body[data-view=far] .ins{pointer-events:none}
@media (max-width:760px){.ctl button,.ins{min-height:44px}#tools button{min-height:44px}#viewbtn{min-height:44px}.tick{width:44px;left:-15px}}

@media (max-width:1100px){body.grain-open #card{display:none}}

/* 使っていないあいだは操作の表示を引き、星と地表だけを残す */
#left,#stamp .ctl,#tools,#instr,#card{transition:opacity 1.2s}
body.on.idle #left{opacity:.16}
body.on.idle #stamp .ctl,body.on.idle #tools{opacity:0}
body.on.idle #instr{opacity:.35}
body.on.idle #card{opacity:.72}
#b-log{list-style:none;padding:0;margin:0 0 12px;font-size:12px;color:var(--dim);display:grid;gap:2px}