@font-face {
  font-family: "smalle";
  src: url("dreamimages/smalle.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* Reset / page layout */
* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: #e5e5e5e0;
  color: #7f9aca;
  font-family: "smalle", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 19px;
  line-height: 1.6;
  overflow: hidden; /* no page scrollbars */
}

/* Perfect centering of the game block */
.page {
  min-height: 100vh;
  display: grid;
  place-items: center;     /* centers horizontally & vertically */
}

/* Game container: sized to always fit desktop screens.
   - Max width: 1100px (smaller than native 1290 to guarantee fit)
   - Also constrained by viewport: <= 80vw and <= 80vh */
.game-wrap {
  position: relative;
  width: min(80vw, 1100px, calc(90vh * 16 / 9));
  aspect-ratio: 16 / 9;   /* keep correct ratio */
  background: #000;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 0 30px rgba(0,0,0,0.6);
}

/* The iframe renders at native size; we scale it to fit .game-wrap */
.scaled-iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1280px;                 /* native game width */
  height: 720px;                 /* native game height */
  border: 0;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(1); /* centered even before JS scales it */
  pointer-events: none;          /* block interaction until we start */
}

/* Loader overlay */
.loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 12px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  z-index: 9000;
  transition: opacity .2s ease;
}
.loader.hidden { opacity: 0; pointer-events: none; }
.spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #9aa0ff;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text { margin: 0; text-align: center; color: #a7a9b4; }

/* Focus overlay */
.focus-overlay {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(220px, 40vw, 420px);
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-family: "smalle", sans-serif;
  font-size: 20px;
  font: 700 20px/60px inherit;
  letter-spacing: .2px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  z-index: 10000;
  transition: opacity .2s ease, transform .15s ease;
}
.focus-overlay:hover { background: rgba(175, 197, 222, 0.846); transform: translateY(-2px); }
.focus-overlay:active { transform: translateY(0) scale(.99); }
.focus-overlay.hidden { opacity: 0; pointer-events: none; }

/* Fullscreen button: fixed bottom-right */
.controls {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 11000;
}
.btn {
  appearance: none;
  border: 1px solid rgba(107, 108, 173, 0.503);
  background: rgba(156, 157, 199, 0.13);
  color: #201f1e;
  padding: 10px 14px;
  border-radius: 12px;
  font-family: "smalle", sans-serif;
  font-size: 17px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.btn:hover { background: rgba(165, 204, 233, 0.88); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.99); }

/* Accessibility */
.focus-overlay:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(154,160,255,0.65);
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  .loader, .focus-overlay { transition: none; }
}

/* === Left rail (fixed near left edge, aligned vertically to game) === */
.side-rail {
  position: fixed;
  /* sit a little inside the left edge; responsive */
  left: clamp(12px, 3vw, 32px);
  /* vertically around top-third of the viewport */
  top: 12vh;
  display: grid;
  gap: clamp(22px, 5vh, 48px);
  z-index: 12000; /* above the game & bubbles */
  pointer-events: none; /* icons re-enable on themselves */
}

/* Icon buttons */
.icon-btn {
  pointer-events: auto;
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  width: clamp(36px, 3.8vw, 56px);
  height: clamp(36px, 3.8vw, 56px);
  border-radius: 12px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
  cursor: pointer;
  transition: transform .15s ease, filter .2s ease;
}
.icon-btn img { width: 100%; height: 100%; display: block; }
.icon-btn:hover { transform: translateY(-2px); filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(154,160,255,0.65); }

/* Speech bubbles (now positioned next to each icon) */
.speech-bubble {
  position: absolute;            /* was fixed */
  left: calc(100% + 12px);       /* pop out to the right of the icon */
  top: 0;                        /* align to the top of the icon button */
  width: clamp(180px, 18vw, 280px);
  transform-origin: 10% 0%;
  background: #efe9dc;
  color: #1b1b1b;
  border-radius: 18px;
  padding: 16px 18px 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  font-family: "smalle", sans-serif;
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  transform: scale(.96) translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;
  z-index: 13000;
}

/* little tail */
.speech-bubble::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 18px;
  width: 0; height: 0;
  border-right: 10px solid #efe9dc;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  filter: drop-shadow(-2px 2px 2px rgba(0,0,0,.15));
}


/* inner content spacing */
.bubble-inner p {
  margin: 0 0 8px 0;
}
.bubble-inner p:last-child { margin-bottom: 0; }

/* Open state (toggled by JS) */
.speech-bubble.is-open {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* Show bubbles on hover */
.side-rail-tool:hover .speech-bubble {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.side-rail-tool { position: relative; }

/* When a bubble is pinned open, slightly highlight its icon */
.icon-btn[aria-expanded="true"] {
  transform: translateY(-2px) scale(1.02);
}

/* Make sure rail doesn't overlap small screens too much */
@media (max-width: 900px) {
  .side-rail { top: 6vh; }
}