/* Alex's story as a one-page manga (Japan theme). Ink on paper, Japan red accent, sharp corners. */
.mgbtn { border: 1px solid rgba(255,255,255,.22); background: none; color: #fff; cursor: pointer; font-size: 12.5px; padding: 6px 12px; font-family: var(--mincho, 'Yu Mincho', serif); }
.mgbtn:hover { border-color: var(--verm); color: var(--verm); }
.mgbtn[hidden] { display: none; }

.mgdlg { border: 0; padding: 0; background: transparent; max-width: min(760px, 96vw); width: 100%; max-height: 96vh; }
.mgdlg::backdrop { background: rgba(0,0,0,.82); }
.mg-in { background: #f3efe6; color: #111; padding: 18px; max-height: 96vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.mg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.mg-head h2 { margin: 0; font: 700 18px/1.3 var(--mincho, 'Yu Mincho', serif); }
.mg-close { border: 2px solid #111; background: #fff; color: #111; padding: 6px 14px; cursor: pointer; font-weight: 700; }
.mg-close:hover { background: #111; color: #fff; }

/* the page: right to left like a Japanese page */
.mg-page { display: grid; grid-template-columns: 1.3fr 1fr; grid-auto-rows: minmax(170px, auto); gap: 10px; direction: rtl; }
.mg-p { direction: ltr; position: relative; overflow: hidden; border: 3px solid #111; background: #fff; padding: 16px 16px 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; opacity: 0; transform: translateY(8px); animation: mgin .5s ease forwards; animation-delay: calc(var(--i) * .12s); }
@keyframes mgin { to { opacity: 1; transform: none; } }
.mg-title { grid-column: 1 / -1; min-height: 210px; background: #111; color: #fff; }
.mg-p:nth-child(2) { transform: translateY(8px) rotate(0); }

/* textures: halftone dots and speed lines */
.mg-p::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.mg-stars::before, .mg-food::before { background: radial-gradient(circle, rgba(0,0,0,.22) 1.2px, transparent 1.6px) 0 0 / 7px 7px; }
.mg-title::before { background: repeating-conic-gradient(from 0deg at 50% 60%, rgba(255,255,255,.14) 0 1.2deg, transparent 1.2deg 6deg); }
.mg-music::before, .mg-read::before { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(0,0,0,.16) 0 1deg, transparent 1deg 5deg); }
.mg-road::before { background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 9px); }
.mg-p > * { position: relative; z-index: 1; }

/* sound effects, big and slanted, in Japan red */
.mg-fx { position: absolute !important; top: 10px; right: 12px; font: 900 34px/1 var(--mincho, 'Yu Mincho', serif); color: var(--verm, #c9280f); transform: rotate(-8deg); -webkit-text-stroke: 1px #111; letter-spacing: .02em; }
.mg-title .mg-fx { font-size: 54px; -webkit-text-stroke: 1.5px #fff; }

.mg-big { margin: 0; font: 900 clamp(30px, 6vw, 52px)/1.1 var(--mincho, 'Yu Mincho', serif); }
.mg-title .mg-big { font-size: clamp(40px, 8vw, 72px); }
.mg-cap { margin: 0; align-self: flex-start; background: #fff; color: #111; border: 2px solid #111; padding: 6px 10px; font-size: 13.5px; line-height: 1.5; max-width: 100%; }
.mg-title .mg-cap { background: var(--verm, #c9280f); color: #fff; border-color: #fff; }

/* speech bubble with a tail */
.mg-say { margin: 0 0 6px; align-self: flex-start; position: relative; background: #fff; border: 2.5px solid #111; border-radius: 50% / 46%; padding: 14px 20px; font: 800 16px/1.4 var(--mincho, 'Yu Mincho', serif); text-align: center; max-width: 96%; }
.mg-say::after { content: ''; position: absolute; left: 26px; bottom: -14px; width: 18px; height: 16px; background: #fff; border-right: 2.5px solid #111; border-bottom: 2.5px solid #111; transform: skewX(-30deg) rotate(18deg); }
.mg-end { position: absolute !important; bottom: 10px; right: 12px; margin: 0; background: #111; color: #fff; padding: 4px 10px; font: 700 13px/1.2 var(--mincho, 'Yu Mincho', serif); }
.mg-read { padding-bottom: 44px; }
.mg-note { margin: 10px 0 0; font-size: 12px; color: #555; }
html[lang="en"] .mg-page { direction: ltr; }

@media (max-width: 560px) { .mg-page { grid-template-columns: 1fr; } .mg-fx { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .mg-p { animation: none; opacity: 1; transform: none; } }
/* speech bubbles stay round even with the panel's sharp-corner rule; content clears the sound effect */
.mgdlg .mg-say { border-radius: 50% / 46% !important; }
.mg-p:not(.mg-title) { padding-top: 58px; }
/* every language: Japanese and Arabic pages read right to left, English and Malayalam left to right */
html[lang="ml"] .mg-page { direction: ltr; }
html[lang="ar"] .mg-page { direction: rtl; }
html[lang="ar"] .mg-p { direction: rtl; }
html[lang="ar"] .mg-fx { right: auto; left: 12px; transform: rotate(8deg); }
html[lang="ar"] .mg-say, html[lang="ar"] .mg-cap { align-self: flex-start; }
html[lang="ar"] .mg-say::after { left: auto; right: 26px; transform: skewX(30deg) rotate(-18deg) scaleX(-1); }
html[lang="ar"] .mg-end { right: auto; left: 12px; }
html[lang="ml"] .mg-in, html[lang="ml"] .mgbtn { font-family: 'Nirmala UI', 'Noto Sans Malayalam', 'Poppins', sans-serif; }
html[lang="ml"] .mg-big, html[lang="ml"] .mg-say, html[lang="ml"] .mg-fx, html[lang="ml"] .mg-head h2, html[lang="ml"] .mg-end { font-family: 'Nirmala UI', 'Noto Sans Malayalam', sans-serif; }
html[lang="ar"] .mg-big, html[lang="ar"] .mg-say, html[lang="ar"] .mg-fx, html[lang="ar"] .mg-head h2, html[lang="ar"] .mg-end, html[lang="ar"] .mg-cap { font-family: 'Segoe UI', 'Noto Naskh Arabic', 'Tahoma', sans-serif; }
html[lang="en"] .mg-big, html[lang="en"] .mg-say, html[lang="en"] .mg-fx, html[lang="en"] .mg-head h2 { font-family: 'Poppins', sans-serif; }
html[lang="ml"] .mg-say { font-size: 15px; } html[lang="ml"] .mg-fx { font-size: 28px; }
.mg-head { flex-wrap: wrap; }
.mg-sw { margin-left: auto; border-color: rgba(0,0,0,.35) !important; }
.mg-sw button { color: #333 !important; }
.mg-sw button[aria-checked="true"] { background: #111 !important; color: #fff !important; }
.mg-sw[hidden] { display: none !important; }

/* ===== Colour comic styles, one per language (Viv, 15 Nov 2026: "make it all colourful") ===== */
.mg-p { --ink: #111; }
.mg-fx { -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); }

/* Japanese: colour manga, ink and screentone with bold red, yellow and sky blue */
html[lang="ja"] .mg-in { background: #fbf6ea; }
html[lang="ja"] .mg-title { background: linear-gradient(135deg, #c9280f, #7a1206); }
html[lang="ja"] .mg-music { background: #ffe14d; }
html[lang="ja"] .mg-food { background: #ffb3a7; }
html[lang="ja"] .mg-road { background: #9fd8f5; }
html[lang="ja"] .mg-read { background: #f5f0ff; }
html[lang="ja"] .mg-fx { color: #ffe14d; }
html[lang="ja"] .mg-title .mg-fx { color: #ffe14d; -webkit-text-stroke-color: #111; }
html[lang="ja"] .mg-music .mg-fx, html[lang="ja"] .mg-road .mg-fx { color: #e6301a; }

/* English: classic colour comic, Ben-Day dots, yellow caption boxes */
html[lang="en"] .mg-in { background: #fffdf3; }
html[lang="en"] .mg-p { border-width: 4px; }
html[lang="en"] .mg-title { background: radial-gradient(circle, rgba(255,255,255,.25) 2px, transparent 2.6px) 0 0 / 10px 10px, #1f5fd6; }
html[lang="en"] .mg-music { background: radial-gradient(circle, rgba(0,0,0,.14) 2px, transparent 2.6px) 0 0 / 9px 9px, #ffd21f; }
html[lang="en"] .mg-food { background: radial-gradient(circle, rgba(0,0,0,.12) 2px, transparent 2.6px) 0 0 / 9px 9px, #ff5a4e; }
html[lang="en"] .mg-road { background: radial-gradient(circle, rgba(0,0,0,.10) 2px, transparent 2.6px) 0 0 / 9px 9px, #41c1e8; }
html[lang="en"] .mg-read { background: radial-gradient(circle, rgba(0,0,0,.10) 2px, transparent 2.6px) 0 0 / 9px 9px, #8be04e; }
html[lang="en"] .mg-cap { background: #ffe873; text-transform: uppercase; font-weight: 700; font-size: 12.5px; letter-spacing: .02em; }
html[lang="en"] .mg-title .mg-cap { background: #ffe873; color: #111; border-color: #111; }
html[lang="en"] .mg-fx { color: #ffe14d; font-weight: 900; font-style: italic; }
html[lang="en"] .mg-title .mg-fx { color: #ff3b2f; }

/* Malayalam: bright Kerala children's-comic feel, flat colours, thick rounded outlines */
html[lang="ml"] .mg-in { background: #fff4c7; }
html[lang="ml"] .mg-p { border: 5px solid #1d1d1d; border-radius: 18px !important; box-shadow: 4px 4px 0 #1d1d1d; }
html[lang="ml"] .mg-p::before { display: none; }
html[lang="ml"] .mg-title { background: #1f8a4c; }
html[lang="ml"] .mg-music { background: #ffcd29; }
html[lang="ml"] .mg-food { background: #ff7a45; }
html[lang="ml"] .mg-road { background: #3cc3a8; }
html[lang="ml"] .mg-read { background: #ff9ec7; }
html[lang="ml"] .mg-cap { border-radius: 12px !important; border-width: 3px; }
html[lang="ml"] .mg-title .mg-cap { background: #ffcd29; color: #1d1d1d; border-color: #1d1d1d; }
html[lang="ml"] .mg-say { border-width: 3.5px; }
html[lang="ml"] .mg-fx { color: #ffffff; transform: rotate(-5deg); }
html[lang="ml"] .mg-end { border-radius: 10px !important; background: #d7261e; }

/* Arabic: vivid magazine-comic feel, turquoise, saffron and coral, geometric star borders */
html[lang="ar"] .mg-in { background: #fff8ec; }
html[lang="ar"] .mg-page { padding: 12px; background:
  conic-gradient(from 45deg at 50% 50%, #0b8f8f 0 25%, #f2a516 0 50%, #0b8f8f 0 75%, #f2a516 0) 0 0 / 22px 22px; }
html[lang="ar"] .mg-p { border-color: #23170c; box-shadow: inset 0 0 0 4px #fff; }
html[lang="ar"] .mg-p::before { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18) 0 18%, transparent 19%) 0 0 / 34px 34px !important; }
html[lang="ar"] .mg-title { background: linear-gradient(160deg, #0b6f8f, #08405a); }
html[lang="ar"] .mg-music { background: #f2a516; }
html[lang="ar"] .mg-food { background: #ff6f59; }
html[lang="ar"] .mg-road { background: #1fb6a6; }
html[lang="ar"] .mg-read { background: #8e6fd8; }
html[lang="ar"] .mg-cap { background: #fffaf0; border-color: #23170c; }
html[lang="ar"] .mg-title .mg-cap { background: #f2a516; color: #23170c; border-color: #23170c; }
html[lang="ar"] .mg-fx { color: #fff; -webkit-text-stroke-color: #23170c; text-shadow: 3px 3px 0 #23170c; }
html[lang="ar"] .mg-big { color: #fff; text-shadow: 3px 3px 0 #23170c; }
html[lang="ar"] .mg-road .mg-big { color: #fff; }
html[lang="ar"] .mg-end { background: #23170c; }

/* white headline text sits on the dark title panels; dark text on the light ones */
.mg-title .mg-big { color: #fff; text-shadow: 3px 3px 0 rgba(0,0,0,.45); }
html[lang="ml"] .mg-road .mg-big, html[lang="en"] .mg-road .mg-big, html[lang="ja"] .mg-road .mg-big { color: #111; }

/* Alex's picture, once Viv sends it: a round comic portrait in the title panel */
.mg-portrait { position: absolute !important; z-index: 2; right: 18px; bottom: 14px; width: 130px; height: 130px; border: 4px solid #fff; box-shadow: 0 0 0 3px #111, 6px 6px 0 #111; overflow: hidden; border-radius: 50% !important; background: #222; }
.mg-portrait img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.4) contrast(1.15); }
.mg-portrait::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(0,0,0,.18) 1px, transparent 1.6px) 0 0 / 5px 5px; mix-blend-mode: multiply; }
html[lang="ar"] .mg-portrait, html[lang="ja"] .mg-portrait { right: auto; left: 18px; }
@media (max-width: 560px) { .mg-portrait { width: 90px; height: 90px; } }
/* frame Alex's face and thumbs-up from the full photo (no amp or brand names in view) */
.mg-portrait img { object-fit: cover; object-position: 38% 20%; transform: scale(2.3); transform-origin: 38% 22%; }
/* portrait v2: bigger circle, face centred, title text keeps clear of it */
.mg-portrait { width: 160px; height: 160px; top: 50%; bottom: auto; margin-top: -80px; }
.mg-portrait img { position: absolute; transform: none; object-fit: fill; max-width: none; width: 284%; height: auto; left: -61%; top: -26%; }
.mg-title:has(.mg-portrait) { padding-right: 200px; }
html[lang="ar"] .mg-title:has(.mg-portrait), html[lang="ja"] .mg-title:has(.mg-portrait) { padding-right: 16px; padding-left: 200px; }
html[lang="ar"] .mg-title .mg-fx, html[lang="ja"] .mg-title .mg-fx { left: auto; right: 14px; }
.mg-title:has(.mg-portrait) .mg-fx { z-index: 3; }
@media (max-width: 560px) { .mg-portrait { width: 96px; height: 96px; margin-top: -48px; top: 38%; } .mg-title:has(.mg-portrait) { padding-right: 16px !important; padding-left: 16px !important; padding-top: 130px; } }
/* the comic button stands out: comic yellow, thick ink outline, offset shadow (Viv, 15 Nov 2026: "where is the comic?") */
.mgbtn { background: #FFE14D !important; color: #111 !important; border: 3px solid #111 !important; box-shadow: 4px 4px 0 #111; font: 800 15px/1 'Poppins', 'Yu Gothic UI', 'Nirmala UI', 'Segoe UI', sans-serif !important; padding: 9px 16px !important; display: inline-flex; align-items: center; gap: 8px; transform: rotate(-2deg); transition: transform .15s, box-shadow .15s; }
.mgbtn:hover, .mgbtn:focus-visible { transform: rotate(0) translate(-1px, -1px); box-shadow: 6px 6px 0 #111; color: #111 !important; }
.mgico { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .mgbtn { transform: none; transition: none; } }
/* comic button v2: matches the panel (Viv: the yellow one "looks odd") — straight, thin theme-colour outline, line icon */
.mgbtn { background: rgba(0,0,0,.25) !important; color: #fff !important; border: 1px solid var(--verm) !important; box-shadow: none !important; transform: none !important;
  font: 500 11.5px/1 'Poppins', 'Yu Gothic UI', 'Nirmala UI', 'Segoe UI', sans-serif !important; letter-spacing: .14em; text-transform: uppercase; padding: 9px 14px !important; gap: 9px; }
html[lang="ja"] .mgbtn, html[lang="ml"] .mgbtn, html[lang="ar"] .mgbtn { letter-spacing: .02em; font-size: 13px !important; }
.mgbtn:hover, .mgbtn:focus-visible { background: var(--verm) !important; color: #fff !important; box-shadow: none !important; transform: none !important; }
.mgico { width: 17px; height: 17px; fill: none; stroke: var(--verm); stroke-width: 1.6; stroke-linejoin: round; font-size: 0; }
.mgbtn:hover .mgico, .mgbtn:focus-visible .mgico { stroke: #fff; }

/* ===== Japanese page in a samurai-scroll style (Viv, 15 Nov 2026): deep red, pale moon, ink, cherry blossom, seal stamps. Drawn here, nothing copied. ===== */
html[lang="ja"] .mg-in { position: relative; background:
    radial-gradient(circle at 12% 88%, rgba(0,0,0,.08) 0 2px, transparent 3px) 0 0 / 23px 19px,
    linear-gradient(#efe4cc, #e8dcc0);
  border-top: 14px solid #2a1a10; border-bottom: 14px solid #2a1a10; box-shadow: 0 0 0 1px #000, 0 20px 60px rgba(0,0,0,.7); }
html[lang="ja"] .mg-in::before, html[lang="ja"] .mg-in::after { content: ''; position: absolute; top: -14px; width: 10px; height: 46px; background: linear-gradient(#b31b10, #6e0c06); border-radius: 0 0 5px 5px !important; }
html[lang="ja"] .mg-in::before { left: 22px; } html[lang="ja"] .mg-in::after { right: 22px; }
html[lang="ja"] .mg-head h2 { font: 900 20px/1.2 var(--mincho); color: #2a1a10; letter-spacing: .08em; }

/* panels: ink on washi paper, red and black splatter, falling petals */
html[lang="ja"] .mg-p { border: 3px solid #1a0f0a; background:
    radial-gradient(ellipse 7px 4px at 18% 22%, #f4a7b9 60%, transparent 62%),
    radial-gradient(ellipse 6px 4px at 74% 64%, #f7b9c8 60%, transparent 62%),
    radial-gradient(ellipse 5px 3px at 44% 86%, #f4a7b9 60%, transparent 62%),
    radial-gradient(circle at 88% 14%, rgba(160,16,10,.55) 0 5px, transparent 6px),
    radial-gradient(circle at 8% 70%, rgba(20,10,6,.6) 0 3px, transparent 4px),
    radial-gradient(circle at 92% 92%, rgba(20,10,6,.35) 0 9px, transparent 10px),
    #f5ecd8 !important; }
html[lang="ja"] .mg-p::before { background: repeating-linear-gradient(100deg, transparent 0 22px, rgba(60,30,10,.035) 22px 23px) !important; }

/* title: deep red with a big pale moon; Alex sits inside the moon in ink tones */
html[lang="ja"] .mg-title { min-height: 260px; background:
    radial-gradient(circle at 24% 50%, #f3efe4 0 108px, rgba(243,239,228,.25) 110px, transparent 132px),
    radial-gradient(ellipse at 70% 30%, #a3190d, #5a0a05 70%, #2b0503) !important; }
html[lang="ja"] .mg-title::before { background:
    radial-gradient(circle at 70% 80%, rgba(0,0,0,.35) 0 4px, transparent 5px) 0 0 / 37px 29px,
    linear-gradient(transparent 82%, #120806 82%) !important; }
html[lang="ja"] .mg-title .mg-big { font: 900 clamp(40px, 7vw, 66px)/1.05 var(--mincho); color: #f3efe4; text-shadow: 3px 3px 0 #120806; letter-spacing: .04em; }
html[lang="ja"] .mg-title .mg-cap { background: #120806; color: #f3efe4; border: 1px solid #b31b10; }
html[lang="ja"] .mg-portrait { width: 200px; height: 200px; margin-top: -100px; left: calc(24% - 100px) !important; border: 0; box-shadow: 0 0 0 6px rgba(243,239,228,.35); }
html[lang="ja"] .mg-portrait img { filter: grayscale(1) contrast(1.6) brightness(.95) sepia(.35) hue-rotate(-20deg); mix-blend-mode: multiply; }
html[lang="ja"] .mg-portrait::after { background: radial-gradient(circle, transparent 55%, rgba(243,239,228,.55) 100%); mix-blend-mode: normal; }
html[lang="ja"] .mg-title:has(.mg-portrait) { padding-left: calc(24% + 120px); padding-right: 64px; }

/* vertical brush lettering down the edge of the title */
html[lang="ja"] .mg-title::after { content: 'アレックス・一番'; position: absolute; right: 16px; top: 16px; writing-mode: vertical-rl; font: 900 22px/1 var(--mincho); color: #f3efe4; letter-spacing: .3em; opacity: .9; z-index: 2; }

/* sound effects become red seal stamps */
html[lang="ja"] .mg-fx { color: #fff !important; background: #b31b10; -webkit-text-stroke: 0 !important; text-shadow: none !important; padding: 6px 8px 4px; font-size: 22px !important; transform: rotate(-4deg); box-shadow: inset 0 0 0 2px #f3efe4, 0 0 0 2px #b31b10; writing-mode: vertical-rl; letter-spacing: .05em; }
html[lang="ja"] .mg-title .mg-fx { display: none; }

/* captions and speech in ink; ending tag as a seal */
html[lang="ja"] .mg-cap { background: #f5ecd8; border: 2px solid #1a0f0a; font-family: var(--mincho); font-weight: 700; color: #1a0f0a; }
html[lang="ja"] .mg-say { font-family: var(--mincho); font-weight: 900; color: #1a0f0a; }
html[lang="ja"] .mg-big { color: #1a0f0a; font-family: var(--mincho); }
html[lang="ja"] .mg-end { background: #b31b10; color: #fff; box-shadow: inset 0 0 0 2px #f5ecd8; font-family: var(--mincho); }
html[lang="ja"] .mg-note { color: #5a3a24; }
@media (max-width: 560px) { html[lang="ja"] .mg-title { background: radial-gradient(circle at 50% 30%, #f3efe4 0 70px, transparent 72px), radial-gradient(ellipse at 70% 30%, #a3190d, #5a0a05 70%, #2b0503) !important; }
  html[lang="ja"] .mg-portrait { width: 130px; height: 130px; left: calc(50% - 65px) !important; top: 30%; margin-top: -65px; }
  html[lang="ja"] .mg-title:has(.mg-portrait) { padding: 170px 16px 16px !important; } html[lang="ja"] .mg-title::after { font-size: 16px; } }
/* scroll page v2: brighter ink portrait, compact seal stamps, no invented words */
html[lang="ja"] .mg-portrait img { filter: grayscale(1) contrast(1.35) brightness(1.15); mix-blend-mode: normal; }
html[lang="ja"] .mg-portrait::after { background: radial-gradient(circle, transparent 62%, rgba(243,239,228,.6) 100%); }
html[lang="ja"] .mg-title::after { content: 'アレックス'; }
html[lang="ja"] .mg-fx { writing-mode: horizontal-tb; font-size: 17px !important; padding: 5px 8px 4px; top: 10px; right: 10px; }
html[lang="ja"] .mg-p:not(.mg-title) { padding-top: 52px; }
/* scroll page v3: Japanese words never split across lines; clean triangle bubble tails; no grey blobs */
html[lang="ja"] .mg-say, html[lang="ja"] .mg-cap { word-break: keep-all; line-break: strict; overflow-wrap: anywhere; }
html[lang="ja"] .mg-say { padding: 12px 22px; }
.mgdlg .mg-say::after { border: 0 !important; background: #111 !important; transform: none !important; width: 18px; height: 16px; bottom: -15px; left: 30px; clip-path: polygon(0 0, 100% 0, 15% 100%); }
.mgdlg .mg-say::before { content: ''; position: absolute; z-index: 1; width: 13px; height: 11px; bottom: -10px; left: 32.5px; background: #fff; clip-path: polygon(0 0, 100% 0, 15% 100%); }
html[lang="ar"] .mgdlg .mg-say::after, html[lang="ar"] .mgdlg .mg-say::before { left: auto; right: 30px; clip-path: polygon(0 0, 100% 0, 85% 100%); }
html[lang="ar"] .mgdlg .mg-say::before { right: 32.5px; }
html[lang="ja"] .mg-p:not(.mg-title) { background:
    radial-gradient(ellipse 7px 4px at 18% 22%, #f4a7b9 60%, transparent 62%),
    radial-gradient(ellipse 6px 4px at 74% 64%, #f7b9c8 60%, transparent 62%),
    radial-gradient(ellipse 5px 3px at 44% 86%, #f4a7b9 60%, transparent 62%),
    radial-gradient(ellipse 6px 3px at 62% 30%, #f7b9c8 60%, transparent 62%),
    radial-gradient(circle at 6% 94%, rgba(160,16,10,.45) 0 4px, transparent 5px),
    #f5ecd8 !important; }
.mgdlg .mg-say::after { left: 22%; bottom: -13px; width: 20px; height: 18px; }
.mgdlg .mg-say::before { left: calc(22% + 3px); bottom: -7px; width: 14px; height: 12px; z-index: 2; }
html[lang="ar"] .mgdlg .mg-say::after { left: auto; right: 22%; } html[lang="ar"] .mgdlg .mg-say::before { left: auto; right: calc(22% + 3px); }
/* Alex as a manga character (drawn from his photo, 15 Nov 2026): frame his face in the circle */
.mg-portrait.is-manga img { width: 341% !important; left: -110% !important; top: 3% !important; filter: none !important; }
html[lang="ja"] .mg-portrait.is-manga img { filter: contrast(1.05) !important; }
/* panel drawings: Alex as a manga character at the top of each panel */
.mg-art { position: relative; z-index: 1; display: block; margin: -2px -2px 4px; border: 2px solid #111; overflow: hidden; aspect-ratio: 16 / 9; background: #f3efe6; }
.mg-art[hidden] { display: none; }
.mg-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-p.has-art { justify-content: flex-start; }
.mg-p.has-art .mg-fx { z-index: 3; }
html[lang="ml"] .mg-art { border-radius: 10px !important; }
/* Themes link in the header: quiet text link beside the comic button */
.themeslink { color: rgba(255,255,255,.7); font: 500 11.5px/1 'Poppins', 'Yu Gothic UI', 'Nirmala UI', 'Segoe UI', sans-serif; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 9px 6px; border-bottom: 1px solid transparent; }
html[lang="ja"] .themeslink, html[lang="ml"] .themeslink, html[lang="ar"] .themeslink { letter-spacing: .02em; font-size: 13px; }
.themeslink:hover, .themeslink:focus-visible { color: #fff; border-bottom-color: var(--verm); }
/* Care button in the header: gentle, always visible */
.carebtn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.25); color: #fff; padding: 8px 13px; cursor: pointer; font: 500 11.5px/1 'Poppins', 'Yu Gothic UI', 'Nirmala UI', 'Segoe UI', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
html[lang="ja"] .carebtn, html[lang="ml"] .carebtn, html[lang="ar"] .carebtn { letter-spacing: .02em; font-size: 13px; }
.carebtn svg { width: 15px; height: 15px; fill: none; stroke: var(--verm); stroke-width: 1.7; stroke-linejoin: round; }
.carebtn:hover, .carebtn:focus-visible { border-color: var(--verm); outline: none; }
/* support lines look like phone numbers you can tap: phone icon, big number, Call button (Viv, 15 Nov 2026) */
.support a[href^="tel:"] { position: relative; display: grid !important; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px !important; margin-bottom: 8px; border: 1px solid color-mix(in srgb, var(--verm) 55%, transparent) !important; background: rgba(0,0,0,.35) !important; }
.support a[href^="tel:"]::before { content: ''; grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50% !important; background: var(--verm) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center / 20px no-repeat; }
.support a[href^="tel:"] b { grid-column: 2; font: 600 20px/1.2 'Poppins', 'Yu Gothic UI', 'Nirmala UI', 'Segoe UI', sans-serif !important; color: #fff !important; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.support a[href^="tel:"] span { grid-column: 2; font-size: 12.5px !important; line-height: 1.4; color: rgba(255,255,255,.65) !important; }
.support a[href^="tel:"]::after { grid-column: 3; grid-row: 1 / 3; padding: 9px 14px; background: var(--verm); color: #fff; font: 600 12.5px/1 'Poppins', 'Yu Gothic UI', 'Nirmala UI', 'Segoe UI', sans-serif; letter-spacing: .06em; content: 'Call'; }
html[lang="ja"] .support a[href^="tel:"]::after { content: '電話する'; }
html[lang="ml"] .support a[href^="tel:"]::after { content: 'വിളിക്കുക'; }
html[lang="ar"] .support a[href^="tel:"]::after { content: 'اتصل'; }
.support a[href^="tel:"]:hover, .support a[href^="tel:"]:focus-visible { background: color-mix(in srgb, var(--verm) 18%, rgba(0,0,0,.35)) !important; outline: none; }
.support > p { font-size: 14px !important; color: #fff !important; padding: 8px 0 0; }
@media (max-width: 420px) { .support a[href^="tel:"] { grid-template-columns: 40px 1fr; } .support a[href^="tel:"]::after { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; text-align: center; } }

/* every support card the same: Find a Helpline gets a globe icon and an Open button */
.support a.webline { position: relative; display: grid !important; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px !important; margin-bottom: 8px; border: 1px solid color-mix(in srgb, var(--verm) 55%, transparent) !important; background: rgba(0,0,0,.35) !important; text-decoration: none; }
.support a.webline::before { content: ''; grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50% !important; background: var(--verm) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.2 3 14.8 0 18M12 3c-3 3.2-3 14.8 0 18'/%3E%3C/svg%3E") center / 20px no-repeat; }
.support a.webline b { grid-column: 2; font: 600 20px/1.2 'Poppins', 'Yu Gothic UI', 'Nirmala UI', 'Segoe UI', sans-serif !important; color: #fff !important; }
.support a.webline span { grid-column: 2; font-size: 12.5px !important; color: rgba(255,255,255,.65) !important; }
.support a.webline::after { grid-column: 3; grid-row: 1 / 3; padding: 9px 14px; border: 1px solid var(--verm); color: #fff; font: 600 12.5px/1 'Poppins', 'Yu Gothic UI', 'Nirmala UI', 'Segoe UI', sans-serif; content: 'Open'; }
html[lang="ja"] .support a.webline::after { content: '開く'; }
html[lang="ml"] .support a.webline::after { content: 'തുറക്കുക'; }
html[lang="ar"] .support a.webline::after { content: 'افتح'; }
.support a.webline:hover { background: color-mix(in srgb, var(--verm) 18%, rgba(0,0,0,.35)) !important; }
.support a[href^="tel:"] span, .support a.webline span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .support a.webline { grid-template-columns: 40px 1fr; } .support a.webline::after { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; text-align: center; } }
/* stronger selector so the forward card wins over the theme styles */
html body .tiles.staged.has-open .tile.asked { position: fixed !important; z-index: 61 !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; margin: 0 !important; transform: translate(-50%, -50%) !important; width: min(760px, calc(100vw - 32px)) !important; max-height: calc(100vh - 96px) !important; overflow: auto !important; }
html body .tiles.staged.has-open::before { content: ''; position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
html body .tiles.staged.has-open .stagebtns { position: fixed !important; z-index: 62 !important; top: 16px !important; right: 16px !important; left: auto !important; }
html[dir="rtl"] body .tiles.staged.has-open .stagebtns { right: auto !important; left: 16px !important; }
/* English meaning under card titles: shown only on the Japanese, Malayalam and Arabic pages */
.cen { display: none; }
html:not([lang="en"]) .cen { display: block; font: 400 11px/1.3 'Poppins', 'Segoe UI', sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase; color: rgba(255,255,255,.5) !important; margin-top: 3px; direction: ltr; }
html:not([lang="en"]) .tile > h2 .cen { font-size: 12px !important; margin-top: 6px; }
html[data-theme="english"]:not([lang="en"]) .ccard .cen { color: rgba(26,22,18,.55) !important; }
/* clear icons for every card and header link, so the meaning is obvious in any language (Viv, 15 Nov 2026) */
.ccard[data-id] .ctitle::before, .tile[data-id] > h2::before, [data-t]::before, .homelink::before, .themeslink:not(.homelink)::before {
  content: ''; display: inline-block; width: 16px; height: 16px; margin-inline-end: 7px; vertical-align: -3px; background: var(--verm);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.tile[data-id] > h2::before { width: 22px; height: 22px; vertical-align: -4px; }
[data-id="music"], [data-t="music"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E"); }
[data-id="pop"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2l3 7h7l-5.5 4.5 2 7.5L12 16.5 5.5 21l2-7.5L2 9h7z'/%3E%3C/svg%3E"); }
[data-id="food"], [data-t="food"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 11h18a9 9 0 0 1-18 0zM7 7c0-2 2-2 2-4M12 7c0-2 2-2 2-4M17 7c0-2 2-2 2-4'/%3E%3C/svg%3E"); }
[data-id="ice"], [data-t="ice"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M7 11a5 5 0 0 1 10 0zM7 11l5 11 5-11'/%3E%3C/svg%3E"); }
[data-id="travel"], [data-t="travel"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M2 13l8-2 5-8h2l-2 8 6 1 1 2-7 1-2 6h-2l-1-6-8-1z'/%3E%3C/svg%3E"); }
[data-id="manga"], [data-t="manga"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 6.5C10 5 7 4.5 3.5 5v13c3.5-.5 6.5 0 8.5 1.5 2-1.5 5-2 8.5-1.5V5C17 4.5 14 5 12 6.5zM12 6.5v13'/%3E%3C/svg%3E"); }
[data-id="calendar"], [data-t="calendar"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
[data-id="contact"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
[data-id="photos"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-9 8'/%3E%3C/svg%3E"); }
[data-t="care"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E"); }
.homelink { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8v10h-6v-6H9v6H3z'/%3E%3C/svg%3E"); }
.themeslink:not(.homelink) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='8' height='8'/%3E%3Crect x='13' y='3' width='8' height='8'/%3E%3Crect x='3' y='13' width='8' height='8'/%3E%3Crect x='13' y='13' width='8' height='8'/%3E%3C/svg%3E"); }
html[data-theme="english"] .ccard[data-id] .ctitle::before { background: #b4521a; }

/* girl / boy voice slider under the globe */
.vslide { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.3); }
.vslide button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 8px; border: 0; background: none; color: rgba(255,255,255,.7); cursor: pointer; font: 500 12.5px/1 'Poppins', 'Yu Gothic UI', 'Nirmala UI', 'Segoe UI', sans-serif; }
.vslide svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.vslide button[aria-checked="true"] { background: var(--verm); color: #fff; }
.vslide button:disabled { opacity: .35; cursor: not-allowed; }
.vslide button:not(:disabled):hover { color: #fff; }
.vslide svg.g { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.ivlink { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21'/%3E%3C/svg%3E"); }

/* sticky header: the four languages stay visible; it sits above an open card (Viv, 15 Nov 2026) */
html body header.top { position: sticky !important; top: 0 !important; z-index: 63 !important; background: rgba(10,10,12,.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
html body .tiles.staged.has-open .stagebtns { top: calc(var(--toph, 64px) + 12px) !important; }
html body .tiles.staged.has-open .tile.asked { top: calc(50% + var(--toph, 64px) / 2) !important; max-height: calc(100vh - var(--toph, 64px) - 72px) !important; }
.backbtn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border: 0; background: var(--verm, #c8341f); color: #fff; cursor: pointer; font: 600 13px/1 'Poppins', 'Yu Gothic UI', 'Nirmala UI', 'Segoe UI', sans-serif; }
.backbtn[hidden] { display: none !important; }
.backbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] .backbtn svg { transform: scaleX(-1); }

/* Settings lives in the header only; the old bottom bar is hidden, its button kept for the header to open (Viv, 15 Nov 2026) */
html body .sidefoot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }

/* header buttons: one look for all, glass with soft shadow, no border (Viv, 15 Nov 2026) */
html body header.top .mgbtn, html body header.top .carebtn, html body header.top .themeslink {
  display: inline-flex !important; align-items: center !important; gap: 7px !important; height: 36px !important; box-sizing: border-box !important;
  padding: 0 14px !important; border: 0 !important; border-radius: 0 !important;
  background: rgba(255,255,255,.07) !important; color: rgba(255,255,255,.88) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 13px !important; font-weight: 500 !important; line-height: 1 !important; text-decoration: none !important; transition: background .2s ease, color .2s ease;
}
html body header.top .mgbtn:hover, html body header.top .carebtn:hover, html body header.top .themeslink:hover,
html body header.top .mgbtn:focus-visible, html body header.top .carebtn:focus-visible, html body header.top .themeslink:focus-visible { background: rgba(255,255,255,.14) !important; color: #fff !important; outline: none; }
html body header.top .mgbtn { background: color-mix(in srgb, var(--verm, #c8341f) 30%, transparent) !important; }

/* Japanese theme: headings in vermilion, same font and spacing as the Settings title */
html[data-theme="redback"] h1, html[data-theme="redback"] h2, html[data-theme="redback"] h3:not(.ccard h3) { color: var(--verm, #c8341f) !important; font-weight: 500 !important; letter-spacing: .18em !important; }

/* dashboard globe: no black square behind it, same round fade as the home page (Viv, 15 Nov 2026) */
html body .orbwrap { background: transparent !important; box-shadow: none !important; border: 0 !important; }
html body .orbwrap #orb { -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 58%, rgba(0,0,0,.6) 64%, transparent 71%); mask-image: radial-gradient(circle at 50% 50%, #000 58%, rgba(0,0,0,.6) 64%, transparent 71%); }

/* scene options inside the orb (Viv, 15 Nov 2026) */
html body .orbwrap canvas.scene3d { position: absolute !important; inset: 0; width: 100%; height: 100%; z-index: 1; mix-blend-mode: normal !important; -webkit-mask-image: none !important; mask-image: none !important; cursor: default; }
html body .orbwrap canvas.scene3d[hidden] { display: none !important; }
.scenepick { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 14px; }
.scenepick button { padding: 7px 11px; border: 0; background: rgba(255,255,255,.07); color: rgba(255,255,255,.8); box-shadow: 0 4px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08); font: 500 12px/1 'Poppins', 'Yu Gothic UI', 'Nirmala UI', 'Segoe UI', sans-serif; cursor: pointer; }
.scenepick button:hover, .scenepick button:focus-visible { background: rgba(255,255,255,.14); color: #fff; outline: none; }
.scenepick button[aria-checked="true"] { background: var(--verm, #c8341f); color: #fff; }

/* Paris theme (French): violet light (Viv, 15 Nov 2026: "in a different hue") */
html[data-theme="paris"] { --verm: #9b6bff; --sky1: #120a24; --sky2: #2a1450; --a1: rgba(170,120,255,.6); --a1s: rgba(120,70,220,.3); --a2: rgba(255,140,210,.45); --a2s: rgba(200,90,170,.25); }
html[data-theme="paris"] body { background: radial-gradient(120% 90% at 50% 0%, #2a1450 0%, #120a24 60%, #07040f 100%) fixed; }
html[data-theme="paris"] h1, html[data-theme="paris"] h2 { color: #c9b0ff; }
/* French has no comic of its own yet: show the English text inside French pages */
html:not([lang="fr"]) span[lang="fr"] { display: none !important; }
html[lang="fr"] .mg-page [lang="en"] { display: revert !important; }

/* gentle prompt and the highlight when asked where something is */
.ivhint { position: fixed; z-index: 70; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: min(560px, calc(100vw - 32px)); padding: 12px 18px; background: rgba(14,14,20,.9); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.45); border-left: 3px solid var(--verm, #c8341f); font: 500 14px/1.45 'Poppins', 'Yu Gothic UI', 'Nirmala UI', 'Segoe UI', sans-serif; }
.ivhint[hidden] { display: none; }
.ivflash { animation: ivflash 2.4s ease; }
@keyframes ivflash { 0%, 100% { box-shadow: none; } 20%, 60% { box-shadow: 0 0 0 3px var(--verm, #c8341f), 0 0 34px var(--verm, #c8341f); } }
@media (prefers-reduced-motion: reduce) { .ivflash { animation: none; outline: 3px solid var(--verm, #c8341f); } }

/* the panel takes the colour of the scene in the globe (Viv, 15 Nov 2026: cherry blossom turns the panel pink) */
html[data-scene="blossom"], html[data-scene="blossom"][data-theme] { --verm: #e8789f !important; }
html[data-scene="blossom"][data-theme] body, html[data-scene="blossom"] body { background: radial-gradient(120% 90% at 50% 0%, #4a1f33 0%, #24101b 55%, #0d0609 100%) fixed !important; }
html[data-scene="blossom"] h1, html[data-scene="blossom"] h2 { color: #ffb8d0 !important; }
html[data-scene="fish"], html[data-scene="fish"][data-theme] { --verm: #3fb4e0 !important; }
html[data-scene="fish"][data-theme] body, html[data-scene="fish"] body { background: radial-gradient(120% 90% at 50% 0%, #0f3346 0%, #081a24 55%, #04090d 100%) fixed !important; }
html[data-scene="boat"], html[data-scene="boat"][data-theme] { --verm: #f0932f !important; }
html[data-scene="boat"][data-theme] body, html[data-scene="boat"] body { background: radial-gradient(120% 90% at 50% 0%, #4a2a10 0%, #1f1408 55%, #0a0703 100%) fixed !important; }
html[data-scene="palm"], html[data-scene="palm"][data-theme] { --verm: #e6b34a !important; }
html[data-scene="palm"][data-theme] body, html[data-scene="palm"] body { background: radial-gradient(120% 90% at 50% 0%, #1a2a4a 0%, #0b1426 55%, #04070f 100%) fixed !important; }
html[data-scene="eiffel"], html[data-scene="eiffel"][data-theme] { --verm: #b07cff !important; }
html[data-scene="eiffel"][data-theme] body, html[data-scene="eiffel"] body { background: radial-gradient(120% 90% at 50% 0%, #3a1a5a 0%, #1a0c2c 55%, #0a0512 100%) fixed !important; }
html[data-scene] body, html[data-scene] .tile, html[data-scene] header.top { transition: background .8s ease, color .8s ease; }

/* world lists on the cards */
.world { margin-top: 14px; }
.world h3 { margin: 0 0 8px; font: 600 12px/1.2 'Poppins', 'Yu Gothic UI', 'Nirmala UI', 'Segoe UI', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--verm, #c8341f); }
.world ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.world li { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.world li b { min-width: 74px; font-weight: 600; }
.world li span { opacity: .78; }
.world ul.dessert { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.world ul.dessert li { display: grid; gap: 4px; align-items: start; }
.world ul.dessert img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; box-shadow: 0 6px 16px rgba(0,0,0,.35); }

/* Alex demo: no favourite photos (Viv, 15 Nov 2026) */
.setsec:has(#fav-add) { display: none !important; }

/* music from each place: play buttons */
.world ul.tracks li { align-items: center; }
.trk { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--verm, #c8341f); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.trk svg { width: 16px; height: 16px; fill: currentColor; }
.trk .pa { display: none; } .trk[aria-pressed="true"] .pa { display: inline; } .trk[aria-pressed="true"] .pl { display: none; }
.trknote { margin: 8px 0 0; font-size: 11.5px; opacity: .6; }

/* scene globes sit on the stand on every theme (Viv, 15 Nov 2026) */
/* the orb sits in front of its stand: the collar curves round the bottom edge, the picture is never covered (Viv, 15 Nov 2026) */
html[data-scene]:not([data-scene="globe"]) .orbwrap .stand { display: block !important; z-index: 0 !important; transform: translateY(8px); pointer-events: none; }
html[data-scene]:not([data-scene="globe"]) .orbwrap .scene3d { mix-blend-mode: normal !important; z-index: 2 !important; }
html[data-scene]:not([data-scene="globe"]) .orbwrap { margin-bottom: 8px; }
html[data-scene]:not([data-scene="globe"]) .orbwrap .ampbed { display: none !important; }
/* the spider's web progress and "Start building again" belong to the spider orb only (Viv, 15 Nov 2026) */
html[data-scene]:not([data-scene="globe"]) #orbstatus, html[data-scene]:not([data-scene="globe"]) #restart { display: none !important; }
/* the stand takes the colour of the theme or scene (Viv, 15 Nov 2026) */
.stand .st-tint { fill: var(--verm, #c8341f); opacity: .42; mix-blend-mode: color; }