/* BRINEHOLD shell. The game itself is drawn into a 480x270 indexed framebuffer
   and blown up with nearest-neighbour scaling. This file only fits the glass. */

:root {
  --abyss: #0A1418;
  --night: #14232A;
  --stone: #2C5250;
  --verdigris: #3E6E63;
  --bone: #9E9A88;
  --bone-light: #E4DFCB;
  --ember: #F0562B;
  --ember-yellow: #FFC24A;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--abyss);
  color: var(--bone-light);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#stage {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

/* Absolute, so the picture never drives the layout and the fit is measured
   against the box it was actually given. */
#stage canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: var(--abyss);
  /* a thin iron frame, square corners, no glow */
  border: 1px solid #241B1A;
  box-shadow: 0 0 0 1px #0A1418;
}

#bootnote {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 12px;
  letter-spacing: 2px;
  color: #3E6E63;
}

/* ---------- touch controls ---------- */

/* A tall screen has dead space above and below a 16:9 picture, so the thumb
   pad takes its own band underneath and never covers the game. A wide screen
   has no dead space, so there the pad floats over the corners instead. */
#touch {
  position: relative;
  flex: 0 0 auto;
  height: clamp(124px, 19vh, 176px);
  pointer-events: none;
  display: none;
}
#touch.hidden { display: none; }

.pad {
  position: absolute;
  bottom: max(8px, env(safe-area-inset-bottom));
  display: grid;
  gap: 6px;
  pointer-events: none;
}

@media (orientation: landscape) {
  #touch:not(.hidden) {
    display: block;
    position: absolute;
    inset: 0;
    height: auto;
  }
  #touch:not(.hidden) .pad { bottom: max(8px, env(safe-area-inset-bottom)); }
}

@media (orientation: portrait) {
  #touch:not(.hidden) { display: block; }
}

/* A phone held upright has far more height than a 16:9 picture can fill, and
   the thumb pad already owns the foot of that column. Centred, the picture
   splits the dead space into two bands and leaves a hand's width of nothing
   between the game and the buttons that play it. Pinned to the foot of the
   stage the two sit together, the controls land where the thumbs already are,
   and every spare pixel is in one band at the top. */
@media (orientation: portrait) {
  #app.padded #stage canvas { top: auto; bottom: 0; transform: translateX(-50%); }
}

.pad-left {
  left: max(10px, env(safe-area-inset-left));
  grid-template-columns: repeat(3, 54px);
  grid-template-rows: 30px 54px;
  align-items: end;
}
.pad-left .ember {
  grid-column: 1 / span 3;
  grid-row: 1;
  height: 30px;
  font-size: 11px;
  border-color: #7A2E2A;
}

.pad-right {
  right: max(10px, env(safe-area-inset-right));
  grid-template-columns: repeat(4, 48px);
  grid-template-rows: repeat(2, 48px);
  align-items: end;
  justify-items: end;
}

.tb {
  pointer-events: auto;
  touch-action: none;
  width: 100%;
  height: 100%;
  min-width: 46px;
  min-height: 46px;
  border-radius: 0;                 /* square corners, always */
  border: 1px solid #5E5C50;
  background: rgba(20, 35, 42, 0.55);
  color: #E4DFCB;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: none;
}
.tb:active, .tb.on {
  background: rgba(196, 39, 31, 0.45);
  border-color: #FFC24A;
  color: #FFF3D0;
}
.tb.big { font-size: 15px; border-color: #8A4E2C; }
.tb.small { font-size: 11px; color: #9E9A88; }

/* the right pad runs row-major: swap, skills, use on top; guard, roll, hit, jump below */
.pad-right { grid-auto-flow: row; }

@media (max-width: 620px) {
  .pad-left { grid-template-columns: repeat(3, 46px); grid-template-rows: 26px 46px; }
  .pad-left .ember { height: 26px; font-size: 10px; }
  .pad-right { grid-template-columns: repeat(4, 42px); grid-template-rows: repeat(2, 42px); }
  .tb { font-size: 11px; min-width: 40px; min-height: 40px; }
  .tb.big { font-size: 13px; }
  .tb.small { font-size: 9px; }
}

@media (max-height: 420px) {
  .pad-left { grid-template-columns: repeat(3, 42px); grid-template-rows: 24px 42px; }
  .pad-left .ember { height: 24px; }
  .pad-right { grid-template-columns: repeat(4, 40px); grid-template-rows: repeat(2, 40px); }
  .tb { min-width: 38px; min-height: 38px; }
}