/* Homepage skin: brings the existing widgets (header, AI chat, games, tonight, visitor globe, stars,
   on-this-day, comments, footer) into the same look as the new sections: square edges, thin lines,
   Barlow labels, one gold accent. Only applies to <body class="h2skin">; the widgets' code is untouched. */

body.h2skin { background: var(--n-ink); }
body.h2skin .meteor { display: none; }
body.h2skin #star-canvas { opacity: 0.55; }

/* ---------- header ---------- */
body.h2skin #header { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
body.h2skin #header.scrolled { background: rgba(3,5,10,0.82); border-bottom-color: var(--n-line); }
body.h2skin #header .logo { font-family: var(--n-latin); font-weight: 600; font-size: 16px; letter-spacing: 0.3em; }
body.h2skin #header .logo span { font-weight: 400; letter-spacing: 0.3em; color: rgba(255,255,255,0.5); }
body.h2skin header nav a { font-family: var(--n-label); font-weight: 600; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.68); }
html[lang="zh"] body.h2skin header nav a { font-size: 13.5px; letter-spacing: 0.06em; }
body.h2skin header nav a:hover, body.h2skin header nav a[aria-current="page"] { color: #fff; }
body.h2skin header nav a[aria-current="page"]::after { height: 1px; border-radius: 0; background: var(--n-sun); left: 0; right: 0; bottom: -8px; }
body.h2skin .login-btn, body.h2skin .lang-current { border-radius: 0 !important; font-family: var(--n-label) !important; letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px !important; }
body.h2skin .login-btn { border: 1px solid rgba(255,255,255,0.35) !important; background: transparent !important; }
body.h2skin .login-btn:hover { border-color: #fff !important; }
body.h2skin .lang-pop { border-radius: 0 !important; background: rgba(8,10,16,0.97) !important; border: 1px solid var(--n-line) !important; box-shadow: 0 30px 80px rgba(0,0,0,0.5) !important; }
body.h2skin .lang-btn { border-radius: 0 !important; font-family: var(--n-display); }
body.h2skin .user-profile img { border-radius: 0; }
body.h2skin #progress-bar { height: 1px; background: var(--n-sun); box-shadow: none; }
body.h2skin .mobile-nav { background: var(--n-ink) !important; }
body.h2skin .mobile-nav a { font-family: var(--n-display); font-weight: 600; border-radius: 0 !important; }
body.h2skin .mobile-login { border-radius: 0 !important; font-family: var(--n-label); letter-spacing: 0.12em; text-transform: uppercase; }

/* ---------- the play block: one column, same rhythm as the rest of the page ---------- */
body.h2skin .play { max-width: calc(var(--n-wrap) + 48px); padding: clamp(96px, 12vw, 160px) max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px)); gap: clamp(96px, 12vw, 160px); }
body.h2skin .play .section-tag, body.h2skin .tn-kicker, body.h2skin .globe-kicker, body.h2skin .ys-kicker, body.h2skin .otd-kick {
  display: block; background: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 14px !important; border-radius: 0;
  font-family: var(--n-label) !important; font-weight: 600 !important; font-size: 12px !important; letter-spacing: 0.22em !important; text-transform: uppercase; color: var(--n-sun) !important;
}
body.h2skin .play .section-tag::before, body.h2skin .tn-kicker::before, body.h2skin .globe-kicker::before, body.h2skin .ys-kicker::before { content: none !important; display: none !important; }
body.h2skin .play .section-title, body.h2skin #games-title, body.h2skin #tn-title, body.h2skin #globe-title, body.h2skin #ys-title {
  font-family: var(--n-display) !important; font-weight: 600 !important; font-size: clamp(30px, 3.6vw, 48px) !important; line-height: 1.2 !important; letter-spacing: 0.005em !important; color: var(--n-fg) !important;
  background: none !important; -webkit-text-fill-color: currentColor !important; text-wrap: balance; margin-bottom: 12px !important;
}
html[lang="zh"] body.h2skin .play .section-title, html[lang="zh"] body.h2skin #games-title, html[lang="zh"] body.h2skin #tn-title, html[lang="zh"] body.h2skin #globe-title, html[lang="zh"] body.h2skin #ys-title { font-weight: 700 !important; letter-spacing: 0.02em !important; }
body.h2skin .play .section-sub, body.h2skin .arc-teaser-head p, body.h2skin .ys-head p, body.h2skin .globe-you, body.h2skin .globe-note, body.h2skin .tn-dark {
  font-family: var(--n-display) !important; font-weight: 300 !important; font-size: 17px !important; line-height: 1.8 !important; color: var(--n-soft) !important; max-width: 36em;
}
body.h2skin .globe-note { font-size: 13px !important; color: var(--n-mute) !important; }

/* cards: square, one thin line, no glow */
body.h2skin .play .ai-card, body.h2skin .arc-card, body.h2skin .tn-card, body.h2skin .ys-sky, body.h2skin .otd-card {
  border-radius: 0 !important; border: 1px solid var(--n-line) !important; background: var(--n-panel) !important; box-shadow: none !important;
}
body.h2skin .arc-card:hover, body.h2skin .otd-card:hover { border-color: rgba(255,255,255,0.4) !important; transform: none !important; }
body.h2skin .arc-card *, body.h2skin .tn-card *, body.h2skin .ys-sky *, body.h2skin .play .ai-card * { border-radius: 0 !important; }
body.h2skin .arc-card h2, body.h2skin .otd-body strong { font-family: var(--n-display) !important; font-weight: 600 !important; letter-spacing: 0.005em !important; }
body.h2skin .arc-card p, body.h2skin .otd-line { font-family: var(--n-display); font-weight: 300; color: var(--n-soft); }
body.h2skin .arc-num { font-family: var(--n-label) !important; letter-spacing: 0.2em; color: var(--n-sun) !important; }

/* AI chat */
body.h2skin .play .ai-header { border-bottom: 1px solid var(--n-line) !important; }
body.h2skin .ai-info h3 { font-family: var(--n-label); letter-spacing: 0.22em; }
body.h2skin .ai-header-badge { border-radius: 0 !important; font-family: var(--n-label); letter-spacing: 0.16em; }
body.h2skin .ai-avatar { border-radius: 0 !important; }
body.h2skin .ai-bubble { border-radius: 0 !important; font-family: var(--n-display); }
body.h2skin .ai-chip { border-radius: 0 !important; border: 1px solid var(--n-line) !important; background: transparent !important; font-family: var(--n-display); color: var(--n-fg) !important; }
body.h2skin .ai-chip:hover { border-color: var(--n-fg) !important; }
body.h2skin .chips-label, body.h2skin .ai-footer-note { font-family: var(--n-label) !important; letter-spacing: 0.14em; text-transform: uppercase; }
body.h2skin .ai-input-row textarea { border-radius: 0 !important; border: 1px solid var(--n-line) !important; background: #050607 !important; font-family: var(--n-display); }
body.h2skin .ai-input-row textarea:focus { border-color: var(--n-fg) !important; }
body.h2skin #ai-send { border-radius: 0 !important; background: var(--n-fg) !important; color: var(--n-ink) !important; box-shadow: none !important; }
body.h2skin #ai-voice { border-radius: 0 !important; }

/* tonight */
body.h2skin .tn-h, body.h2skin .tn-when, body.h2skin .tn-muted { font-family: var(--n-label); letter-spacing: 0.1em; }
body.h2skin .tn-link { font-family: var(--n-label); letter-spacing: 0.14em; text-transform: uppercase; }

/* visitors globe */
body.h2skin .globe-stats b { font-family: var(--n-latin) !important; font-weight: 300 !important; }
body.h2skin .globe-stats span, body.h2skin .globe-top-h, body.h2skin .globe-hint { font-family: var(--n-label) !important; letter-spacing: 0.16em; text-transform: uppercase; }
body.h2skin .globe-top li { font-family: var(--n-display); }

/* stars */
body.h2skin .ys-add, body.h2skin .ys-go, body.h2skin .ys-cancel {
  border-radius: 0 !important; min-height: 48px; padding: 0 24px !important; font-family: var(--n-label) !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: none !important; transition: background-color .25s, color .25s;
}
body.h2skin .ys-add, body.h2skin .ys-go { background: var(--n-fg) !important; color: var(--n-ink) !important; border: 1.5px solid var(--n-fg) !important; }
body.h2skin .ys-add:hover, body.h2skin .ys-go:hover { background: transparent !important; color: var(--n-fg) !important; }
body.h2skin .ys-cancel { background: transparent !important; color: var(--n-fg) !important; border: 1.5px solid rgba(255,255,255,0.5) !important; }
body.h2skin #ys-count { font-family: var(--n-latin) !important; font-weight: 300 !important; }
body.h2skin .ys-form { border-radius: 0 !important; }
body.h2skin .ys-form input, body.h2skin .ys-form textarea { border-radius: 0 !important; font-family: var(--n-display); }

/* on this day */
body.h2skin .otd-wrap { max-width: var(--n-wrap); margin-left: auto; margin-right: auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
body.h2skin .otd-date { border-radius: 0 !important; background: var(--n-sun) !important; }

/* ---------- comments button and panel, back to top ---------- */
body.h2skin #chat-btn { border-radius: 0 !important; width: 48px; height: 48px; background: rgba(12,13,15,0.86) !important; border: 1px solid rgba(255,255,255,0.22) !important; box-shadow: none !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 0 !important; display: grid; place-items: center; }
body.h2skin #chat-btn svg { width: 20px; height: 20px; }
body.h2skin #chat-btn:hover { border-color: #fff !important; }
body.h2skin #chat-badge { border-radius: 0 !important; font-size: 10px; }
body.h2skin #chat-panel { border-radius: 0 !important; background: rgba(8,10,16,0.97) !important; border: 1px solid var(--n-line) !important; box-shadow: 0 30px 80px rgba(0,0,0,0.55) !important; }
body.h2skin #chat-panel h3 { font-family: var(--n-label); letter-spacing: 0.16em; text-transform: uppercase; font-size: 13px; }
body.h2skin #chat-panel * { border-radius: 0 !important; }
body.h2skin #back-top { border-radius: 0 !important; background: rgba(12,13,15,0.86) !important; border: 1px solid rgba(255,255,255,0.22) !important; box-shadow: none !important; }

/* ---------- footer ---------- */
body.h2skin .site-footer { padding: 72px max(24px, env(safe-area-inset-right, 0px)) calc(36px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--n-line); }
body.h2skin .footer-art { display: none !important; }
body.h2skin .footer-inner { max-width: var(--n-wrap); margin: 0 auto; }
body.h2skin .footer-quote { font-family: var(--n-display) !important; font-weight: 300 !important; font-style: normal !important; font-size: clamp(20px, 2.2vw, 28px) !important; line-height: 1.5 !important; color: var(--n-soft) !important; max-width: 30em; }
body.h2skin .footer-brand { font-family: var(--n-latin); font-weight: 600; letter-spacing: 0.3em; }
body.h2skin .footer-brand span { font-weight: 400; color: rgba(255,255,255,0.5); }
body.h2skin .footer-copy, body.h2skin .visitor-line { font-family: var(--n-label); letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; color: var(--n-mute); }
body.h2skin .socials a, body.h2skin .socials button { border-radius: 0 !important; }

/* finale email line */
.finale .mailline { font-family: var(--n-latin); font-size: 15px; color: var(--n-soft); margin-top: 6px; }
.finale .mailline a { color: var(--n-fg); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.35); }
.finale .mailline a:hover { border-bottom-color: #fff; }
body.h2skin .pill { border-radius: 0 !important; font-family: var(--n-label) !important; font-weight: 600 !important; letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px !important; }
body.h2skin .arc-meta span, body.h2skin .arc-meta b, body.h2skin .arc-meta i { border-radius: 0 !important; }
body.h2skin .arc-play { font-family: var(--n-label); letter-spacing: 0.14em; text-transform: uppercase; }
body.h2skin .globe-stage canvas { filter: saturate(0.85); }

/* ===== 2026-10-26: the play block rebuilt as sections of the new page ===== */
body.h2skin .play2 { display: block; }
body.h2skin .play2 > section { padding-block: clamp(80px, 10vw, 140px) 0; }

/* ask: one big line to type into */
.ask .ask-line { display: flex; align-items: flex-end; gap: 6px; border-bottom: 1.5px solid rgba(255,255,255,0.55); padding-bottom: 6px; transition: border-color .25s; }
.ask .ask-line:focus-within { border-bottom-color: var(--n-sun); }
.ask #ai-input { flex: 1; min-width: 0; min-height: 64px; max-height: 200px; resize: none; border: 0 !important; background: transparent !important; color: var(--n-fg); font-family: var(--n-display); font-weight: 300; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.35; padding: 14px 0 8px; outline: none; border-radius: 0 !important; }
.ask #ai-input::placeholder { color: rgba(255,255,255,0.32); }
.ask #ai-voice, .ask #ai-send { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border: 0 !important; background: transparent !important; color: var(--n-soft); cursor: pointer; border-radius: 0 !important; box-shadow: none !important; }
.ask #ai-send { color: var(--n-sun) !important; }
.ask #ai-voice svg, .ask #ai-send svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ask #ai-voice:hover, .ask #ai-send:hover { color: #fff !important; }
.ask .ask-sugg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px; margin-top: 22px; }
.ask .chips-label { flex: none; font-family: var(--n-label) !important; font-weight: 600; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--n-mute); }
.ask .ai-chips { display: flex; flex-wrap: wrap; gap: 10px 26px; }
body.h2skin .ask .ai-chip { border: 0 !important; background: none !important; padding: 0 !important; font-family: var(--n-display); font-size: 16px; color: var(--n-soft) !important; cursor: pointer; border-bottom: 1px solid transparent !important; transition: color .2s, border-color .2s; }
body.h2skin .ask .ai-chip:hover { color: #fff !important; border-bottom-color: #fff !important; }
.ask .ai-messages { margin-top: 34px; max-height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; padding-right: 8px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent; }
.ask .ai-msg { display: block !important; max-width: 46em; }
.ask .ai-msg-av { display: none !important; }
body.h2skin .ask .ai-bubble { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; font-family: var(--n-display); font-weight: 300; font-size: 17px; line-height: 1.85; color: #e6e8eb; }
.ask .ai-msg.bot .ai-bubble::before { content: "KAINAR AI"; display: block; margin-bottom: 6px; font-family: var(--n-label); font-weight: 600; font-size: 11px; letter-spacing: 0.24em; color: var(--n-sun); }
.ask .ai-msg.user { align-self: flex-end; text-align: right; }
body.h2skin .ask .ai-msg.user .ai-bubble { color: var(--n-soft); font-style: normal; }
.ask .ai-msg.user .ai-bubble::before { content: "—"; margin-right: 8px; color: var(--n-mute); }
.ask .typing-ind { display: flex; gap: 6px; padding: 6px 0; }
.ask .t-dot { width: 6px; height: 6px; background: var(--n-sun); border-radius: 0 !important; }
.ask .ai-footer-note { margin-top: 22px; font-family: var(--n-label); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--n-mute); }

/* tonight: three readings in one row */
body.h2skin .tonight .tn-card { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-top: 1px solid var(--n-line) !important; border-bottom: 1px solid var(--n-line) !important; }
body.h2skin .tonight .tn-card > div { padding: 30px 28px 30px 0; min-width: 0; }
body.h2skin .tonight .tn-card > div + div { padding-left: 28px; border-left: 1px solid var(--n-line); }
body.h2skin .tonight .tn-h { display: block; margin-bottom: 14px; font-family: var(--n-label) !important; font-weight: 600; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--n-mute) !important; }
body.h2skin .tonight .tn-moon { display: flex; gap: 18px; align-items: flex-start; }
body.h2skin .tonight .tn-moon svg { width: 54px; height: 54px; flex: none; }
body.h2skin .tonight .tn-moon b, body.h2skin .tonight .tn-iss-when { display: block; font-family: var(--n-latin) !important; font-weight: 300 !important; font-size: clamp(30px, 3vw, 44px) !important; line-height: 1.1; color: var(--n-fg) !important; }
body.h2skin .tonight .tn-moon small, body.h2skin .tonight .tn-iss-in, body.h2skin .tonight .tn-iss-fact, body.h2skin .tonight .tn-muted { display: block; font-family: var(--n-display); font-size: 14.5px; line-height: 1.7; color: var(--n-soft) !important; }
body.h2skin .tonight .tn-planets ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
body.h2skin .tonight .tn-planets li { font-family: var(--n-display); font-size: 15px; color: var(--n-soft); border: 0 !important; background: none !important; padding: 0 !important; }
body.h2skin .tonight .tn-planets li b, body.h2skin .tonight .tn-pl { color: var(--n-fg); font-weight: 500; }
body.h2skin .tonight .tn-dot { border-radius: 50% !important; }
body.h2skin .tonight .tn-link { display: inline-block; margin-top: 12px; font-family: var(--n-label); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--n-fg); text-decoration: none; border-bottom: 1px solid var(--n-fg); padding-bottom: 4px; }
body.h2skin .tonight .tn-dark { font-size: 12px !important; max-width: none; }
body.h2skin .tonight .otd-wrap { padding: 0 !important; margin-top: 0; max-width: none; }
body.h2skin .tonight .otd-card { border: 0 !important; border-bottom: 1px solid var(--n-line) !important; background: transparent !important; padding: 22px 0 !important; display: flex; align-items: center; gap: 22px; text-decoration: none; }
body.h2skin .tonight .otd-date { background: none !important; color: var(--n-sun) !important; border: 1px solid var(--n-sun) !important; box-shadow: none !important; }
body.h2skin .tonight .otd-date * { color: var(--n-sun) !important; }
@media (max-width: 860px) {
  body.h2skin .tonight .tn-card { grid-template-columns: minmax(0, 1fr); }
  body.h2skin .tonight .tn-card > div, body.h2skin .tonight .tn-card > div + div { padding: 24px 0; border-left: 0; }
  body.h2skin .tonight .tn-card > div + div { border-top: 1px solid var(--n-line); }
}

/* games: how they really look, side by side */
.arc-teaser .games-desc { font-family: var(--n-display); font-weight: 300; font-size: 17px; line-height: 1.8; color: var(--n-soft); max-width: 36em; margin: -18px 0 30px; }
.arc-teaser .explore-head a.label { text-decoration: none; }
.gstrip { grid-auto-columns: minmax(300px, 40%) !important; }
@media (min-width: 1100px) { .gstrip { grid-auto-flow: row !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; overflow: visible !important; } }
.gcard { scroll-snap-align: start; display: flex; flex-direction: column; text-decoration: none; color: var(--n-fg); background: var(--n-panel); border: 1px solid var(--n-line); transition: border-color .3s; }
.gcard:hover { border-color: rgba(255,255,255,0.45); }
.gcard img { width: 100%; height: auto !important; aspect-ratio: 2 / 1; object-fit: cover; display: block; flex: none !important; position: static !important; z-index: auto !important; transition: transform 1.2s cubic-bezier(.2,.6,.2,1); }
.gcard:hover img { transform: scale(1.03); }
.gcard { overflow: hidden; }
.gtxt { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; position: relative; background: var(--n-panel); }
.gtxt .label { font-size: 11.5px !important; color: var(--n-mute) !important; letter-spacing: 0.16em !important; }
.gtxt .label b, .gtxt .label em { font-weight: 600; font-style: normal; color: var(--n-soft); }
.gname { font-family: var(--n-display); font-weight: 600; font-size: 21px; }
.gdesc { font-family: var(--n-display); font-weight: 300; font-size: 15px; line-height: 1.7; color: var(--n-soft); }
.gstrip::after { display: none; }
@media (max-width: 860px) { .gstrip { grid-auto-columns: 82% !important; } }

/* visitors and stars: open, no boxes */
body.h2skin .globe-sec { max-width: var(--n-wrap); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)) !important; padding-right: max(24px, env(safe-area-inset-right, 0px)) !important; }
body.h2skin .ys { max-width: var(--n-wrap); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)) !important; padding-right: max(24px, env(safe-area-inset-right, 0px)) !important; }
body.h2skin .ys-sky { background: radial-gradient(120% 90% at 50% 110%, #0b1120 0%, #04060b 60%, transparent 100%) !important; border: 0 !important; border-top: 1px solid var(--n-line) !important; border-bottom: 1px solid var(--n-line) !important; min-height: 460px; }
body.h2skin .globe-kicker, body.h2skin .ys-kicker { color: var(--n-sun) !important; }
body.h2skin .footer-credits { margin: 0; font-family: var(--n-label); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
body.h2skin .footer-credits a { color: var(--n-mute); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.2); }
body.h2skin .footer-credits a:hover { color: var(--n-fg); }
.gcard .gtxt { flex: 1 1 auto; }

/* Töte jazu (right to left): menus open inward, numbers keep their order, the flag keeps the text clear of the sun */
html[dir=rtl] .lang-pop { right: auto !important; left: 0 !important; }
html[dir=rtl] .rail { direction: ltr; }
html[dir=rtl] .rail a span { direction: rtl; }
html[dir=rtl] #days, html[dir=rtl] .hud b, html[dir=rtl] .ll-count { direction: ltr; unicode-bidi: isolate; }
html[dir=rtl] .flagstage > .wrap { direction: ltr; }
html[dir=rtl] .flagstage > .wrap > * { direction: rtl; text-align: right; max-width: min(560px, 46vw); }

/* tonight: the next rocket launch, counting down live */
body.h2skin .tonight .tn-launch .tn-tminus { display: block; margin: 4px 0 6px; font-family: var(--n-latin) !important; font-weight: 300 !important; font-variant-numeric: tabular-nums; font-size: clamp(30px, 3vw, 44px) !important; line-height: 1.1; color: var(--n-fg) !important; white-space: nowrap; }
body.h2skin .tonight .tn-rocket { font-family: var(--n-display); font-size: 17px; font-weight: 500; color: var(--n-fg); line-height: 1.4; }
body.h2skin .tonight .tn-launch small, body.h2skin .tonight .tn-next small { display: block; font-family: var(--n-display); font-size: 14px; line-height: 1.6; color: var(--n-soft) !important; }
body.h2skin .tonight .tn-baik { font-style: normal; font-family: var(--n-label); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #050505; background: var(--n-sun); padding: 2px 6px; margin-left: 6px; vertical-align: 2px; }
body.h2skin .tonight .tn-then { display: block; margin-top: 18px; }
body.h2skin .tonight .tn-next { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
body.h2skin .tonight .tn-next li span { font-family: var(--n-display); font-size: 14.5px; color: var(--n-fg); }
body.h2skin .tonight .tn-src { margin: 14px 0 0; font-family: var(--n-label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.35); }

/* the real Earth (js/earth3d.js) */
.globe-stage.is-real > canvas#globe { display: none; }
.earth-box { position: absolute; inset: 0; overflow: hidden; background: #000; }
.globe-stage.is-real { position: relative; min-height: 560px; }
.earth-box .cesium-viewer, .earth-box .cesium-widget, .earth-box canvas { width: 100%; height: 100%; }
.earth-box .cesium-viewer-bottom { left: 8px; right: auto; bottom: 6px; opacity: .55; transform: scale(.85); transform-origin: left bottom; }
.earth-box .cesium-credit-logoContainer img { max-height: 16px; }
.earth-zoom { position: absolute; right: 12px; top: 12px; z-index: 5; display: flex; flex-direction: column; gap: 6px; }
.earth-zoom button { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.55); color: #fff; font: 400 18px/1 Barlow, sans-serif; cursor: pointer; border-radius: 0; }
.earth-zoom button:hover { border-color: #f5c518; color: #f5c518; }
.globe-stage.is-real .globe-tip { z-index: 6; }
@media (max-width: 760px) { .globe-stage.is-real { min-height: 420px; } }

/* Kainar AI as a comms console: a live channel bar, the transcript, the line you type on at the bottom */
.ask .comms { position: relative; margin-top: 8px; border: 1px solid var(--n-line); background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    radial-gradient(120% 90% at 0% 0%, rgba(245,197,24,.06), transparent 55%), rgba(6,8,12,.86); }
.ask .comms::before, .ask .comms::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--n-sun); pointer-events: none; }
.ask .comms::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.ask .comms::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.ask .comms-bar { display: flex; align-items: center; gap: 18px; padding: 14px 22px; border-bottom: 1px solid var(--n-line); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--n-soft); }
.ask .cb-ch { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask .cb-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: cbPulse 2s infinite; flex: none; }
@keyframes cbPulse { 70% { box-shadow: 0 0 0 8px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
.ask .cb-sig { display: flex; align-items: flex-end; gap: 3px; height: 14px; }
.ask .cb-sig i { width: 3px; background: var(--n-sun); animation: cbSig 1.6s ease-in-out infinite; }
.ask .cb-sig i:nth-child(1) { height: 30%; } .ask .cb-sig i:nth-child(2) { height: 50%; animation-delay: .15s; } .ask .cb-sig i:nth-child(3) { height: 70%; animation-delay: .3s; } .ask .cb-sig i:nth-child(4) { height: 90%; animation-delay: .45s; } .ask .cb-sig i:nth-child(5) { height: 100%; animation-delay: .6s; }
@keyframes cbSig { 50% { opacity: .35; } }
.ask.busy .cb-sig i { animation-duration: .5s; }
.ask .cb-clock { font-weight: 500; color: var(--n-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ask .comms .ai-messages { margin: 0; padding: 26px 26px 10px; max-height: 420px; min-height: 160px; }
.ask .comms .ask-line { margin: 6px 26px 0; }
.ask .comms .ask-line::before { content: "›"; align-self: center; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 30px; color: var(--n-sun); margin-right: 6px; animation: cbBlink 1.1s steps(2) infinite; }
@keyframes cbBlink { 50% { opacity: .25; } }
.ask .comms .ask-sugg { margin: 0; padding: 18px 26px 24px; }
body.h2skin .ask .comms .ai-chip { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; letter-spacing: .02em; padding: 7px 12px !important; border: 1px solid var(--n-line) !important; color: var(--n-soft) !important; }
body.h2skin .ask .comms .ai-chip::before { content: "▸ "; color: var(--n-sun); }
body.h2skin .ask .comms .ai-chip:hover { border-color: var(--n-sun) !important; color: #fff !important; }
.ask .comms .ai-msg.bot .ai-bubble::before { content: "KAINAR ▸"; font-family: ui-monospace, Menlo, Consolas, monospace; }
.ask .comms .ai-msg.user { align-self: flex-start; text-align: left; }
.ask .comms .ai-msg.user .ai-bubble::before { content: var(--you, "YOU") " ▸"; display: block; margin: 0 0 6px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .24em; color: var(--n-soft); }
body.h2skin .ask .comms .ai-msg.user .ai-bubble { color: #fff; }
@media (max-width: 760px) {
  .ask .comms-bar { padding: 12px 14px; gap: 12px; font-size: 10px; }
  .ask .comms .ai-messages { padding: 20px 16px 8px; }
  .ask .comms .ask-line { margin: 4px 14px 0; }
  .ask .comms .ask-sugg { padding: 14px 14px 18px; }
}
.globe-stage.is-real .globe-hint { left: 14px; right: auto; top: 14px; z-index: 5; }

/* ---------- phones: homepage ---------- */
@media (max-width: 760px) {
  /* the flag on top, the words below it on dark, so they never sit on the sun */
  .flagstage { padding-inline: 0 !important; height: auto !important; min-height: 0 !important; display: flex; flex-direction: column; background: var(--n-ink) !important; }
  .flagstage canvas { position: relative !important; inset: auto !important; height: 52vw !important; flex: none; z-index: 0 !important; }
  .flagstage::after { inset: 0 0 auto 0 !important; height: 52vw; z-index: 1 !important; background: linear-gradient(180deg, rgba(3,5,10,.35) 0%, rgba(3,5,10,0) 30%, rgba(3,5,10,0) 86%, var(--n-ink) 100%) !important; }
  .flagstage .wrap { position: relative !important; inset: auto !important; padding: 8px 0 64px !important; z-index: 2; margin: 0 max(20px, env(safe-area-inset-left, 0px)); }
  /* flag, emblem and eagle side by side to swipe */
  .sym-grid { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -20px; padding: 0 20px 12px; scroll-padding-inline: 20px; }
  .sym-grid > * { scroll-snap-align: start; }
  /* quick questions: one row to swipe */
  .ask .comms .ai-chips { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; margin-right: -14px; }
  body.h2skin .ask .comms .ai-chip { flex: none; white-space: nowrap; scroll-snap-align: start; }
  .ask .comms .ask-sugg { display: block; }
  .ask .comms .chips-label { display: block; margin-bottom: 10px; }
  /* tonight: launches first, then the planets and the station */
  body.h2skin .tonight .tn-launch .tn-tminus { font-size: 34px !important; }
}

/* phones: the floating buttons stay out of the way — no back-to-top (tap the status bar instead), a smaller chat button */
@media (max-width: 760px) {
  #back-top { display: none !important; }
  body.h2skin #chat-btn { width: 42px; height: 42px; right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; opacity: .85; }
}

/* phones: a quick double tap on a button must not zoom the page; text fields at 16px so iOS does not zoom in when typing.
   Pinch-to-zoom still works. */
html, body, button, a, input, textarea, select, label, [role="button"] { touch-action: manipulation; }
@media (max-width: 760px) { input, textarea, select { font-size: 16px !important; } }