:root{
  --ink:#0b0a14;        /* 深い藍黒 */
  --bone:#e9e4d8;       /* 骨白 */
  --gold:#d9a441;       /* 琥珀 */
  --dim:#6d6a7c;        /* 霞 */
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--ink)}
body{
  font-family:'JetBrains Mono',monospace;
  color:var(--bone);
  -webkit-font-smoothing:antialiased;
}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair}

/* ---- 転移の暗転 ---- */
#veil{
  position:fixed;inset:0;background:var(--ink);
  opacity:0;pointer-events:none;
  transition:opacity 1.1s cubic-bezier(.4,0,.2,1);
  z-index:5;
}
#veil.on{opacity:1}

/* ---- HUD ---- */
.hud{position:fixed;z-index:10;pointer-events:none;user-select:none;transition:opacity .45s ease}

/* 右上：切り替えアイコン群（flexで自動整列＝オフセット計算に依存せず重ならない） */
.topbar{
  position:fixed;z-index:11;
  top:clamp(18px,3vw,36px);right:clamp(18px,3vw,36px);
  display:flex;align-items:center;gap:8px;
}
.topbtn{
  width:36px;height:36px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;padding:0;
  color:var(--dim);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .25s,opacity .45s ease;
}
/* ホバー可能な端末のみ（スマホでタップ後に白が残るのを防ぐ） */
@media (hover:hover){ .topbtn:hover{color:var(--bone)} }
.topbtn:focus-visible{outline:1px solid var(--bone);outline-offset:4px}
.topbtn svg{width:20px;height:20px;display:block}

/* 回転オン：白で点灯し、アイコン自体もゆっくり回る */
#rotToggle.on{color:var(--bone)}
#rotToggle.on svg{animation:topbtn-spin 9s linear infinite}
@keyframes topbtn-spin{to{transform:rotate(360deg)}}

/* 没入モード：HUDとトグルを退避 */
body.ui-hidden .hud,
body.ui-hidden .topbtn{opacity:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  #rotToggle.on svg{animation:none}
}

/* 左上：題字 */
#brand{top:clamp(18px,3vw,36px);left:clamp(18px,3vw,36px)}
#brand .ttl{
  font-family:'Shippori Mincho',serif;
  font-weight:700;
  font-size:clamp(20px,2.2vw,26px);
  letter-spacing:.34em;
  color:var(--bone);
}
#brand .sub{
  margin-top:8px;
  font-size:clamp(9px,1vw,11px);
  font-weight:300;
  letter-spacing:.28em;
  color:var(--dim);
  text-transform:uppercase;
}

/* 左下：観測データ */
#data{
  bottom:clamp(18px,3vw,36px);left:clamp(18px,3vw,36px);
  font-size:clamp(10px,1.05vw,12px);
  font-weight:300;
  line-height:2.05;
  letter-spacing:.06em;
}
#data .k{color:var(--dim);margin-right:1em}
#data .v{color:var(--bone)}
#data .mag{color:#fff;font-weight:500}
#data .rule{
  width:min(240px,32vw);height:1px;
  background:linear-gradient(90deg,rgba(233,228,216,.7),transparent);
  margin:10px 0 8px;
}
#depthbar{
  width:min(240px,32vw);height:2px;
  background:rgba(233,228,216,.12);
  margin-top:6px;position:relative;overflow:hidden;
}
#depthbar i{
  position:absolute;inset:0;transform-origin:left;
  background:rgba(233,228,216,.85);transform:scaleX(0);
}

/* 右下：操作 */
#ops{
  bottom:clamp(18px,3vw,36px);right:clamp(18px,3vw,36px);
  text-align:right;
  font-size:clamp(9px,1vw,11px);
  font-weight:300;
  letter-spacing:.2em;
  color:var(--dim);
  line-height:2.1;
  pointer-events:auto;
}
#ops .dive{color:var(--bone)}
#ops button{
  all:unset;cursor:pointer;
  color:var(--bone);
  border-bottom:1px solid rgba(233,228,216,.4);
  padding-bottom:2px;
  letter-spacing:.2em;
  transition:opacity .25s;
}
#ops button:hover{opacity:.65}
#ops button:focus-visible{outline:1px solid var(--bone);outline-offset:4px}
#ops a{
  color:var(--bone);text-decoration:none;
  border-bottom:1px solid rgba(233,228,216,.4);
  padding-bottom:2px;letter-spacing:.2em;
  transition:opacity .25s;
}
#ops a:hover{opacity:.65}
#ops a:focus-visible{outline:1px solid var(--bone);outline-offset:4px}

/* 周縁の翳り（ほんのわずか） */
#vig{
  position:fixed;inset:0;pointer-events:none;z-index:3;
  background:
    radial-gradient(128% 128% at 50% 50%, transparent 66%, rgba(11,10,20,.52) 100%);
}

@media (max-width:640px){
  #data{line-height:1.9}
}
@media (prefers-reduced-motion:reduce){
  #veil{transition:none}
}

/* 静止中の再開ヒント */
#resume{
  position:fixed;inset:0;z-index:6;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;
  font-family:'Shippori Mincho',serif;
  font-size:clamp(13px,1.6vw,17px);letter-spacing:.34em;
  color:rgba(233,228,216,.9);
  background:rgba(11,10,20,.42);
  opacity:0;pointer-events:none;
  transition:opacity .5s ease;
}
#resume.show{opacity:1}
#resume span{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.34em;color:var(--gold);
  text-transform:uppercase;
}
@media (prefers-reduced-motion:reduce){
  #resume{transition:none}
}