/* Hallmark: prototype app screen; signature: globe and regional map stacked on the right of each live window. */
/* Critique: the camera remains the focus, while the regional inset remains legible. */
:root { color-scheme: dark; --shadow:#0008; --bg:#101616; --surface:#17201f; --map:#e3e4dc; --text:#f2f1e9; --muted:#a5b4aa; --accent:#c8dfae; --line:#3b4a43; --font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; overflow-x:clip; background:var(--bg); color:var(--text); font-family:var(--font); }
body { height:100vh; display:flex; flex-direction:column; }
.stage { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); gap:2px; background:var(--line); }
.stage.multi { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
.tile { min-width:0; min-height:0; background:var(--bg); display:flex; flex-direction:column; position:relative; }
.tile-content { --location-width:clamp(140px,calc(100% - 177.7778cqh - 24px),220px); flex:1; min-height:200px; position:relative; container-type:size; }
.video { position:absolute; top:50%; left:0; width:min(calc(100% - var(--location-width) - 24px),177.7778cqh); aspect-ratio:16 / 9; transform:translateY(-50%); background:var(--bg); }
.video iframe { width:100%; height:100%; border:0; display:block; }
.location { position:absolute; right:12px; top:12px; bottom:12px; width:var(--location-width); display:flex; flex-direction:column; background:var(--surface); box-shadow:0 2px 12px var(--shadow); pointer-events:none; }
.location-head { order:3; padding:4px 8px; background:var(--surface); }
.globe { order:1; flex:0 1 50%; min-height:0; align-self:center; aspect-ratio:1; max-width:100%; padding:4px; }
.globe svg { display:block; width:100%; height:100%; }
.place { min-width:0; }
.place h2 { margin:0; font-size:clamp(13px,1.3vw,18px); line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.place p { display:none; }
.map { order:2; flex:1; min-height:0; background:var(--map); }
.switch-progress { position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:left; animation:switch-progress var(--switch-duration) linear forwards; pointer-events:none; }
@keyframes switch-progress { to { transform:scaleX(1); } }
@media (prefers-reduced-motion:reduce) { .switch-progress { animation-timing-function:steps(12,end); } }
.message { margin:auto; padding:32px; color:var(--muted); }
.maplibregl-ctrl-attrib { font-size:10px; pointer-events:auto; }
@media (max-width:900px) { .stage.multi { grid-template-columns:minmax(0,1fr); grid-template-rows:none; } .tile-content { min-height:380px; } }
@media (max-width:580px) { .tile-content { --location-width:35%; min-height:56vw; } .place h2 { font-size:12px; } }