/* 16:9 letterbox/pillarbox container */
#app {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--app-width);
  height: var(--app-height);
  overflow: hidden;
  background: #111;
}

/* Gameplay screen: sidebar left, field right */
#gameplay-screen {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  position: relative;
  --sidebar-w: calc(270 * var(--scale));
  /* Tile size: fit 12 cols + gaps into available horizontal space,
     and 10 rows + gaps into available vertical space. Take the smaller. */
  --field-avail-w: calc(var(--app-width) - var(--sidebar-w) - calc(40 * var(--scale))); /* 20 border gap + 10+10 field padding */
  --field-avail-h: calc(var(--app-height) - calc(92 * var(--scale))); /* status bar + footer + top bar + field top/bottom padding */
  --tile-gap: calc(3 * var(--scale));
  --tile-from-w: calc((var(--field-avail-w) - 11 * var(--tile-gap)) / 12);
  --tile-from-h: calc((var(--field-avail-h) - 9  * var(--tile-gap)) / 10);
  --tile-size: min(var(--tile-from-w), var(--tile-from-h), 72px);
}

#sidebar {
  flex: 0 0 var(--sidebar-w);
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(12 * var(--scale)) calc(10 * var(--scale));
  gap: calc(8 * var(--scale));
  overflow-y: hidden;
  overflow-x: visible; /* allow tooltip to extend past the sidebar edge */
  z-index: 10;
  background: rgba(0,0,0,0.45);
  border-right: 1px solid rgba(255,255,255,0.06);
}

#field-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  overflow: hidden;
  position: relative;
  padding: calc(4 * var(--scale)) calc(10 * var(--scale)) calc(32 * var(--scale)) calc(10 * var(--scale)); /* bottom pad for footer */
}

#field-top-bar {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: calc(16 * var(--scale));
  width: 100%;
  padding: calc(2 * var(--scale)) calc(8 * var(--scale)) calc(4 * var(--scale));
  flex-shrink: 0;
}

#sb-op {
  font-size: calc(12 * var(--scale));
  font-weight: bold;
  color: #ffe566;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sb-location {
  font-size: calc(12 * var(--scale));
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#field-wrapper {
  position: relative;
  display: inline-block;
  line-height: 0;
}

#mine-grid {
  display: grid;
  grid-template-columns: repeat(12, var(--tile-size));
  grid-template-rows: repeat(10, var(--tile-size));
  gap: var(--tile-gap);
}

#status-bar {
  width: 100%;
  text-align: center;
  padding: calc(4 * var(--scale)) calc(8 * var(--scale));
  font-size: calc(15 * var(--scale));
  opacity: 0.65;
  min-height: 20px;
  margin-top: calc(6 * var(--scale));
  letter-spacing: 0.5px;
}

#gameplay-footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(3 * var(--scale)) calc(8 * var(--scale));
  font-size: calc(14 * var(--scale));
  opacity: 0.45;
  position: absolute;
  bottom: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
}

#footer-seed,
#sb-dictator {
  cursor: default;
  border-bottom: 1px dotted rgba(255,255,255,0.2);
}

#sb-dictator {
  color: rgba(255,180,60,0.9);
  font-style: italic;
}

#gameplay-footer a {
  color: inherit;
  text-decoration: none;
}

#gameplay-footer a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* ── Sidebar bottom controls: Options button ───────────────────────────── */

#sb-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(4 * var(--scale)) calc(6 * var(--scale));
  opacity: 0.55;
  transition: opacity 0.15s;
}

#sb-controls:hover { opacity: 0.9; }

#footer-options-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  color: inherit;
  font-size: calc(13 * var(--scale));
  font-family: inherit;
  padding: calc(2 * var(--scale)) calc(10 * var(--scale));
  border-radius: 3px;
  cursor: pointer;
  line-height: 1.3;
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
  flex-shrink: 0;
}

#footer-options-btn:hover {
  background: rgba(255,229,102,0.18);
  border-color: rgba(255,229,102,0.5);
}

#footer-options-btn:active { transform: scale(0.96); }