/* 細菌にとりつくウイルス — 上にタブ、左に図（下に時間のスライダー）、右に見どころ・もしも・数。縦長のスマホでは縦に積む */
:root{
  --bg:#0e1c22;--panel:#0f1d23;--box:#13252c;--ink:#e8f0f4;--muted:#a9bcc4;--dim:#7c929b;--line:rgba(170,220,235,.14);
  --acc:#7fe0c4;--btn:#16292f;--rec:#ffe066;
  --sure:#7fd3a0;--est:#ffcf6b;--art:#c9a2ff;
  --f-display:'Dela Gothic One','Yu Gothic',sans-serif;--f-body:'Zen Kaku Gothic New','Yu Gothic',system-ui,sans-serif;--f-mono:'IBM Plex Mono',Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--f-body)}
#shell{display:flex;flex-direction:column;height:100%}
#topbar{flex:none;display:flex;align-items:center;gap:18px;padding:8px 14px;border-bottom:1px solid var(--line);background:#0a161b}
.brand b{display:block;font-family:var(--f-display);font-weight:400;font-size:19px;letter-spacing:.04em}
.brand > span{display:block;font-size:11.5px;color:var(--dim)}
/* 言語（I18N.md）: 選んでいないほうの言語を隠す */
:root[lang=en] [lang=ja],:root:not([lang=en]) [lang=en]{display:none!important}
/* 見出し・タブの中の言語の span はブロックに（互換モードと標準モードで行の高さが変わらないように） */
.brand b>span,#tabs b>span,#tabs small>span{display:block}
.langsw{flex:none;display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;margin-left:auto;align-self:center}
.langsw button{border:0;background:none;padding:3px 8px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--dim);cursor:pointer}
.langsw button[aria-pressed="true"]{background:var(--btn);color:var(--ink)}
#tabs{display:flex;gap:6px;margin-left:10px}
#tabs button{background:var(--btn);border:1px solid var(--line);border-radius:9px;padding:6px 14px;text-align:left;cursor:pointer;line-height:1.35;min-width:0}
#tabs button b{display:block;font-size:14px;font-weight:700}
#tabs button small{font-size:11px;color:var(--dim)}
#tabs button[aria-selected=true]{border-color:var(--acc);background:#173431}
#tabs button[aria-selected=true] b{color:var(--acc)}
button{font:inherit;color:var(--ink)}
button:focus-visible,input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.mono{font-family:var(--f-mono)}
.page{display:flex;flex:1;min-height:0;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}
.viewWrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.viewWrap canvas:active{cursor:grabbing}
/* 本物に近い見た目: 色を抜いて電子顕微鏡の写真のような調子（CSS でまとめて。毎コマの計算はしない）と、つぶつぶ */
.viewWrap.real canvas{filter:grayscale(1) contrast(1.25) brightness(1.05)}
.viewWrap.real::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* いま起きていること（図の左上） */
.now{position:absolute;left:12px;bottom:12px;max-width:min(430px,calc(100% - 200px));background:rgba(10,22,27,.9);border:1px solid var(--acc);border-radius:10px;padding:8px 12px;pointer-events:none;font-size:12.5px;line-height:1.7;color:var(--muted)}
.now:empty{display:none}
/* 締めのまとめ（シークバーの最後に、図のまん中に） */
.closing{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);width:min(560px,calc(100% - 24px));max-height:calc(100% - 110px);overflow:auto;background:rgba(10,22,27,.94);border:1px solid var(--acc);border-radius:14px;padding:16px 20px 14px;z-index:6;font-size:13.5px;line-height:1.8;color:var(--muted);animation:closingIn .8s ease-out}
.closing h3{margin:0 0 8px;color:var(--acc);font-size:18px}
.closing p{margin:0 0 8px}
.closing .cbtn{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.closing button{background:var(--acc);color:#0e1c22;border:0;border-radius:8px;padding:7px 14px;font-weight:700;font-size:13px;cursor:pointer}
.closing button+button{background:var(--btn);color:var(--ink);border:1px solid var(--line)}
@keyframes closingIn{from{opacity:0;transform:translate(-50%,-40%)}to{opacity:1;transform:translate(-50%,-46%)}}
.now b{color:var(--acc);font-size:15px}
.now p{margin:3px 0 0}
/* 拡大ボタン（右上） */
.zoomBtns{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.zoomBtns button{background:rgba(22,41,47,.92);border:1px solid var(--line);border-radius:8px;min-width:40px;padding:5px 9px;font-size:15px;cursor:pointer}
.zoomBtns #lookBtn{font-size:11.5px;color:var(--dim)}
.zoomBtns #lookBtn.on{color:#0e1c22;background:#d9dde0;border-color:#d9dde0;font-weight:700}
.now.flash{animation:nowFlash 1.2s ease-out}
@keyframes nowFlash{0%{box-shadow:0 0 0 3px var(--acc);transform:translateY(-3px)}100%{box-shadow:0 0 0 0 transparent;transform:none}}
/* カメラの切りかえ（図の上のまん中。自分で動かすと「自分で動かす」が光り、すぐおまかせに戻せる） */
.camMode{position:absolute;left:50%;transform:translateX(-50%);top:8px;display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:rgba(10,22,27,.92);z-index:4}
.camMode button{border:0;background:transparent;color:var(--muted);font-size:13px;padding:6px 14px;cursor:pointer;white-space:nowrap}
.camMode button[aria-pressed="true"]{background:var(--acc);color:#0e1c22;font-weight:700}
.camMode #camFree[aria-pressed="true"]{background:#ffb35c}
.camMode.pulse{animation:camPulse 1.4s ease-out}
@keyframes camPulse{0%{box-shadow:0 0 0 4px #ffb35c}100%{box-shadow:0 0 0 0 transparent}}
/* マウスを乗せたときの解説 */
.tip{position:absolute;z-index:5;max-width:320px;background:rgba(10,22,27,.96);border:1px solid #ffe066;border-radius:10px;padding:7px 11px 8px;font-size:12.5px;line-height:1.7;color:var(--muted);pointer-events:auto}
.tip b{color:#ffe066;font-size:13.5px}
.tip p{margin:3px 0 0}
.howto{animation:howtoOut 1s 10s forwards;position:absolute;left:50%;transform:translateX(-50%);top:46px;font-size:11.5px;color:var(--dim);background:rgba(10,22,27,.75);border-radius:6px;padding:3px 8px;pointer-events:none}

/* 時間のスライダー */
.timebar{flex:none;border-top:1px solid var(--line);background:#0b181d;padding:8px 12px 8px}
.trow{display:flex;align-items:flex-end;gap:10px}
.playBtn{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--acc);background:var(--acc);color:#0e1c22;font-size:18px;cursor:pointer}
.slider{flex:1;min-width:0}
.segs{display:flex;gap:2px;margin-bottom:4px}
.seg{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11.5px;text-align:center;padding:2px 2px;border-radius:5px;background:#16292f;color:var(--muted);cursor:pointer}
.seg.num{padding:2px 0;text-overflow:clip}
.seg-approach{background:#1d3340}.seg-bind{background:#2a3a2a}.seg-pierce{background:#3a2f45}.seg-inject{background:#45352a}.seg-inside{background:#173431}.seg-burst{background:#452a37}
#time{display:block;width:100%;accent-color:var(--acc);height:22px;margin:0}
.trow2{display:flex;align-items:center;gap:10px;margin-top:4px}
.tlabel{font-size:13px;color:var(--ink)}
:root[lang=en] .tlabel{font-family:var(--f-body);font-size:12px;line-height:1.35} /* 英語は等幅だと幅が足りずスマホで4行になるため */
.spacer{flex:1}
.faq details{border-top:1px solid var(--line);padding:6px 0}
.faq details:first-child{border-top:0}
.faq summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--ink)}
.faq p{margin:6px 0 4px;font-size:12.5px;line-height:1.75;color:var(--muted)}
.faq p .kind{display:inline}
/* 最後の行に印だけが残っても、互換モードと標準モードで行の高さが同じになるように（見えない空白を足す） */
.faq p::after{content:"\00a0"}
.faq button{display:block;margin-top:2px;background:var(--btn);border:1px solid var(--line);border-radius:6px;padding:3px 9px;font-size:12px;cursor:pointer}
.speeds{display:inline-flex;gap:3px;align-items:center;flex:none}
.spLab{font-size:11.5px;color:var(--dim);margin-right:2px}
.speeds button{padding:3px 8px!important;min-width:34px}
.speeds button,.conds button{background:var(--btn);border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:12.5px;cursor:pointer}
.speeds button[aria-pressed=true],.conds button[aria-pressed=true]{border-color:var(--acc);color:var(--acc);background:#173431}

/* 右の欄 */
.panel{width:330px;flex:none;border-left:1px solid var(--line);background:var(--panel);overflow-y:auto;padding:12px 12px 24px;display:flex;flex-direction:column;gap:10px}
.box{background:var(--box);border:1px solid var(--line);border-radius:8px;padding:9px 10px}
.box h2{margin:0 0 7px;font-size:12px;letter-spacing:.06em;color:var(--dim);font-weight:500}
.events{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.events button{width:100%;display:flex;gap:8px;align-items:baseline;text-align:left;background:none;border:1px solid transparent;border-radius:6px;padding:4px 6px;cursor:pointer;font-size:13px}
.events button:hover{border-color:var(--line);background:#16292f}
.events .eu{flex:none;width:68px;font-size:11px;color:var(--dim)}
.events li.cur button{border-color:var(--acc);background:#173431}
.events li.cur b{color:var(--acc)}
.conds{display:flex;flex-direction:column;gap:4px}
.conds button{text-align:left}
.stat{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:13px;line-height:1.5;margin:0}
.stat dt{color:var(--dim)}.stat dd{margin:0;font-family:var(--f-mono)}
.stat small{color:var(--dim);font-family:var(--f-body);font-size:10.5px}
.small2{font-size:11px;color:var(--dim);margin:6px 0 0}
details.small2>summary,.box summary.h2{cursor:pointer}
.box summary.h2{font-size:12px;letter-spacing:.06em;color:var(--dim)}
.box details[open]>summary.h2{margin-bottom:7px}
.legend2{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:3px;font-size:12px;color:var(--muted)}
.legend2 i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.kind{display:inline-block;font-size:10.5px;border:1px solid;border-radius:4px;padding:0 5px;margin-left:4px;vertical-align:1px;white-space:nowrap}
.kind.sure{color:var(--sure)}.kind.est{color:var(--est)}.kind.art{color:var(--art)}

/* このアプリについて */
.page[data-page=about]{overflow-y:auto;display:block}
#about{max-width:820px;margin:0 auto;padding:18px 18px 48px;font-size:14px;line-height:1.85;color:var(--ink)}
#about h2{font-family:var(--f-display);font-weight:400;font-size:22px;margin:6px 0 10px}
#about h3{font-size:15px;margin:22px 0 6px;color:var(--acc)}
#about ul{padding-left:20px;margin:0}
#about li{margin:3px 0}
#about .src li{font-size:13px;color:var(--muted)}
#about a{color:var(--acc)}

@media (max-width:860px){
  #topbar{flex-wrap:wrap;gap:6px}
  #tabs{margin-left:0;width:100%}
  #tabs button{flex:1 1 0;padding:5px 8px}
  #tabs button small{display:none}
  .page{flex-direction:column;overflow-y:auto}
  .stage{flex:none;height:72vh;min-height:420px}
  .panel{width:auto;border-left:0;border-top:1px solid var(--line);overflow:visible}
}
@media (max-width:600px){
  .brand > span{display:none}
  .brand b{font-size:16px}
  .now{max-width:calc(100% - 70px);font-size:11.5px;padding:6px 9px}
  .now b{font-size:13px}
  .camMode button{font-size:12px;padding:5px 10px}
  .howto{display:none}
  .seg{font-size:10px}
  .tip{max-width:calc(100% - 20px)}
}
.speeds button{white-space:nowrap}

/* 使い方の1行は、はじめの10秒だけ（図の上の札と重ならないように） */
@keyframes howtoOut{to{opacity:0;visibility:hidden}}