/* BotBuhdy Moon Guide - shared styles for every tab - botbuhdy.com/moon/ */
:root{--bg:#080810;--panel:rgba(255,255,255,.035);--line:rgba(123,155,123,.16);--txt:#e6e6ea;--mut:#9a9aa6;
--acc:#9fc29f;--acc2:#d4af37;--sage:#7b9b7b;--gold:#d4af37;--moon:#dfe6ff;--r:16px;--headH:116px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#080810;color:var(--txt);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;overflow-x:hidden;min-height:100vh}
img{max-width:100%}
a{color:#9fc29f}
.aurora{position:fixed;inset:0;z-index:-3;pointer-events:none;
background:radial-gradient(ellipse 110% 80% at 18% 12%,rgba(123,155,123,.18) 0%,transparent 62%),
radial-gradient(ellipse 90% 70% at 82% 88%,rgba(212,175,55,.12) 0%,transparent 65%),
radial-gradient(ellipse 100% 90% at 50% 50%,rgba(100,140,200,.10) 0%,transparent 70%),
radial-gradient(ellipse 70% 50% at 70% 25%,rgba(123,155,123,.08) 0%,transparent 60%);
filter:blur(28px);animation:auroraShift 28s ease-in-out infinite}
@keyframes auroraShift{0%,100%{opacity:1}33%{opacity:.8}66%{opacity:1}}
.glow-1{position:fixed;top:-30%;left:-20%;width:60%;height:60%;background:radial-gradient(circle,rgba(123,155,123,.06) 0%,transparent 70%);z-index:-2;pointer-events:none;animation:drift1 30s ease-in-out infinite}
.glow-2{position:fixed;bottom:-30%;right:-20%;width:60%;height:60%;background:radial-gradient(circle,rgba(212,175,55,.04) 0%,transparent 70%);z-index:-2;pointer-events:none;animation:drift2 35s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,25px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,-35px)}}
#particles{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
#stars-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.28;
background-image:radial-gradient(1px 1px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 120px 80px,#cfd8ff,transparent),
radial-gradient(1.5px 1.5px at 200px 160px,#fff,transparent),radial-gradient(1px 1px at 260px 40px,#fff,transparent),
radial-gradient(1px 1px at 330px 210px,#aab8ff,transparent),radial-gradient(1px 1px at 80px 250px,#fff,transparent);background-size:360px 300px}

/* ---------- sticky header + tab bar ---------- */
.sticky-head{position:sticky;top:0;z-index:100;background:rgba(10,10,15,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(123,155,123,.14)}
.sticky-head .top{position:static;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1180px;margin:0 auto;padding:10px 16px 6px;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.brand{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:700;font-size:1.15em}
.brand .logo-icon{width:36px;height:36px;border-radius:50%;overflow:hidden;display:inline-block;flex:none}
.brand .logo-icon img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.guide-name{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);font-weight:700;text-decoration:none}
.tabs{max-width:1180px;margin:0 auto;position:relative}
.tabs-in{display:flex;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 12px 8px;scroll-padding:0 40px;-webkit-overflow-scrolling:touch}
.tabs-in::-webkit-scrollbar{display:none}
.tabs a{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;color:#b9b9c4;text-decoration:none;font-size:14px;font-weight:600;border:1px solid transparent;white-space:nowrap;transition:background .2s,color .2s}
.tabs a:hover{color:#fff;background:rgba(255,255,255,.05)}
.tabs a[aria-current=page]{color:#0a0a0f;background:linear-gradient(135deg,#d4af37,#b8941f);border-color:#d4af37}
.tabs a .tdot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.5}
.tabs::before,.tabs::after{content:"";position:absolute;top:0;bottom:6px;width:26px;pointer-events:none;z-index:2;opacity:0;transition:opacity .2s}
.tabs::before{left:0;background:linear-gradient(90deg,rgba(10,10,15,.95),transparent)}
.tabs::after{right:0;background:linear-gradient(270deg,rgba(10,10,15,.95),transparent)}
.tabs.fade-l::before,.tabs.fade-r::after{opacity:1}
@media (max-width:560px){.guide-name{display:none}.brand{font-size:1.05em}.tabs a{font-size:13.5px;padding:7px 11px}}
section[id],.panel[id],[id].anchor{scroll-margin-top:calc(var(--headH) + 10px)}

/* ---------- layout ---------- */
main{max-width:1180px;margin:0 auto;padding:0 14px 30px}
.panel{background:rgba(255,255,255,.035);border:1px solid rgba(123,155,123,.14);border-radius:var(--r);padding:18px;margin:16px 0;
-webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);box-shadow:0 10px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04)}
.panel h2{margin:0 0 8px;font-size:clamp(20px,2.6vw,26px);color:#fff;font-weight:700;line-height:1.25}
.panel h2::before{content:"";display:inline-block;width:22px;height:2px;margin:0 10px 0 0;vertical-align:middle;border-radius:1px;background:linear-gradient(90deg,#7b9b7b,#d4af37)}
.panel h3{color:#fff;margin:18px 0 6px;font-size:18px}
.prose p,.prose li{color:#c9c9d2}
.prose{font-size:16.5px}
.hint{color:#8f8f9c;font-size:14px;margin:0 0 10px}
.smallnote{font-size:12.5px;color:var(--mut)}
.kicker{margin:0 0 6px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);font-weight:700}
.lede{color:#c9c9d2;font-size:17.5px;max-width:720px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.two.wide-left{grid-template-columns:1.25fr 1fr}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.two,.two.wide-left,.three{grid-template-columns:1fr}}
.btn{display:inline-block;background:rgba(123,155,123,.12);border:1px solid rgba(123,155,123,.38);color:#e6efe6;border-radius:999px;padding:9px 16px;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;transition:all .25s;font-family:inherit}
.btn:hover{border-color:#9fc29f;background:rgba(123,155,123,.22)}
.btn.on,.btn-gold{background:linear-gradient(135deg,#d4af37 0%,#b8941f 100%);color:#0a0a0f;border-color:#d4af37}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.15);color:#ccc}
.btn.small{padding:6px 12px;font-size:13px}
.btn:focus-visible,.tabs a:focus-visible,button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.callout{background:linear-gradient(90deg,rgba(212,175,55,.09),rgba(123,155,123,.06));border-left:3px solid #d4af37;border-radius:10px;padding:10px 14px;margin:12px 0;font-size:15.5px;color:#d9d9e0}
.myth{background:rgba(255,120,120,.06);border-left:3px solid #ff8a8a;border-radius:10px;padding:10px 14px;margin:12px 0}
.myth b{color:#ffb0b0}

/* ---------- page hero ---------- */
.phero{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;margin:16px 0 8px;border-radius:22px;overflow:hidden;
background:#04060e;border:1px solid rgba(123,155,123,.16);box-shadow:0 20px 70px rgba(0,0,0,.55),0 0 80px rgba(100,140,200,.08);min-height:380px}
.phero .ptext{padding:34px 22px 34px 38px;position:relative;z-index:2}
.phero h1{font-size:clamp(34px,5.4vw,60px);line-height:1.04;margin:0 0 14px;background:linear-gradient(90deg,#fff 0%,#f3ead0 55%,#d4af37 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.phero .pimg{position:relative;height:100%;min-height:300px}
.phero .pimg picture,.phero .pimg img{display:block;width:100%;height:100%;object-fit:cover}
.phero .pimg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#04060e 0%,rgba(4,6,14,0) 30%);z-index:1;pointer-events:none}
.phero .pcredit{position:absolute;right:10px;bottom:6px;margin:0;font-size:11px;color:rgba(220,220,235,.7);z-index:3;text-shadow:0 1px 3px #000;max-width:70%;text-align:right}
@media (max-width:900px){.phero{grid-template-columns:1fr;min-height:0}.phero .pimg{grid-row:1;min-height:0;aspect-ratio:16/10}
.phero .pimg::before{background:linear-gradient(0deg,#04060e 0%,rgba(4,6,14,0) 40%)}
.phero .ptext{padding:4px 18px 26px}.phero .pcredit{left:10px;right:10px;max-width:none;bottom:4px}}

/* ---------- figures ---------- */
.fig{margin:14px 0;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden}
.fig picture,.fig img{display:block;width:100%;height:auto}
.fig img{cursor:zoom-in;background:#0b0c14}
.fig figcaption{padding:9px 12px 11px;font-size:13.5px;color:#b5b5c0;line-height:1.45}
.fig .credit{display:block;font-size:11.5px;color:#7f7f8c;margin-top:3px}
.ai-badge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0a0a0f;background:#9fc29f;border-radius:6px;padding:1px 6px;margin-right:6px;vertical-align:1px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.gallery .fig{margin:0}
.fig.sq img{aspect-ratio:1/1;object-fit:cover}
.fig.wide img{aspect-ratio:16/9;object-fit:cover}
dialog.lightbox{padding:0;border:0;background:rgba(0,0,0,.92);max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:#ddd}
dialog.lightbox::backdrop{background:rgba(0,0,0,.85)}
dialog.lightbox img{max-width:96vw;max-height:84vh;display:block;margin:4vh auto 8px;object-fit:contain;cursor:zoom-out}
dialog.lightbox p{text-align:center;font-size:13px;margin:0 16px;color:#bbb}
dialog.lightbox button{position:fixed;top:10px;right:12px;font-size:26px;background:rgba(255,255,255,.1);color:#fff;border:0;border-radius:50%;width:44px;height:44px;cursor:pointer}

/* ---------- numbers strip / stats ---------- */
.numbers{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.num{background:rgba(255,255,255,.04);border:1px solid rgba(123,155,123,.14);border-radius:14px;padding:12px 14px}
.num b{display:block;font-size:24px;line-height:1.15;color:#fff;font-weight:800;letter-spacing:-.01em}
.num span{display:block;font-size:13px;color:#a6a6b2;margin-top:3px;line-height:1.35}
.strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
.strip .num{flex:0 0 170px;scroll-snap-align:start}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tile{position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;text-decoration:none;color:var(--txt);background:rgba(255,255,255,.035);border:1px solid rgba(123,155,123,.16);transition:transform .2s,border-color .2s}
.tile:hover{transform:translateY(-3px);border-color:rgba(212,175,55,.5)}
.tile picture,.tile img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.tile .tt{padding:12px 14px 14px}
.tile h3{margin:0 0 4px;font-size:18px;color:#fff}
.tile p{margin:0;font-size:14px;color:#a9a9b5}
.tile .go{color:#d4af37;font-weight:700;font-size:13.5px;margin-top:8px;display:inline-block}
.soon{display:flex;flex-wrap:wrap;gap:8px}
.soon span{font-size:13.5px;padding:6px 12px;border-radius:999px;border:1px dashed rgba(255,255,255,.18);color:#9a9aa6}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;border-radius:12px;border:1px solid rgba(255,255,255,.07)}
table.data{width:100%;border-collapse:collapse;font-size:14.5px;min-width:480px}
table.data th,table.data td{padding:8px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top}
table.data th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#9a9aa6;background:rgba(255,255,255,.03)}
table.data tr.hl td{background:rgba(212,175,55,.08)}
.tag{display:inline-block;font-size:11px;font-weight:800;border-radius:6px;padding:1px 6px;margin-left:4px;vertical-align:1px}
.tag.super{background:#d4af37;color:#0a0a0f}.tag.micro{background:#5d6b8f;color:#fff}.tag.blue{background:#6ea8ff;color:#06102a}

/* ---------- interactive canvases ---------- */
.stage{position:relative;border-radius:14px;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,rgba(22,26,40,.92),rgba(7,8,14,.95));border:1px solid rgba(255,255,255,.06)}
.stage canvas{display:block;width:100%;touch-action:none;-webkit-user-select:none;user-select:none}
.stage .overlay-hint{position:absolute;left:10px;bottom:8px;font-size:12px;color:rgba(220,228,255,.7);pointer-events:none}
dl.readout{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:10px}
dl.readout div{background:rgba(255,255,255,.04);border-radius:10px;padding:7px 10px}
dl.readout dt{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#9a9aa6}
dl.readout dd{margin:2px 0 0;font-weight:700;font-size:15px}
input[type=range]{width:100%;accent-color:#d4af37;height:28px}
.seg{display:inline-flex;border:1px solid rgba(123,155,123,.4);border-radius:999px;padding:2px;flex-wrap:wrap}
.seg button{background:transparent;border:0;color:#cfe0cf;font-weight:700;font-size:13.5px;padding:7px 12px;border-radius:999px;cursor:pointer;min-height:36px;font-family:inherit}
.seg button[aria-pressed=true]{background:rgba(123,155,123,.85);color:#0a0a0f}

/* ---------- FAQ + sources ---------- */
.faq details{border-bottom:1px solid rgba(255,255,255,.07);padding:10px 0}
.faq summary{cursor:pointer;font-weight:700;color:#eee}
.faq details p{margin:8px 0 2px;color:#c9c9d2}
.sources ol,.sources ul{padding-left:20px;margin:6px 0;font-size:14px;color:#a9a9b5}
.sources li{margin:4px 0}
.pager{display:flex;justify-content:space-between;gap:12px;margin:20px 0 6px;flex-wrap:wrap}
.pager a{flex:1 1 240px;padding:14px 16px;border-radius:14px;text-decoration:none;background:rgba(255,255,255,.035);border:1px solid rgba(123,155,123,.16);color:#fff}
.pager a:hover{border-color:rgba(212,175,55,.5)}
.pager small{display:block;color:#9a9aa6;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.pager .nx{text-align:right}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.aurora,.glow-1,.glow-2{animation:none}html{scroll-behavior:auto}}

.site-footer{text-align:center;padding:26px 16px 40px;color:#777;font-size:13.5px;border-top:1px solid rgba(255,255,255,.06);margin-top:20px}
.site-footer .brand{justify-content:center;margin-bottom:8px;font-size:15px}
.site-footer .brand img{border-radius:50%}
.footer-note{max-width:720px;margin:6px auto}
.footer-links{display:flex;gap:18px;justify-content:center;margin:10px 0;flex-wrap:wrap}
.site-footer a{color:#aaa}.site-footer a:hover{color:#d4af37}
/* ---------- start page live moon ---------- */
@media (min-width:901px){.live-hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.live-wrap{position:relative;padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center}
#liveMoon{width:min(100%,520px);aspect-ratio:1/1;height:auto;display:block}
.live-wrap .pcredit{position:static;text-align:center;max-width:none;margin-top:4px}
.live-phase{margin:6px 0 2px;font-size:22px}.live-phase b{color:#fff}.live-phase span{color:#d4af37;font-weight:700;margin-left:6px;font-size:17px}
@media (max-width:900px){.live-hero .live-wrap{grid-row:1;padding:14px 14px 0}#liveMoon{width:min(86vw,420px)}}
.super-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center;max-width:640px;margin:10px auto;background:#000;border-radius:14px;padding:14px}
.super-compare figure{margin:0;text-align:center}.super-compare img{display:block;margin:0 auto;height:auto}
.super-compare figcaption{font-size:13px;color:#bbb;margin-top:6px}
/* ---------- origin scroll story ---------- */
.story{position:relative;height:520vh;margin:16px 0}
.story-stage{position:sticky;top:calc(var(--headH) + 6px);height:calc(100vh - var(--headH) - 16px);border-radius:18px;overflow:hidden;border:1px solid rgba(123,155,123,.16);background:#030308}
.story-stage canvas{display:block;width:100%;height:100%!important}
.story-label{position:absolute;left:14px;top:12px;right:14px;margin:0;font-weight:800;font-size:clamp(16px,2.4vw,22px);color:#fff;text-shadow:0 2px 8px #000}
.story-steps{position:absolute;left:0;right:0;bottom:12px;padding:0 12px;pointer-events:none}
.story-step{display:none;max-width:560px;margin:0 auto;background:rgba(10,10,15,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(123,155,123,.25);border-radius:14px;padding:10px 14px;font-size:15px;color:#ddd}
.story-step.on{display:block;animation:fadeUp .5s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.story-hint{position:absolute;right:14px;top:44px;font-size:12px;color:#aaa}
@media (prefers-reduced-motion:reduce){.story-step.on{animation:none}}
.theory{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.theory div{background:rgba(255,255,255,.04);border:1px solid rgba(123,155,123,.14);border-radius:14px;padding:12px 14px}
.theory h3{margin:0 0 4px;font-size:17px}.theory .v{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.v.good{color:#7be3a6}.v.mid{color:#ffd27a}.v.bad{color:#ff9a9a}
.theory p{margin:6px 0 0;font-size:14.5px;color:#c4c4cc}
/* ---------- inside: peel ---------- */
#peel{display:block;width:100%;max-width:440px;margin:0 auto;height:auto}
#peel .layer{cursor:pointer;transition:transform .7s cubic-bezier(.5,-0.3,.6,1.2),opacity .6s ease;transform-origin:210px 210px;stroke:rgba(0,0,0,.35);stroke-width:1}
#peel .layer.gone{transform:scale(1.25) rotate(-25deg);opacity:0;pointer-events:none}
#peel .layer.sel{stroke:#d4af37;stroke-width:2.5}
#peel .layer:focus{outline:none;stroke:#fff;stroke-width:2}
#peelInfo{min-height:150px}#peelInfo h3{margin-top:0}
@media (prefers-reduced-motion:reduce){#peel .layer{transition:opacity .2s}#peel .layer.gone{transform:none}}
/* ---------- globe & crater cards ---------- */
.globe-wrap{max-width:560px;margin:0 auto}
#globe{display:block;width:100%;aspect-ratio:1;cursor:grab;touch-action:none;border-radius:50%}
#globe:active{cursor:grabbing}
.legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}
.craters{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.crater-card{background:rgba(255,255,255,.04);border:1px solid rgba(123,155,123,.16);border-radius:14px;overflow:hidden;cursor:pointer;transition:border-color .2s,transform .2s}
.crater-card:hover,.crater-card.on{border-color:#d4af37;transform:translateY(-2px)}
.crater-card .fig{margin:0;border-radius:0}
.crater-card .cc-body{padding:10px 14px 14px}.crater-card h3{margin:0 0 4px;font-size:17px}
.crater-card .cc-go{font-size:12.5px;font-weight:700;color:#d4af37}
.crater-card p{margin:6px 0 0;font-size:14.5px;color:#c4c4cc}
/* ---------- far side: flip card ---------- */
.flip{perspective:1200px;max-width:460px;margin:0 auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.flip-in{position:relative;transition:transform .9s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d;aspect-ratio:1}
.flip.flipped .flip-in{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:50%;overflow:hidden}
.flip-face img{width:100%;height:100%;object-fit:cover;display:block}
.flip-back{transform:rotateY(180deg)}
.flip-cap{text-align:center;font-weight:700;margin:10px 0 2px}
.flip:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:12px}
@media (prefers-reduced-motion:reduce){.flip-in{transition:none}}
#lockCv{touch-action:none;cursor:grab}
ul.timeline{list-style:none;padding:0;margin:0;border-left:2px solid rgba(212,175,55,.5)}
ul.timeline li{position:relative;padding:4px 0 12px 18px}
ul.timeline li:before{content:"";position:absolute;left:-7px;top:9px;width:12px;height:12px;border-radius:50%;background:#d4af37}
ul.timeline b{color:#fff}
.flip-face picture{display:block;width:100%;height:100%}
/* ---------- tides ---------- */
.tide-ui{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){.tide-ui{grid-template-columns:1fr}}
#tideCv{touch-action:none;cursor:grab}
#tideChart{display:block;width:100%;margin-top:8px;border-radius:10px;background:rgba(0,0,0,.25)}
.tide-ctrl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.tide-ctrl input[type=range]{flex:1 1 200px;min-width:0}
.playbtn{width:44px;height:44px;border-radius:50%;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.tg{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#ddd;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:6px 12px;cursor:pointer;min-height:36px}
.tg input{accent-color:#d4af37;width:16px;height:16px}
.tide-big{font-size:34px;font-weight:800;line-height:1}
.tide-kind{font-size:14px;color:#d4af37;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
/* ---------- landings: DSKY + claims + video ---------- */
.dsky{background:linear-gradient(#3b3d40,#2a2b2e);border:2px solid #555;border-radius:12px;padding:14px;max-width:440px;margin:0 auto;font-family:ui-monospace,Menlo,Consolas,monospace;box-shadow:inset 0 0 0 4px #1d1e20}
.dsky-row{display:flex;gap:10px;align-items:stretch}
.dsky-lights{display:grid;grid-template-columns:1fr 1fr;gap:5px;flex:0 0 46%}
.dsky-lights span{background:#4a4a40;color:#2a2a24;font-size:10px;font-weight:700;text-align:center;padding:6px 2px;border-radius:3px;letter-spacing:.04em}
.dsky.alarm .dsky-lights .pa{background:#ffb347;color:#3a2000;box-shadow:0 0 12px #ffb347}
.dsky.alarm .dsky-lights .rs{background:#ffe08a;color:#3a2a00}
.dsky.landed .dsky-lights .ok{background:#a8ff9e;color:#0a3a00}
.dsky-disp{flex:1;background:#0b120b;border-radius:6px;padding:8px 10px;color:#5dff7a;text-shadow:0 0 6px rgba(93,255,122,.6)}
.dsky-disp small{display:block;color:#3d8f4b;font-size:10px;letter-spacing:.1em}
.dsky-disp b{display:block;font-size:30px;line-height:1.1;letter-spacing:.08em}
.dsky.alarm .dsky-disp #dsCode{color:#ffcf5d;text-shadow:0 0 8px rgba(255,207,93,.8)}
@media (prefers-reduced-motion:no-preference){.dsky.alarm .pa{animation:blink 0.8s steps(2) infinite}}
@keyframes blink{50%{opacity:.35}}
#dsMsg{min-height:84px;margin-top:10px;font-family:inherit}
.claim{border:1px solid rgba(123,155,123,.16);border-radius:14px;padding:4px 16px 12px;margin:14px 0;background:rgba(255,255,255,.025)}
.claim h3{margin:12px 0 6px}.claim .says{color:#ffb0b0;font-weight:700}.claim .phys{color:#9fe0b0;font-weight:700}
.vid{margin:0}.vid video{display:block;width:100%;height:auto;border-radius:12px;background:#000}
.vid figcaption{font-size:14px;color:#bbb;margin-top:6px}
.vid .credit{display:block;font-size:12px;color:#888}
/* ---------- Lunatic Lore ---------- */
.lore-stats{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.lore-stats div{background:rgba(255,255,255,.05);border-radius:10px;padding:6px 12px;font-size:13px;color:#aaa}
.lore-stats b{color:#fff;font-size:16px;margin-left:4px}
.lore-ladder{display:flex;gap:6px;flex-wrap:wrap;font-size:14px;color:#ccc;margin:6px 0 12px}
.lore-ladder span{background:rgba(255,255,255,.04);border-radius:999px;padding:4px 10px}
#lgProg{display:flex;gap:4px;flex-wrap:wrap;font-size:20px;margin-bottom:6px}
#lgProg span{opacity:.35;filter:grayscale(1)}#lgProg span.cur{opacity:1;filter:none;transform:scale(1.2)}
#lgProg span.ok{opacity:1;filter:none}#lgProg span.bad{opacity:.6;filter:grayscale(1) brightness(.6)}
#lgLevel{font-size:13px;color:#d4af37;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:0}
#lgQ{font-size:clamp(20px,3vw,26px);line-height:1.3;margin:8px 0 14px}
#lgOpts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:600px){#lgOpts{grid-template-columns:1fr}}
.opt{background:rgba(255,255,255,.05);border:1px solid rgba(123,155,123,.3);color:#eee;border-radius:14px;padding:13px 14px;font-size:16px;text-align:left;cursor:pointer;font-family:inherit;min-height:52px;transition:background .15s,border-color .15s}
.opt:hover:not(:disabled){border-color:#d4af37;background:rgba(212,175,55,.08)}
.opt:disabled{cursor:default;opacity:.7}
.opt.right{background:rgba(80,200,120,.2);border-color:#5fd38a;opacity:1}
.opt.wrong{background:rgba(255,90,90,.18);border-color:#ff7b7b;opacity:1}
.opt.bounce{animation:bounce .5s}.opt.shake{animation:shake .4s}
@keyframes bounce{40%{transform:scale(1.04)}}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
#lgFb{margin-top:14px;display:grid;grid-template-columns:180px 1fr;gap:14px;align-items:start;background:rgba(255,255,255,.03);border-radius:14px;padding:12px}
#lgFb[hidden]{display:none}
@media (max-width:600px){#lgFb{grid-template-columns:1fr}}
#lgFb.pop{animation:fadeUp .35s ease}
#lgFb img{width:100%;height:auto;border-radius:10px;display:block}
p.verdict{font-weight:800;font-size:18px;margin:0 0 4px}p.verdict.ok{color:#7be3a6}p.verdict.bad{color:#ffb0b0}
.lore-end{text-align:center}
#leEmoji{font-size:84px;line-height:1;display:inline-block}
#leEmoji.rise{animation:rise 1.1s cubic-bezier(.2,.9,.3,1.3)}
@keyframes rise{from{transform:translateY(40px) scale(.4);opacity:0}to{transform:none;opacity:1}}
#leRank{font-size:28px;font-weight:800;margin:6px 0 0}#leScore{color:#d4af37;font-weight:700;margin:4px 0}
.share-box{background:rgba(255,255,255,.05);border:1px dashed rgba(212,175,55,.5);border-radius:12px;padding:10px 14px;margin:12px auto;max-width:520px;font-size:15px}
#leReview{text-align:left;max-width:760px;margin:14px auto 0;padding-left:18px;font-size:14px;color:#ccc}
#leReview li{margin:4px 0}#leReview li.ok{color:#bde8c9}#leReview li.bad{color:#f0c4c4}
@media (prefers-reduced-motion:reduce){.opt.bounce,.opt.shake,#lgFb.pop,#leEmoji.rise{animation:none}}
/* ---- Wave 2 ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pp{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 16px}
.pp-label{margin:0 0 8px;font-size:14.5px;color:#cfd3dc}.pp-label b{color:#fff}
.pp-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pp-search{position:relative;flex:1 1 220px;min-width:0}
.pp-search input{width:100%;background:#0b1230;color:var(--txt);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:16px;color-scheme:dark}
.pp-list{position:absolute;z-index:30;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;background:#0d1330;border:1px solid rgba(123,155,123,.35);border-radius:12px;max-height:260px;overflow:auto}
.pp-list li{padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14.5px}.pp-list li:hover,.pp-list li:focus{background:rgba(123,155,123,.25);outline:none}
.pp-empty{color:var(--mut);cursor:default}
.ecl-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ecl-list li{display:grid;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:center;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.ecl-list li.no{opacity:.6}
.ecl-ic{width:54px;height:54px}
.ecl-list b{color:#fff}.ecl-list small{display:block;color:#b8bcc8;font-size:13.5px;line-height:1.45}
.ecl-badge{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:2px;background:rgba(123,155,123,.3);color:#d9ecd9}
.ecl-badge.tot{background:rgba(212,175,55,.3);color:#ffe9a6}.ecl-badge.blood{background:rgba(190,60,40,.35);color:#ffc9b8}
.obs-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.obs-cal .dow{font-size:12px;color:var(--mut);text-align:center;font-weight:700}
.obs-day{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:5px 3px 6px;text-align:center;min-height:86px;font-size:11.5px;line-height:1.3;cursor:pointer;color:var(--txt);font-family:inherit}
.obs-day canvas{width:30px;height:30px;display:block;margin:2px auto}
.obs-day b{display:block;font-size:13px;color:#fff}
.obs-day.best{border-color:rgba(212,175,55,.75);box-shadow:0 0 0 1px rgba(212,175,55,.35) inset}
.obs-day.dark{border-color:rgba(120,150,230,.6)}
.obs-day.today{outline:2px solid #9fc29f;outline-offset:1px}
.obs-day.on{background:rgba(123,155,123,.2)}
.obs-day .tg2{display:block;font-size:10.5px;color:#ffe08a;font-weight:700}
.obs-day.dark .tg2{color:#b9c8ff}
.obs-detail{margin-top:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.obs-detail h3{margin:0 0 6px}
.cloud-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.cloud-row span{background:rgba(255,255,255,.05);border-radius:8px;padding:4px 8px;font-size:13px}
.lineup{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:14px 10px;padding:10px 4px 6px}
.lineup figure{margin:0;text-align:center;flex:0 0 auto}
.lineup .ball{border-radius:50%;margin:0 auto 6px;box-shadow:inset -6px -6px 14px rgba(0,0,0,.45)}
.lineup figcaption{font-size:12px;color:#cfd3dc;line-height:1.3;max-width:96px}
.lineup figcaption b{display:block;color:#fff;font-size:12.5px}
.count-bars{display:grid;gap:6px}
.count-bars div{display:grid;grid-template-columns:76px minmax(0,1fr) 44px;align-items:center;gap:8px;font-size:14px}
.count-bars i{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,#7b9b7b,#d4af37);min-width:3px}
.count-bars span:last-child{text-align:right;font-weight:800;color:#fff}
.planet-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:18px;align-items:center}
@media (max-width:760px){.planet-card{grid-template-columns:1fr}}
.life-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px}
.life-card{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.life-card h3{margin:0 0 6px;font-size:17px}
.life-meter{display:flex;gap:4px;margin:4px 0 8px}.life-meter i{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.1)}
.life-meter i.on{background:linear-gradient(90deg,#7b9b7b,#d4af37)}
.life-card ul{margin:0;padding-left:18px;font-size:14.5px}.life-card li{margin:3px 0}
.life-card .yes::marker{content:"\2714  ";color:#9fc29f}.life-card .no::marker{content:"\2716  ";color:#e39b8c}
.mission-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.mission-list li{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:9px 12px;cursor:pointer}
.mission-list li:hover,.mission-list li.on{border-color:rgba(212,175,55,.6)}
.mission-list .yr{font-weight:800;color:#ffe08a;font-size:14px}
.mission-list b{color:#fff}.mission-list small{display:block;color:#b8bcc8;font-size:13.5px;line-height:1.45}
.mission-list .flag{font-size:11px;font-weight:800;text-transform:uppercase;border-radius:999px;padding:1px 7px;margin-left:6px;background:rgba(123,155,123,.3);color:#d9ecd9}
.mission-list .flag.fail{background:rgba(190,60,40,.3);color:#ffc9b8}.mission-list .flag.crew{background:rgba(212,175,55,.3);color:#ffe9a6}
.explore-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.explore-grid .globe-side{position:sticky;top:calc(var(--headH) + 10px)}
@media (max-width:900px){.explore-grid{grid-template-columns:1fr}.explore-grid .globe-side{position:static}}
.mission-scroll{max-height:640px;overflow:auto;padding-right:4px}
@media (max-width:900px){.mission-scroll{max-height:none}}
.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.fact{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:14px;padding:14px;font-size:15px}
.fact b{display:block;color:#ffe08a;font-size:20px;margin-bottom:4px}
.myth-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.ecl-stage{position:relative}.ecl-stage canvas{display:block;width:100%;border-radius:14px;background:#04060e;touch-action:pan-y}
.ecl-ctrl{display:grid;gap:10px;margin-top:10px}
.ecl-ctrl label{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;align-items:center;font-size:14.5px}
@media (max-width:600px){.ecl-ctrl label{grid-template-columns:1fr;gap:2px}}
.ecl-status{font-size:16px;font-weight:700;color:#fff;margin:8px 0 0;min-height:2.6em}
.planet-switch{margin:0 0 14px}
/* ---- Section navigation (compact bar + All sections panel) ---- */
.sticky-head .top{padding:8px 14px;gap:10px}
.top .guide-name{flex:none}
.secnav{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;max-width:560px;margin:0 auto}
.sn-arrow{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;font-size:26px;line-height:1;color:#e8e8ee;text-decoration:none;border:1px solid rgba(123,155,123,.28);background:rgba(255,255,255,.04);transition:background .2s,border-color .2s,transform .15s}
.sn-arrow:hover{background:rgba(212,175,55,.16);border-color:rgba(212,175,55,.6)}
.sn-arrow:active{transform:scale(.94)}
.sn-arrow.off{opacity:.25}
.sn-cur{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;padding:5px 14px 5px 6px;border-radius:999px;text-decoration:none;color:#fff;border:1px solid rgba(212,175,55,.45);background:linear-gradient(135deg,rgba(212,175,55,.16),rgba(123,155,123,.10));transition:border-color .2s,background .2s;min-height:44px}
.sn-cur:hover,.sn-cur[aria-expanded=true]{border-color:#d4af37;background:linear-gradient(135deg,rgba(212,175,55,.26),rgba(123,155,123,.16))}
.sn-ic{flex:none;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);font-size:18px}
.sn-txt{flex:1 1 auto;min-width:0;line-height:1.15}
.sn-txt small{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#cdb56a;font-weight:700}
.sn-txt b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sn-all{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#e6d9a8}
.sn-cur[aria-expanded=true] .sn-all svg{transform:rotate(180deg)}
.sn-all svg{transition:transform .2s}
@media (max-width:700px){.top .guide-name,.brand .brand-t{display:none}.sn-all{font-size:0;gap:0}.sn-all svg{width:14px;height:14px}.sticky-head .top{padding:7px 10px}.secnav{gap:5px}.sn-arrow{width:38px;height:38px}}
@media (max-width:360px){.brand{display:none}}
.np-backdrop{position:fixed;inset:0;z-index:140;background:rgba(3,4,10,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.np-backdrop[hidden]{display:none}
.navpanel{display:none;position:fixed;z-index:150;left:50%;top:calc(var(--headH) + 8px);transform:translateX(-50%);width:min(1120px,calc(100vw - 24px));max-height:calc(100vh - var(--headH) - 20px);overflow:auto;overscroll-behavior:contain;
background:linear-gradient(160deg,rgba(24,26,40,.86),rgba(10,11,20,.9));-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
border:1px solid rgba(212,175,55,.28);border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);padding:14px 18px 18px}
.navpanel.open,.navpanel:target{display:block;animation:npIn .22s ease-out}
@keyframes npIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
.np-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.np-head p{margin:0;font-weight:800;font-size:17px;color:#fff}.np-head p span{font-weight:500;font-size:13px;color:var(--mut);margin-left:8px}
.np-close{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;font-size:26px;color:#fff;text-decoration:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.np-close:hover{background:rgba(255,255,255,.14)}
.np-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 18px}
.np-group h2{margin:10px 0 6px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#cdb56a}
.np-group h2::before{display:none}
.np-items{display:grid;gap:4px}
.np-item{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:12px;text-decoration:none;color:#e9e9ef;border:1px solid transparent;transition:background .15s,border-color .15s}
.np-item:hover,.np-item:focus-visible{background:rgba(255,255,255,.06);border-color:rgba(123,155,123,.35);outline:none}
.np-item[aria-current=page]{background:linear-gradient(135deg,rgba(212,175,55,.28),rgba(212,175,55,.10));border-color:rgba(212,175,55,.7)}
.np-ic{flex:none;width:36px;height:36px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;background:rgba(255,255,255,.06)}
.np-item[aria-current=page] .np-ic{background:rgba(212,175,55,.3)}
.np-t{min-width:0;line-height:1.25}.np-t b{display:block;font-size:14.5px;color:#fff}.np-t small{display:block;font-size:12.5px;color:#a9abb8}
.np-subs{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 4px 55px}
.np-subs a{font-size:12.5px;padding:4px 9px;border-radius:999px;text-decoration:none;color:#d9dbe6;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.np-subs a:hover{border-color:rgba(212,175,55,.6)}.np-subs a[aria-current=page]{background:rgba(212,175,55,.35);color:#fff;border-color:#d4af37}
@media (max-width:900px){.np-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
 .navpanel{left:0;right:0;top:0;bottom:0;transform:none;width:auto;max-height:none;height:100%;border-radius:0;border:0;padding:max(14px,env(safe-area-inset-top)) 14px max(24px,env(safe-area-inset-bottom));background:linear-gradient(170deg,rgba(18,20,34,.9),rgba(6,7,14,.94))}
 @keyframes npIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
 .np-head{position:sticky;top:-14px;padding:6px 0 8px;background:inherit;z-index:2}
 .np-grid{grid-template-columns:1fr;gap:0}
 .np-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 .np-item{gap:8px;padding:8px;min-height:52px;background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.06)}
 .np-ic{width:32px;height:32px;font-size:18px;border-radius:10px}
 .np-t b{line-height:1.2}
 .np-t small{display:none}.np-t b{font-size:14px}
 .np-subs{grid-column:1/-1;margin:0 0 4px}
}
@media (prefers-reduced-motion:reduce){.navpanel.open,.navpanel:target{animation:none}}
body.np-lock{overflow:hidden}
.pager .pg-all{flex:0 1 180px;text-align:center}
.pager .pg-gap{flex:1 1 240px}
@media (max-width:600px){.pager .pg-all{order:3;flex:1 1 100%}}
.skip-link{position:absolute;left:12px;top:-60px;z-index:300;background:#d4af37;color:#0a0a0f;font-weight:800;padding:10px 14px;border-radius:10px;text-decoration:none}
.skip-link:focus{top:10px}
main:focus{outline:none}
/* planet switcher */
.planet-card[hidden]{display:none}
.planet-card{opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease}
.planet-card.on{opacity:1;transform:none}
.planet-switch button small{opacity:.7;font-weight:600;margin-left:3px}
.mini-lineup{list-style:none;margin:12px 0 14px;padding:12px;display:flex;flex-wrap:wrap;gap:12px 14px;align-items:flex-end;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px}
.mini-lineup li{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:120px;font-size:12px;line-height:1.3}
.mini-lineup .mb{display:block;border-radius:50%;margin-bottom:6px;box-shadow:inset -6px -4px 10px rgba(0,0,0,.45)}
.mini-lineup .ours .mb{outline:2px solid #d4af37;outline-offset:3px}
.mini-lineup b{font-size:13px}
.mini-lineup .km{color:#d4af37;font-weight:700}
.mini-lineup .mf{color:#aab3aa}
@media (prefers-reduced-motion:reduce){.planet-card{transition:none;transform:none}}
@media (max-width:760px){.planet-card img{max-height:320px;width:100%;object-fit:cover;border-radius:14px}}
.geo-msg{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:10px 0 0}.geo-msg[hidden]{display:none}.geo-msg span{flex:1 1 220px}