/* Fullscreen canvas overrides for modern browsers */
/* The bar is rendered at its native pixel size and scaled with transform: scale() */
/* --bar-h is set by JS (app.scaleBar) to the rendered bar height */

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* When game is started, container fills viewport */
.game #container {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0 !important;
}

.game #canvasborder {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  background: none !important;
  position: relative;
}

/* Canvas fills viewport minus scaled bar height */
.game #canvas {
  width: 100% !important;
  height: calc(100vh - var(--bar-h, 51px)) !important;
  top: 0 !important;
  left: 0 !important;
}

.game #canvas canvas {
  width: 100%;
  height: 100%;
}

/* Bar container — kept at native pixel size, scaled by JS transform */
.game #bar-container {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  top: auto !important;
  z-index: 200;
  cursor: default;
  transform-origin: left bottom;
  /* width is set explicitly by JS (scaleBar) to override CSS width:100% */
  /* transform: scale(ratio) is set by JS */
}

/* Bubbles overlay */
.game #bubbles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(100vh - var(--bar-h, 51px));
  pointer-events: none;
  z-index: 150;
}

.game #bubbles .bubble {
  pointer-events: auto;
}

/* Chat box — hidden when inactive, shown above bar when active */
.game #chatbox {
  position: absolute !important;
  bottom: var(--bar-h, 51px) !important;
  z-index: 210;
  display: none !important;
}

.game #chatbox.active {
  display: block !important;
}

/* Chat history log — floats above the input, visible when chatbox is active */
#chatlog {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 160px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.78);
  color: #eee;
  font-family: 'GraphicPixel', sans-serif;
  font-size: 14px;
  padding: 4px 8px;
  display: none;
  box-sizing: border-box;
  border-radius: 4px 4px 0 0;
}

#chatlog p {
  margin: 2px 0;
  line-height: 1.4;
  word-break: break-word;
}

.game #chatbox.active #chatlog {
  display: block;
}

/* Overlay dialogs */
.game #instructions,
.game #achievements {
  position: fixed;
  z-index: 1000;
}

.game #achievement-notification {
  position: fixed;
  z-index: 1100;
}

.game #population {
  position: fixed;
  z-index: 210;
}

/* Hide footer during game */
.game footer {
  display: none;
}