:root{
  --header-height:100px;

  /* FLAGS SIZE — bump this up/down to resize all flags at once */
  --hotspot-size:225px; /* e.g., 270px = +50% from 180px */

  --app-bg:#000;
  --header-bg-rgba:rgba(29,38,45,.75); /* #1D262D @ 75% */
  --text-color:#fff;
  --shadow:10px 0 3px rgba(0,0,0,.45); /* x10 y0 blur3 */
}

*{box-sizing:border-box}
html,body{height:100%}
html,body{
  margin:0;background:var(--app-bg);color:var(--text-color);
  font-family:"Source Sans 3",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}

/* Header */
.app-header{
  position:fixed;top:0;left:0;right:0;height:var(--header-height);
  display:flex;align-items:center;justify-content:space-between;padding:0 16px;
  background:var(--header-bg-rgba);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:var(--shadow);z-index:1000
}
.app-header .left{display:flex;align-items:center;gap:12px}
.logo{width:65px;height:50px;object-fit:contain;display:block}
.title{font-size:40px;font-weight:700;line-height:1;white-space:nowrap}
.back-link{
  appearance:none;background:none;border:none;color:var(--text-color);
  font-size:40px;font-weight:700;cursor:pointer;line-height:1;padding:8px 12px
}
.back-link[hidden]{display:none}

/* Viewport: center by left:50% + translate on the stage */
.viewport{
  position:fixed; top:var(--header-height); left:0; right:0; bottom:0;
  background:var(--app-bg);
  overflow:hidden;
}

/* Stage: fixed 16:9, absolutely positioned, top-centered */
.stage{
  position:absolute;
  top:0;
  left:50%;                  /* anchor at horizontal center */
  width:1920px;
  height:1080px;
  transform-origin: top center;
}
/* ensure no old rule overrides */
#stage{ transform-origin: top center; }

/* Background / transition live in the same stage => hotspots never drift */
.bg,.transition{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;           /* no distortion; black bars OK */
  object-position:center top;   /* center horizontally, lock to top */
  background:#000;
  display:block;
  pointer-events:none;
  user-select:none;
}

/* Video transition fades (0.5s for smoother in/out) */
.transition{
  opacity:0;
  transition:opacity 500ms ease; /* was .2s */
  z-index:5;
}
.transition.is-visible{opacity:1}
.transition.fade-out{opacity:0}

/* Overlays */
.layer{position:absolute; inset:0}
.buttons-layer{z-index:10; pointer-events:auto}
.textbox-layer{z-index:20; pointer-events:none}
.info-box{pointer-events:auto}

/* Fade the UI layers when we hide/show them from JS */
.buttons-layer,
.textbox-layer{
  transition: opacity 300ms ease;
}

/* Hotspots (flags) */
.hotspot{
  position:absolute; transform:translate(-50%,-50%);
  width:var(--hotspot-size); height:var(--hotspot-size);
  padding:0; background:none; border:none; cursor:pointer;
  display:grid; place-items:center; text-align:center;
  transition:transform .16s ease; touch-action:manipulation;
}
.hotspot:hover{ transform:translate(-50%,-50%) scale(1.08); }

/* FLAG ICON IMAGE + SHADOW
   - To make the shadow stronger:
     1) increase blur (3rd number),
     2) increase opacity (last number),
     3) increase vertical offset (2nd number) if you want more lift. */
.hotspot img{
  width:100%; height:100%; object-fit:contain; display:block;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6)); /* stronger shadow */
}

.hotspot[data-hasimg=false]::after{
  content:attr(aria-label); font-size:14px; font-weight:700; line-height:1.1;
  padding:6px 8px; background:rgba(0,0,0,.45); border-radius:8px;
}

/* Text box */
.info-box{
  position:absolute; transform:translate(-50%,-50%);
  max-width:min(40ch,80vw); padding:16px 18px; border-radius:20px;
  background:rgba(29,38,45,.75);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:var(--shadow); color:var(--text-color); font-size:20px; font-weight:400; line-height:1.4;
}

/* Preloader */
.preloader{
  position:fixed; inset:0; background:#000; display:grid; place-items:center; gap:16px; z-index:2000;
}
.spinner{ width:40px; height:40px; border-radius:50%;
  border:4px solid rgba(255,255,255,.2); border-top-color:#fff; animation:spin 1s linear infinite; }
.progress-text{ font-size:16px; opacity:.85; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Optional edit outlines */
.edit-mode .hotspot{ outline:1px dashed rgba(255,255,255,.6); }
.edit-mode .info-box{ outline:1px dashed rgba(255,255,255,.6); }

/* grayscale base while a highlight is active */
.grayscaled #bgImage { filter: grayscale(1); }

/* tint overlay (JS toggles display + mask) */
#fxTint{
  background-color: #00aa13;
  mix-blend-mode: color;
  pointer-events: none;
  /* helpful defaults in case inline style gets cleared */
  mask-mode: luminance;              /* use luminance channel for raster masks */
}

/* Title + body inside the info box */
.info-title{
  font-weight: 700;        /* bold */
  font-size: 24px;         /* slightly larger than body (20px) */
  line-height: 1.2;
  margin-bottom: 6px;
}

.info-body{
  font-weight: 400;        /* current body weight */
  font-size: 20px;         /* current body size */
  line-height: 1.4;
}

/* a little space between sections */
.info-section + .info-section{
  margin-top: 10px;
}