/* ── Font loading ────────────────────────────────────────── */
@font-face {
  font-family: 'NomNaTong';
  src: url('NomNaTong-Regular.ttf') format('truetype');
  font-display: block;
}

@font-face {
  font-family: 'NomNaTongOnly';
  src: url('NomNaTong-Regular.ttf') format('truetype');
  unicode-range: U+3400-4DBF, U+20000-2A6DF, U+2A700-2B73F, U+2B740-2B81F,
                 U+2B820-2CEAF, U+2CEB0-2EBEF, U+30000-3134F, U+31350-323AF;
  font-display: block;
}

/* ── Base ────────────────────────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #060b14;
  font-family: 'NomNaTongOnly', 'Courier New', monospace;
  color: rgba(100,180,255,0.7);
}

/* ── Container is fixed 1920×1080 ─────────────────────────── */
#container {
  position: relative;
  width: 1920px;
  height: 1080px;
}

#c {
  display: block;
  width: 1920px;
  height: 1080px;
}

#label-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  pointer-events: none;
}

/* ── Perimeter border ─────────────────────────────────────── */
#perimeter {
  position: absolute;
  top: 18px;
  left: 18px;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
  border: 0.5px solid rgba(100,180,255,0.2);
  pointer-events: none;
}

/* ── HUD text ─────────────────────────────────────────────── */
#hud-tl, #hud-tr {
  position: absolute;
  font-family: 'NomNaTongOnly', 'Courier New', monospace;
  font-size: 22px;
  color: rgba(100,180,255,0.5);
  pointer-events: none;
}

#hud-tl {
  top: 32px;
  left: 30px;
}

#hud-tr {
  top: 32px;
  right: 30px;
  text-align: right;
}

#hud-tl > div, #hud-tr > div {
  margin-bottom: 8px;
}

/* ── Info window ──────────────────────────────────────────── */
#info-window {
  position: absolute;
  top: 256px;
  left: 256px;
  width: 360px;
  height: 385px;
  background: rgba(6,11,20,0.75);
  border: 0.5px solid rgba(100,180,255,0.2);
  font-family: 'NomNaTongOnly', 'Courier New', monospace;
}

.info-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(100,180,255,0.5);
  pointer-events: none;
}
.info-corner.tl { top: 0;    left: 0;    border-right: none; border-bottom: none; }
.info-corner.tr { top: 0;    right: 0;   border-left:  none; border-bottom: none; }
.info-corner.br { bottom: 0; right: 0;   border-left:  none; border-top:    none; }
.info-corner.bl { bottom: 0; left: 0;    border-right: none; border-top:    none; }

.info-header {
  padding: 20px 20px 8px 20px;
  color: rgba(100,180,255,0.5);
  font-size: 18px;
}

.info-divider {
  margin: 0 8px;
  height: 0;
  border-top: 0.5px solid rgba(100,180,255,0.15);
}

.info-links {
  padding: 20px 20px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.info-links a {
  text-decoration: none;
  color: rgba(100,180,255,0.7);
  display: block;
}

.info-links .label {
  display: block;
  color: rgba(100,180,255,0.35);
  font-size: 14px;
  margin-bottom: 2px;
}

.info-links .url {
  display: block;
  font-size: 16px;
}

.info-links a:hover .url {
  color: rgba(100,180,255,1);
  text-decoration: underline;
}

/* ── Tracking point labels (created by JS) ────────────────── */
.track-point {
  position: absolute;
  pointer-events: none;
  font-family: 'Courier New', monospace;
}

.track-point .label-top {
  font-size: 18px;
  display: block;
}

.track-point .label-sub {
  font-family: 'NomNaTong';
  font-size: 16px;
  display: block;
  opacity: 0.8;
}

/* ── Mobile / portrait layout ─────────────────────────────── */
@media (max-aspect-ratio: 1/1) {
  #info-window {
    top: 800px;          /* moved below flower */
    left: 100px;
    width: 1720px;
    height: 240px;
  }

  .info-links {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .info-links a {
    flex: 0 0 33%;
  }
}