/* GrandCraft engine 0.3: cinematic skin.
   Night-teal world, saffron glow, Teko display titles. In-world paper (notebooks, bills, cards) stays light.
   Contrast: body text #EEF3EA on #0F3034 is about 12:1; saffron #F2B13B on #0F3034 is about 7.6:1. */
@font-face { font-family: "Teko"; font-weight: 500; font-display: swap; src: url(../fonts/teko-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF,U+2000-206F,U+20B9; }
@font-face { font-family: "Teko"; font-weight: 600; font-display: swap; src: url(../fonts/teko-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF,U+2000-206F,U+20B9; }
@font-face { font-family: "Teko"; font-weight: 700; font-display: swap; src: url(../fonts/teko-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF,U+2000-206F,U+20B9; }

:root {
  --ink: #EEF3EA; --ink-soft: #A9C2BE;
  --leaf: #F2B13B; --leaf-d: #9A6614; --leaf-l: #FFD27A; --leaf-wash: rgba(242,177,59,.14);
  --gold: #F2B13B; --gold-l: #FFD27A;
  --lat: #FF7A59;
  --page: #0B2427; --panel: #0F3034; --card: #133A3F; --line: rgba(255,255,255,.14);
  --paper: #FFF8E7; --paper-ink: #2A2216;
  --display: "Teko", "Baloo Chettan 2", system-ui, sans-serif;
  color-scheme: dark;
}
body { background: radial-gradient(120% 60% at 50% 0%, #12393D 0%, var(--page) 60%) fixed; }
.app { background: transparent; }
.panel { background: linear-gradient(180deg, rgba(15,48,52,.96), rgba(11,36,39,.98)); }

/* top bar: glass */
.bar { background: rgba(6,24,27,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar .mark { flex: 0 0 auto; white-space: nowrap; font-family: var(--display); font-size: 1.4rem; font-weight: 600; letter-spacing: .04em; line-height: 1; text-transform: uppercase; padding-top: 6px; }
.tool { border-color: rgba(255,255,255,.22); min-width: 38px; height: 38px; padding: 0 7px; }
.bar { gap: 3px; }
@media (max-width: 400px) { .bar .mark { font-size: 1.2rem; } .tool { min-width: 34px; height: 34px; padding: 0 5px; font-size: .9rem; } .tool svg { width: 18px; height: 18px; } }
.tool[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #1A1204; }
.kasavu { background: linear-gradient(to bottom, var(--gold) 0 3px, transparent 3px 5px, var(--gold-l) 5px 7px, var(--gold) 7px 9px); box-shadow: 0 0 14px rgba(242,177,59,.45); }

/* titles */
.title-block h1, .shelf h1, .life-h, .pp h2, .op-title, .cine-title, .map-head h1 { font-family: var(--display); font-weight: 600; letter-spacing: .02em; color: #fff; line-height: .95; }
html[lang="ml"] .title-block h1, html[lang="ml"] .shelf h1, html[lang="ml"] .life-h, html[lang="ml"] .pp h2, html[lang="ml"] .op-title, html[lang="ml"] .cine-title, html[lang="ml"] .map-head h1 { font-family: "Baloo Chettan 2", sans-serif; font-weight: 800; line-height: 1.15; }
.title-block h1 { font-size: 3.4rem; text-transform: uppercase; }
.title-block h1 span, .bar .mark span { color: var(--gold); text-shadow: 0 0 18px rgba(242,177,59,.55); }
.shelf h1, .life-h, .pp h2, .map-head h1 { font-size: 2.3rem; }
.speaker { color: var(--gold); letter-spacing: .01em; }

/* buttons: saffron glow */
.btn { background: linear-gradient(180deg, #FFC85A, #E9A12A); color: #1A1204; box-shadow: 0 3px 0 #8F5E0E, 0 0 22px rgba(242,177,59,.28); }
.btn:active { box-shadow: 0 1px 0 #8F5E0E; }
.btn[disabled] { background: #3A5457; color: #9DB3B0; box-shadow: none; }
.btn.ghost { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.btn.gold { background: var(--gold); color: #1A1204; }

/* cards and surfaces that were white */
.tile, .chip, .opt, .slot, .sheet, .pp .ledger, .life, .chapters li, .mission, .lang-pick button { background: var(--card); color: var(--ink); border-color: var(--line); }
.life.is-soon, .chapters li.is-soon { background: rgba(19,58,63,.55); }
.opt:hover, .tile:hover, .chip:hover, .life:hover { border-color: rgba(242,177,59,.55); }
.opt.sel, .opt.right, .tile.used, .lang-pick button[aria-pressed="true"] { background: var(--leaf-wash); border-color: var(--gold); }
.opt.wrong, .slot.bad { background: rgba(255,122,89,.14); border-color: var(--lat); }
.feedback { background: var(--leaf-wash); border-left-color: var(--gold); }
.feedback.no { background: rgba(255,122,89,.12); border-left-color: var(--lat); }
.hint-box { background: rgba(255,210,122,.12); }
.notice { background: rgba(120,140,230,.14); border-left-color: #8C9BFF; }
.coin-pill { background: rgba(242,177,59,.12); color: var(--gold-l); }
.coin-note { color: var(--gold-l); }
.badge, .tier-badge { background: rgba(242,177,59,.16); color: var(--gold-l); }
.badge.len-saga { background: rgba(120,190,230,.16); color: #A9DDF5; }
.badge.len-lifetime { background: rgba(255,210,122,.2); color: #FFE3A3; }
.tier-badge.t2, .tier-badge.t3 { background: rgba(255,122,89,.16); color: #FFB09C; }
.mission .eyebrow { color: var(--gold-l); }
.mission h3, .blessing h3 { color: #fff; }
.blessing { background: linear-gradient(135deg, #16474C, #0D2C30); border: 1px solid rgba(242,177,59,.35); }
.continue { background: var(--leaf-wash); border-color: var(--gold); }
.slot .n { background: rgba(242,177,59,.2); color: var(--gold-l); }
.pp .ledger li { border-top-color: var(--line); }
.stage, .life-cover { background: #12393D; }
.stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(transparent, rgba(11,36,39,.55)); pointer-events: none; }
.stage .chapter-tag { background: rgba(6,24,27,.78); color: var(--gold-l); border: 1px solid rgba(242,177,59,.4); }
.result b { color: var(--gold); }
details.others summary { color: var(--gold); }

/* in-world paper stays paper */
.notebook, .wfront, .bill { color: var(--paper-ink); }
.notebook .got { color: #1F4A28; }
.wfront { background: var(--paper); }
.wfront .theme { color: #5A5040; } .wfront .h4 { color: #1F4A28; font-family: var(--display); font-size: 1.6rem; font-weight: 600; }
html[lang="ml"] .wfront .h4 { font-family: "Baloo Chettan 2", sans-serif; font-size: 1.2rem; }
.wfront .art { background: #E2EDD8; }
.wback { background: radial-gradient(circle at 50% 40%, #1E5A5F, #0B2427); color: var(--gold-l); text-shadow: 0 0 12px rgba(242,177,59,.6); }
.board { background: #1B2B24; }

/* tiny bill + magnifier */
.bill { background: var(--paper); border-radius: 6px; padding: 10px 12px; font-size: .62rem; line-height: 1.45; box-shadow: 0 6px 18px rgba(0,0,0,.4); transform: rotate(-1deg); transition: font-size .25s, transform .25s; white-space: pre-line; border-top: 6px solid #2E6FB0; }
.bill.mag { font-size: 1rem; transform: none; box-shadow: 0 0 0 3px var(--gold), 0 8px 24px rgba(0,0,0,.5); }

/* HUD toasts */
#hud { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); width: min(520px, calc(100% - 24px)); z-index: 50; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.hud-toast { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px; background: rgba(6,24,27,.92); border: 1px solid rgba(242,177,59,.5); color: #fff; font-weight: 700; font-size: .92rem; box-shadow: 0 0 24px rgba(242,177,59,.25); animation: hudIn .35s cubic-bezier(.2,.8,.2,1); }
.hud-toast i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.hud-toast.coin i { background: radial-gradient(circle at 35% 35%, #FFE3A3, #E9A12A); width: 16px; height: 16px; }
.hud-toast.remember { border-color: rgba(140,155,255,.6); } .hud-toast.remember i { background: #8C9BFF; box-shadow: 0 0 10px #8C9BFF; }
.hud-toast.flag { border-color: rgba(255,122,89,.7); } .hud-toast.flag i { background: var(--lat); box-shadow: 0 0 10px var(--lat); }
.hud-toast.out { opacity: 0; transform: translateY(-8px); transition: .5s; }
@keyframes hudIn { from { opacity: 0; transform: translateY(-12px) scale(.97); } }

/* cinematic title cards (letterboxed) */
.cine { position: relative; aspect-ratio: 4 / 5; max-height: 62dvh; width: 100%; overflow: hidden; background: #06181B; }
.cine::before, .cine::after { content: ""; position: absolute; left: 0; right: 0; height: 9%; background: #000; z-index: 3; }
.cine::before { top: 0; } .cine::after { bottom: 0; }
.cine .scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(1.35); filter: saturate(.8) brightness(.7); animation: kenburns 14s ease-out forwards; }
.cine-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,24,27,.15) 30%, rgba(6,24,27,.92) 85%); z-index: 1; }
.cine-pic + .cine-text::before { content: ""; position: absolute; inset: -40px -18px -20px; background: linear-gradient(transparent, rgba(6,24,27,.85) 45%); z-index: -1; }
.cine-pic { position: absolute; right: -2%; bottom: 22%; width: 50%; z-index: 2; filter: drop-shadow(0 0 22px rgba(242,177,59,.35)); animation: rise .9s cubic-bezier(.2,.8,.2,1) both; }
.cine-pic svg { width: 100%; height: auto; display: block; }
.cine-text { position: absolute; left: 18px; right: 18px; bottom: 12%; z-index: 4; display: flex; flex-direction: column; gap: 4px; animation: rise .8s .15s cubic-bezier(.2,.8,.2,1) both; }
.cine-kicker { align-self: flex-start; background: rgba(6,24,27,.85); padding: 2px 8px; border-radius: 6px; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.cine-title { margin: 0; font-size: 3.6rem; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 30px rgba(242,177,59,.35); }
html[lang="ml"] .cine-title { font-size: 2.1rem; }
.cine-sub { max-width: 30em; text-shadow: 0 1px 2px rgba(0,0,0,.8); color: #DCE7E3; font-size: .95rem; line-height: 1.35; }
.cine.switched .cine-pic { animation: rise .9s cubic-bezier(.2,.8,.2,1) both, glowPulse 2.4s .9s ease-in-out 2; }
.panel.slim { flex: 0 0 auto; padding-top: 14px; }
@keyframes kenburns { to { transform: scale(1.18) translateX(-3%); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes glowPulse { 50% { filter: drop-shadow(0 0 38px rgba(242,177,59,.8)); } }

/* character switch wheel */
.wheel-wrap { position: relative; aspect-ratio: 1 / 1; max-height: 62dvh; width: 100%; overflow: hidden; background: #06181B; }
.wheel-wrap .scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(1.4); filter: blur(3px) brightness(.45); }
.wheel { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 6%; gap: 6%; }
.wheel-ring { position: absolute; left: 50%; top: 50%; width: 82%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(242,177,59,.35); box-shadow: inset 0 0 40px rgba(242,177,59,.15), 0 0 40px rgba(242,177,59,.12); animation: spin 18s linear infinite; background: conic-gradient(from 0deg, transparent 0 40%, rgba(242,177,59,.25) 50%, transparent 60%); }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.seat { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: #fff; font-weight: 800; }
.seat-pic { width: 100%; max-width: 150px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #1E5A5F, #0B2427); border: 3px solid rgba(255,255,255,.25); display: grid; place-items: end center; }
.seat-pic svg { width: 86%; height: auto; display: block; }
.seat-from { opacity: .62; filter: grayscale(.5); }
.seat-to { cursor: pointer; }
.seat-to .seat-pic { border-color: var(--gold); box-shadow: 0 0 0 6px rgba(242,177,59,.18), 0 0 34px rgba(242,177,59,.55); animation: breathe 2s ease-in-out infinite; }
.seat-to:focus-visible .seat-pic { outline: 3px solid #fff; outline-offset: 4px; }
.seat-name { font-family: var(--display); font-size: 1.6rem; font-weight: 600; line-height: 1; letter-spacing: .03em; }
html[lang="ml"] .seat-name { font-family: "Baloo Chettan 2", sans-serif; font-size: 1.1rem; }
.seat-tag { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.seat-tag.glow { color: #1A1204; background: var(--gold); padding: 3px 10px; border-radius: 10px; letter-spacing: .04em; text-transform: none; font-size: .82rem; }
@keyframes breathe { 50% { transform: scale(1.04); } }
.prompt.center { text-align: center; }

/* phone */
.call-stage { position: relative; min-height: 470px; display: grid; place-items: center; padding: 18px 0; overflow: hidden; background: #06181B; }
.call-stage .scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(4px) brightness(.4); transform: scale(1.3); }
.call-stage .cine-shade { background: rgba(6,24,27,.35); }
.phone { position: relative; z-index: 2; width: min(300px, 82%); height: 430px; border-radius: 36px; background: #050D0F; border: 3px solid #2A3B3E; box-shadow: 0 0 0 8px #111C1E, 0 24px 60px rgba(0,0,0,.6); padding: 26px 14px 16px; display: flex; flex-direction: column; color: #fff; }
.phone::before { content: ""; position: absolute; top: 10px; left: 50%; width: 70px; height: 8px; border-radius: 4px; background: #1B2629; transform: translateX(-50%); }
.ph-top { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; margin-top: 30px; }
.ph-top.small { margin-top: 4px; padding-bottom: 8px; border-bottom: 1px solid #1E2C2F; }
.ph-in { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #8FA6A3; }
.ph-name { font-weight: 800; font-size: 1.25rem; }
.ph-top.small .ph-name { font-size: 1rem; }
.ph-num { font-size: .8rem; color: #8FA6A3; font-variant-numeric: tabular-nums; }
.ph-ring { position: relative; margin: 40px auto 0; width: 80px; height: 80px; }
.ph-ring i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(60,200,120,.6); animation: ring 1.8s ease-out infinite; }
.ph-ring i:nth-child(2) { animation-delay: .6s; } .ph-ring i:nth-child(3) { animation-delay: 1.2s; }
@keyframes ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.ph-note { font-size: .82rem; color: #DCE7E3; text-align: center; margin: 14px 4px 0; }
.ph-btns { margin-top: auto; display: flex; justify-content: space-around; padding-bottom: 10px; }
.ph-btn { width: 64px; height: 64px; border-radius: 50%; border: 0; font-size: 1.6rem; color: #fff; cursor: pointer; }
.ph-btn.yes { background: #22B060; box-shadow: 0 0 24px rgba(34,176,96,.6); animation: breathe 1.4s ease-in-out infinite; }
.ph-btn.no { background: #D8443A; }
.ph-chat { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 10px 2px 2px; scroll-behavior: smooth; }
.bub { max-width: 88%; padding: 7px 11px; border-radius: 14px; font-size: .84rem; line-height: 1.35; }
.bub.them { align-self: flex-start; background: #1E2C2F; border-bottom-left-radius: 4px; }
.bub.them.now { box-shadow: 0 0 0 1px rgba(255,122,89,.6); }
.bub.me { align-self: flex-end; background: #1F5B48; border-bottom-right-radius: 4px; }
.bub.warn { align-self: center; background: rgba(255,122,89,.18); color: #FFD0C4; border: 1px solid rgba(255,122,89,.5); font-size: .8rem; }
.bub.narr { align-self: center; background: transparent; color: #A9C2BE; font-style: italic; text-align: center; }
.ph-sms { align-self: stretch; background: #0F1A1C; border: 1px solid #263538; border-radius: 10px; padding: 6px 9px; font-size: .74rem; color: #CFE0DC; }
.ph-sms b { color: var(--lat); margin-right: 4px; }
.flags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.flags-l { font-weight: 800; font-size: .86rem; color: var(--lat); margin-right: 4px; letter-spacing: .02em; }
.flag-chip { font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 10px; background: rgba(255,122,89,.15); border: 1px solid rgba(255,122,89,.5); color: #FFD0C4; animation: rise .4s both; }

/* crew plan */
.op-head { border-left: 4px solid var(--gold); padding-left: 12px; }
.op-k { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.op-title { margin: 0; font-size: 2.4rem; text-transform: uppercase; }
html[lang="ml"] .op-title { font-size: 1.5rem; }
.op-obj { margin: 2px 0 0; color: #DCE7E3; font-size: .92rem; }
.crew { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.crew-m { flex: none; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.15; }
.crew-m svg { width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #1E5A5F, #0B2427); border: 2px solid rgba(242,177,59,.5); }
.tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.task { display: flex; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.task.good { border-color: #4FCB8A; box-shadow: inset 4px 0 0 #4FCB8A; }
.task.bad { border-color: var(--lat); box-shadow: inset 4px 0 0 var(--lat); }
.task-n { flex: none; width: 28px; height: 28px; border-radius: 8px; background: rgba(242,177,59,.2); color: var(--gold-l); font-weight: 800; display: grid; place-items: center; font-family: var(--display); font-size: 1.2rem; }
.task-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.task-b p { margin: 0; font-weight: 700; line-height: 1.35; }
.task select { font: inherit; font-size: .95rem; min-height: 44px; border-radius: 10px; border: 1.5px solid rgba(242,177,59,.5); background: #0B2427; color: var(--ink); padding: 0 10px; }
.task-hint { color: #FFB09C; font-size: .86rem; font-weight: 500 !important; }
.task-done { color: #9DE3BE; font-size: .86rem; font-weight: 500 !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* map */
.map-panel { gap: 10px; }
.map-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; }
.map-head h1 { margin: 0; text-transform: uppercase; }
.map-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.chip-btn { white-space: nowrap; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 16px; padding: 4px 12px; font-size: .82rem; font-weight: 700; cursor: pointer; }
.breeze-l { margin: 0; font-size: .9rem; color: var(--gold-l); }
.map-wrap { border-radius: 22px; overflow: hidden; border: 1px solid rgba(242,177,59,.35); box-shadow: 0 0 40px rgba(242,177,59,.12); }
.kmap { display: block; width: 100%; height: auto; }
.kmap .dusk { opacity: 0; pointer-events: none; }
.kmap .night-only { opacity: 0; }
.kmap.dark .dusk { opacity: .45; } .kmap.dark .night-only { opacity: 1; }
.kmap .sway { animation: sway 5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: bottom center; }
.kmap .waves { animation: drift 4s linear infinite; }
@keyframes sway { to { transform: rotate(3deg); } }
@keyframes drift { 50% { transform: translateX(4px); } }
.kmap .breeze { fill: none; stroke: #FFE9B0; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 12; animation: blow 1.4s linear infinite; filter: drop-shadow(0 0 4px rgba(255,210,122,.9)); }
@keyframes blow { to { stroke-dashoffset: -28; } }
.kmap .you-ping { animation: ping 2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.pin { cursor: pointer; outline: none; }
.pin .pin-ring { fill: #0B2427; stroke: #fff; stroke-width: 2.5; }
.pin .pin-glow { fill: rgba(242,177,59,.0); }
.pin.new .pin-glow, .pin.paused .pin-glow, .pin.target .pin-glow { fill: rgba(242,177,59,.45); animation: glowr 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.pin.target .pin-ring { stroke: var(--gold); stroke-width: 3.5; }
.pin.done .pin-ring { stroke: #9DE3BE; }
.pin.soon { opacity: .7; } .pin.soon .pin-ring { stroke: #A9C2BE; stroke-dasharray: 4 3; }
.pin.hidden .pin-ring { fill: rgba(6,24,27,.6); stroke: rgba(255,255,255,.5); stroke-dasharray: 3 3; }
.pin-q { fill: #fff; font-weight: 800; font-size: 16px; }
.pin-g { font-size: 18px; }
.pin-lab-bg { fill: rgba(6,24,27,.82); }
.pin-lab { fill: #fff; font-size: 11px; font-weight: 700; }
.pin:focus-visible .pin-ring { stroke: #fff; stroke-width: 4; }
@keyframes glowr { 50% { transform: scale(1.25); opacity: .5; } }
.map-sheet { position: relative; border-radius: 20px; background: rgba(19,58,63,.97); border: 1px solid rgba(242,177,59,.4); padding: 14px 16px 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 -10px 40px rgba(0,0,0,.4); animation: rise .35s both; }
.map-sheet h3 { margin: 0; font-family: var(--display); font-size: 1.9rem; font-weight: 600; line-height: 1; color: #fff; }
html[lang="ml"] .map-sheet h3 { font-family: "Baloo Chettan 2", sans-serif; font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.map-sheet p { margin: 0; font-size: .92rem; }
.map-sheet .private { font-size: .8rem; color: var(--ink-soft); }
.sheet-k { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.sheet-x { align-self: flex-end; }
.onair { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #FF4F4F; box-shadow: 0 0 8px #FF4F4F; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.radio-line { border-left: 3px solid var(--gold); padding-left: 10px; font-style: italic; color: #DCE7E3; }
.mode-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mode-chip { border: 1.5px solid var(--line); background: #0B2427; color: var(--ink); border-radius: 14px; padding: 6px 14px; font-weight: 700; cursor: pointer; }
.mode-chip.on { border-color: var(--gold); background: var(--leaf-wash); color: var(--gold-l); }

/* viewing modes (applied to the art, not the text) */
html[data-mode="mural"] .scene-bg, html[data-mode="mural"] .kmap, html[data-mode="mural"] .life-cover svg, html[data-mode="mural"] .cine-pic svg { filter: sepia(.35) saturate(1.5) hue-rotate(-10deg) contrast(1.08); }
html[data-mode="tv"] .stage, html[data-mode="tv"] .cine, html[data-mode="tv"] .map-wrap, html[data-mode="tv"] .life-cover { position: relative; }
html[data-mode="tv"] .scene-bg, html[data-mode="tv"] .kmap, html[data-mode="tv"] .life-cover svg, html[data-mode="tv"] .who-pic svg, html[data-mode="tv"] .cine-pic svg { filter: grayscale(1) contrast(1.25) brightness(1.05); }
html[data-mode="tv"] .stage::before, html[data-mode="tv"] .map-wrap::before, html[data-mode="tv"] .cine .cine-shade { background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); }
html[data-mode="tv"] .stage::before, html[data-mode="tv"] .map-wrap::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 60px rgba(0,0,0,.6); }
html[data-mode="tv"] .map-wrap { position: relative; }
html[data-mode="monsoon"] .scene-bg, html[data-mode="monsoon"] .kmap, html[data-mode="monsoon"] .life-cover svg { filter: saturate(.7) brightness(.85) hue-rotate(10deg); }
html[data-mode="monsoon"] .stage::before, html[data-mode="monsoon"] .map-wrap::before, html[data-mode="monsoon"] .cine .cine-shade::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: repeating-linear-gradient(105deg, rgba(200,230,255,.28) 0 1px, transparent 1px 9px); background-size: 40px 40px; animation: rain .5s linear infinite; }
html[data-mode="monsoon"] .map-wrap { position: relative; }
@keyframes rain { to { background-position: -8px 40px; } }
/* local night: a cooler, darker art layer */
html.night:not([data-mode="tv"]) .stage .scene-bg, html.night:not([data-mode="tv"]) .life-cover .scene-bg { filter: brightness(.72) saturate(.85) hue-rotate(8deg); }

@media (min-width: 600px) { .cine, .wheel-wrap { aspect-ratio: 16 / 11; } .cine-text { right: 46%; } .cine-pic { width: 40%; bottom: 9%; } .cine-pic + .cine-text::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .kmap .breeze { stroke-dasharray: none; } }