:root{--bg:#07121b;--panel:#0e1c28;--panel2:#132534;--line:#223848;--ink:#dfe8ee;--dim:#8ea3b1;--acc:#e8b64c;--acc2:#5fb3d9;--red:#e2574c;--f:system-ui,-apple-system,"Segoe UI",sans-serif;--mono:ui-monospace,Menlo,monospace}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.45 var(--f);overflow:hidden}
#app{display:grid;grid-template-columns:320px minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);height:100vh}
aside{background:var(--panel);overflow:hidden;display:flex;flex-direction:column;min-width:0}
#left{border-right:1px solid var(--line)}
#right{border-left:1px solid var(--line);width:400px;position:relative}
#right[hidden]{display:none}
header{padding:14px 16px 8px}
h1{font-size:19px;margin:0;letter-spacing:.02em}
.sub{margin:4px 0 0;color:var(--dim);font-size:12.5px}
.tabs{display:flex;border-bottom:1px solid var(--line);padding:0 8px}
.tab{flex:1;background:none;border:0;border-bottom:2px solid transparent;color:var(--dim);padding:8px 4px;font:inherit;cursor:pointer}
.tab.on{color:var(--ink);border-color:var(--acc)}
.pane{display:none;flex:1;min-height:0;flex-direction:column;padding:10px 12px;overflow:auto}
.pane.on{display:flex}
input[type=search],select{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:6px 8px;font:inherit;min-width:0}
input[type=search]{width:100%}
.row{margin:8px 0;color:var(--dim);font-size:12.5px}
#facets{margin-top:8px}
.facet{margin-bottom:6px}
.facet summary{cursor:pointer;color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:3px 0}
.chips{display:flex;flex-wrap:wrap;gap:4px;padding:4px 0}
.chip{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:2px 9px;font-size:12px;cursor:pointer}
.chip i{color:var(--dim);font-style:normal;margin-left:4px}
.chip.on{background:var(--acc);border-color:var(--acc);color:#1a1405}.chip.on i{color:#4a3a10}
.count{color:var(--dim);font-size:12px;margin:6px 0 4px}
ol{list-style:none;margin:0;padding:0}
#list li,#blist li,#clist li{padding:6px 8px;border-radius:6px;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:2px 8px;border-bottom:1px solid #16293799}
#list li:hover,#blist li:hover,#clist li:hover{background:var(--panel2)}
#list li.sel,#blist li.sel,#clist li.sel{background:#1c3549}
li b{font-weight:600}li .d{color:var(--dim);font-size:12px;font-family:var(--mono)}li .m{grid-column:1/-1;color:var(--dim);font-size:12px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:baseline}
.chk{display:block;margin:5px 0;cursor:pointer}.src{color:var(--dim);font-size:11px;border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:4px}
h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);margin:16px 0 6px}
#legend{list-style:none;padding:0;margin:0;columns:2;font-size:12.5px}
.note{color:var(--dim);font-size:12.5px;margin:0 0 6px}.note b{color:var(--ink)}
a{color:var(--acc2)}
#stage{position:relative;min-width:0;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden}
#globe{flex:1 1 0;height:0;min-height:0;width:100%;display:block;cursor:grab;outline:none}
#globe.drag{cursor:grabbing}
#tip{position:absolute;pointer-events:none;background:#0b1620ee;border:1px solid var(--line);border-radius:6px;padding:5px 9px;font-size:12.5px;max-width:280px;z-index:5}
#tip b{display:block}#tip span{color:var(--dim)}
#hud{position:absolute;top:12px;left:16px;pointer-events:none;display:flex;flex-direction:column}
#hud-date{font:600 26px var(--mono);letter-spacing:.04em;text-shadow:0 1px 6px #000}
#hud-sub{color:var(--dim);font-size:12.5px;text-shadow:0 1px 4px #000}
#loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);background:var(--bg)}
#time{flex:none;background:var(--panel);border-top:1px solid var(--line);padding:6px 12px 4px;min-width:0}
.tctl{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--dim)}
button{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:4px 10px;font:inherit;cursor:pointer}
button:hover{border-color:var(--dim)}#play.on{background:var(--acc);color:#1a1405;border-color:var(--acc)}
#tl{width:100%;height:74px;display:block}
#tl .bar{fill:#3d6c8a}#tl .bar.r{fill:#7d6a3a}#tl .axis text{fill:var(--dim);font-size:10.5px}#tl .axis path,#tl .axis line{stroke:var(--line)}
#tl .selection{fill:var(--acc);fill-opacity:.16;stroke:var(--acc)}#tl .now{stroke:var(--red);stroke-width:1.5}
#close{position:absolute;top:8px;right:10px;font-size:18px;line-height:1;padding:2px 8px;z-index:2}
#detail{overflow:auto;padding:14px 16px 24px;flex:1}
#detail h2{font-size:18px;margin:0 30px 2px 0}
#detail .k{color:var(--dim);font-size:12.5px;margin-bottom:8px}
.badge{display:inline-block;border:1px solid var(--line);border-radius:4px;padding:0 6px;font-size:11.5px;color:var(--dim);margin-right:4px}
.badge.w{border-color:#8a6a2a;color:var(--acc)}
dl{display:grid;grid-template-columns:118px 1fr;gap:3px 10px;margin:10px 0;font-size:13px}
dt{color:var(--dim)}dd{margin:0;min-width:0;overflow-wrap:anywhere}
.viewer{height:190px;border:1px solid var(--line);border-radius:8px;background:radial-gradient(#17303f,#0a1722);margin:8px 0 4px;position:relative}
.viewer canvas{width:100%;height:100%;display:block}
.vtabs{display:flex;gap:4px;margin-bottom:8px}.vtabs button{font-size:12px;padding:2px 8px}.vtabs button.on{border-color:var(--acc);color:var(--acc)}
.vcap{color:var(--dim);font-size:11.5px;margin:0 0 8px}
.sec{border-top:1px solid var(--line);margin-top:12px;padding-top:8px}
.sec h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.plist li,.rlist li{padding:5px 6px;border-radius:5px;cursor:pointer;font-size:13px;border-bottom:1px solid #16293799}
.plist li:hover,.rlist li:hover{background:var(--panel2)}.plist li.sel{background:#1c3549}
.plist .sw{display:inline-block;width:18px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.plist small,.rlist small{color:var(--dim);display:block}
.link{color:var(--acc2);cursor:pointer;text-decoration:underline;text-decoration-color:#5fb3d955}
.ktb{white-space:pre-wrap;font:12px/1.5 var(--mono);background:#0a1620;border:1px solid var(--line);border-radius:6px;padding:8px;max-height:320px;overflow:auto}
.nav{display:flex;gap:6px;margin-top:12px}
@media (max-width:1100px){#app{grid-template-columns:270px minmax(0,1fr)}#right{position:fixed;right:0;top:0;bottom:0;width:min(400px,92vw);z-index:10;box-shadow:-8px 0 30px #000a}}
@media (max-width:720px){#app{grid-template-columns:1fr;grid-template-rows:58vh minmax(0,1fr);height:100vh}#left{order:2;border-right:0;border-top:1px solid var(--line)}body{overflow:auto}}
.photo{margin:8px 0 4px}.photo img{width:100%;border-radius:8px;border:1px solid var(--line);display:block;background:#0a1620}
.photo figcaption{color:var(--dim);font-size:11.5px;margin-top:4px}.photo .cr{opacity:.85}
.steps{display:flex;flex-wrap:wrap;gap:3px;margin:4px 0 8px}
.st{font:11px var(--mono);padding:2px 5px;border-radius:4px;border-left:3px solid #3d6c8a}
.st.sighting{border-left-color:#5fb3d9}.st.approach{border-left-color:#7fd6a3}.st.attack,.st.hit{border-left-color:#ffd866}.st.miss{border-left-color:#888}.st.dive,.st.counterattack{border-left-color:#e2574c}.st.surface,.st.aftermath{border-left-color:#c79bf2}
.st.on{background:var(--acc);color:#1a1405;border-color:var(--acc)}.st.dec{outline:1px solid #ffd866}
.stepbox{background:#0a1620;border:1px solid var(--line);border-radius:8px;padding:8px 10px}.stepbox p{margin:6px 0}.stepbox dl{font-size:12.5px;margin:6px 0}.stepbox .nav{margin-top:6px}
button:disabled{opacity:.4;cursor:default}