/* Layout: the body view (with the time bar on top of it) and the hormone chart on the left, panel on the right.
   Portrait phones: everything stacks and the page scrolls. */
:root{
  --bg:#0d1210;--panel:#121915;--box:#161f1a;--ink:#eef3ee;--muted:#a9b8ad;--dim:#738578;--line:rgba(190,230,200,.14);
  --acc:#9be37a;
  --brk:#ef6a3a;--keep:#56b4e9;--new:#2fc495;--mat:#f0d042;--hem:#d58cc0;
  --sure:#7fd3a0;--est:#ffcf6b;--art:#c9a2ff;
  --f-body:'Zen Kaku Gothic New','Yu Gothic',system-ui,sans-serif;--f-head:'Zen Maru Gothic','Yu Gothic',sans-serif;--f-mono:'IBM Plex Mono',Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--f-body)}
#app{display:flex;height:100%;overflow:hidden}
#stage{flex:1;min-width:0;display:flex;flex-direction:column}
#viewWrap{position:relative;flex:1;min-height:0;user-select:none;-webkit-user-select:none}
#view{display:block;width:100%;height:100%;touch-action:manipulation;cursor:default}
#chartWrap{height:190px;flex:none;border-top:1px solid var(--line);padding:4px 8px;background:#0b100e}
#chart{width:100%;height:100%;display:block;cursor:pointer;touch-action:none}
.mono{font-family:var(--f-mono)}

#stageName{position:absolute;left:14px;top:10px;pointer-events:none;max-width:60%}
#stageName b{display:block;font-family:var(--f-head);font-size:22px;letter-spacing:.04em}
#stageName span{font-size:12.5px;color:var(--muted)}
#viewCtl{position:absolute;right:12px;top:12px;display:flex;gap:4px}
#viewCtl button,#timebar button,.seg button{background:#1b2520;border:1px solid var(--line);color:var(--ink);font:inherit;font-size:13px;padding:5px 10px;border-radius:6px;cursor:pointer}
#viewCtl button[aria-pressed=true],.seg button[aria-pressed=true]{border-color:var(--acc);color:var(--acc)}
button:focus-visible,input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

#timebar{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;gap:8px;background:rgba(13,18,16,.82);border:1px solid var(--line);border-radius:8px;padding:6px 8px;backdrop-filter:blur(4px)}
#timebar #play{width:38px;font-size:14px}
#speeds{display:flex;gap:3px}
#speeds button{padding:4px 7px;font-size:12px;font-family:var(--f-mono)}
#time{flex:1;min-width:80px;accent-color:var(--acc)}
#clock{font-size:12px;color:var(--muted);min-width:9.5em;text-align:right;white-space:nowrap}

#hoverTip{position:absolute;pointer-events:none;background:rgba(10,14,12,.92);border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-size:12.5px;white-space:nowrap}
#card{position:absolute;left:14px;top:74px;width:min(360px,calc(100% - 28px));max-height:calc(100% - 140px);overflow-y:auto;background:rgba(18,25,21,.97);border:1px solid var(--line);border-radius:10px;padding:14px 14px 12px;box-shadow:0 8px 30px rgba(0,0,0,.45)}
#card h3{margin:0 0 4px;font-family:var(--f-head);font-size:18px;display:flex;align-items:center;gap:8px}
#card h3 i{width:12px;height:12px;border-radius:50%;flex:none}
#card .cat{font-size:12px;color:var(--muted)}
#card p{font-size:13px;line-height:1.8;margin:8px 0 0}
#card .when{font-family:var(--f-mono);font-size:12px;color:var(--dim)}
#card .close{position:absolute;right:8px;top:8px;background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:2px 6px}

#panel{width:360px;flex:none;height:100%;overflow-y:auto;background:var(--panel);border-left:1px solid var(--line);padding:18px 16px 28px;display:flex;flex-direction:column;gap:12px}
/* 言語: 選んでいないほうを隠す。右上の JP／EN（I18N.md） */
:root[lang=en] [lang=ja],:root:not([lang=en]) [lang=en]{display:none!important}
#panel header{position:relative}
.langsw{position:absolute;top:0;right:0;display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.langsw button{border:0;background:none;padding:3px 8px;font:700 11px var(--f-mono);letter-spacing:.04em;color:var(--dim);cursor:pointer}
.langsw button[aria-pressed="true"]{background:#1b2520;color:var(--ink)}
header .eyebrow{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;color:var(--dim)}
h1{font-family:var(--f-head);font-size:24px;margin:4px 0 6px;letter-spacing:.04em}
.lead{font-size:13px;line-height:1.75;color:var(--muted);margin:0}
h2{font-size:12px;letter-spacing:.14em;color:var(--dim);margin:0 0 8px;font-weight:500}
.box{background:var(--box);border:1px solid var(--line);border-radius:8px;padding:12px}
.row{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:8px;color:var(--muted)}
input[type=checkbox]{accent-color:var(--acc)}

.tag{display:inline-block;font-size:10.5px;padding:0 6px;border-radius:9px;border:1px solid;line-height:1.6;vertical-align:1px;white-space:nowrap}
.tag.sure{color:var(--sure);border-color:var(--sure)}
.tag.est{color:var(--est);border-color:var(--est)}
.tag.art{color:var(--art);border-color:var(--art)}

#now .ev{font-size:13px;line-height:1.8;color:var(--muted);border-left:2px solid var(--acc);padding-left:9px;margin-top:10px}
#now .ev:first-child{margin-top:0}
#now .ev b{color:var(--ink);font-size:14px;margin-right:6px}
#now .ev.old{border-left-color:var(--line);opacity:.75}

#cats{display:flex;flex-direction:column;gap:5px}
#cats button{display:flex;align-items:flex-start;gap:9px;text-align:left;background:#1b2520;border:1px solid var(--line);border-radius:7px;color:var(--ink);font:inherit;font-size:13px;padding:7px 10px;cursor:pointer}
#cats button i{width:12px;height:12px;border-radius:50%;flex:none;margin-top:4px}
#cats button small{display:block;color:var(--dim);font-size:11.5px;line-height:1.55;margin-top:1px}
#cats button[aria-pressed=false]{opacity:.45}
#cats button[aria-pressed=false] b{text-decoration:line-through}

#organList{display:flex;flex-wrap:wrap;gap:5px}
#organList button{display:inline-flex;align-items:center;gap:6px;background:#1b2520;border:1px solid var(--line);border-radius:14px;color:var(--ink);font:inherit;font-size:12.5px;padding:3px 10px;cursor:pointer}
#organList button i{width:9px;height:9px;border-radius:50%}
#organList button.gone{opacity:.45}
#organList button[aria-pressed=true]{border-color:var(--acc)}

#myths details{border-top:1px solid var(--line);padding:8px 0}
#myths details:first-child{border-top:none;padding-top:0}
#myths summary{cursor:pointer;font-size:13.5px;line-height:1.6}
#myths p{font-size:12.5px;line-height:1.8;color:var(--muted);margin:6px 0 0}
ul.plain{margin:0;padding-left:1.1em;font-size:12.5px;line-height:1.8;color:var(--muted)}
ul.plain li+li{margin-top:4px}
.about p{font-size:12px;line-height:1.75;color:var(--muted);margin:0 0 6px}
.about details{margin:0 0 8px}
.about summary{cursor:pointer;font-size:12.5px;color:var(--ink);margin-bottom:4px}

@media (max-width:860px){
  #panel{width:300px}
}
@media (max-width:700px), (max-aspect-ratio:3/4){
  html,body{height:auto}
  #app{flex-direction:column;height:auto;overflow:visible}
  #stage{height:auto}
  #viewWrap{height:64vh;min-height:400px;flex:none}
  #chartWrap{height:170px}
  #panel{width:auto;height:auto;border-left:none;border-top:1px solid var(--line)}
  #stageName b{font-size:18px}
  #stageName{max-width:52%}
  #viewCtl button{padding:4px 8px;font-size:12px}
  #timebar{flex-wrap:wrap;gap:6px}
  #time{order:5;flex-basis:100%}
  #clock{min-width:0;flex:1}
  #card{top:auto;bottom:96px;max-height:52%}
}