/*
App Name:        BrickGame
App URI:         https://azythegreat.com/
Description:     Palm-era falling blocks, built on jQuery and CSS.
Version:         1.0.0
Author:          AzyTheGreat
Icon Image:      fa-solid fa-gamepad
Icon Color:
Icon BG Color:
Icon BG Image:
Window Title:    BrickGame
Window Class:    brickgame-window
Resizable:       false
Maximizable:     false
Minimizable:     false
Fit To Content:  true
*/

/*--------------------------------------------------------------------------------
	WINDOW SETTINGS
---------------------------------------------------------------------------------*/
/* The desktop reads the manifest above for behaviour; these rules give
   the window its size. The window collapses to the frame below, so the
   9:16 game decides how big the window is. */
.brickgame-window {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  border-radius: 16px;
}
.brickgame-window .window-body {
  height: auto;
  padding: 0;
  overflow: hidden;
  line-height: 0;
  background: #b8b7aa;
}
.brickgame-window .bg-frame {
  /* Fits the tallest space available, then takes its width from 9:16. */
  height: min(760px, calc(var(--app-height, 100dvh) - 140px), calc(100vw * 16 / 9));
  aspect-ratio: 9 / 16;
}
.brickgame-window #bgGame {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
/* Maximized (the desktop does this on mobile): the game scales to the window
   and keeps its 9:16 shape. */
.brickgame-window.is-maximized .window-body {
  height: calc(100% - 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}
.brickgame-window.is-maximized .bg-frame {
  flex: 0 0 auto;
  height: min(100cqh, calc(100cqw * 16 / 9));
}

/*--------------------------------------------------------------------------------
	FONT
---------------------------------------------------------------------------------*/
/* Undo the desktop's global type inside the game, so every element takes the
   game's own fonts, sizes and colours exactly as before. Zero specificity,
   so any rule of the game's still wins. */
:where(#bgGame, #bgGame *) {
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  color: revert;
  vertical-align: revert;
  text-decoration: revert;
  outline: revert;
  -webkit-font-smoothing: revert;
  -moz-osx-font-smoothing: revert;
}

/*--------------------------------------------------------------------------------
	THE GAME
---------------------------------------------------------------------------------*/
#bgGame {
  --case: #b8b7aa;
  --case-hi: #d8d6ca;
  --ink: #3b4231;            /* dark olive grey — stands in for black */
  --line: #555c47;           /* 1px borders */
  --lcd: #9fa981;
  --lcd-hi: #b7c094;
  --lcd-mid: #7f8967;
  --lcd-dark: #3d4630;
  --grid-line: rgba(49, 58, 36, .34);
  /* Desktop: the whole unit is a fixed 9:16 portrait card. */
  --deskW: 480px;            /* desktop width; height follows 9:16 */
  --shellRatio: 0.47;        /* mobile only: case width-to-height */
  --footerH: 0px;
  --barH: clamp(26px, 7.2cqh, 40px);   /* bar height, both bars */
  --barPadX: clamp(7px, 2.4cqw, 14px); /* breathing room inside both bars */
  --topPadY: clamp(5px, 1.2cqh, 8px);  /* TOP BAR ONLY: above and below */
  --btnFont: clamp(9px, 3.2cqw, 15px);
  --circle: calc(var(--btnFont) * 2.1);  /* circle diameter */
  --radius: 16px;                      /* corner rounding of the whole unit */

  position: relative;
  width: 100%;
  margin: 0 auto;
  container-type: size;
  container-name: bggame;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--case);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#bgGame * { box-sizing: border-box; }

/*--------------------------------------------------------------------------------
	LAYOUT: DESKTOP
---------------------------------------------------------------------------------*/
#bgGame.bg-embed {
  width: min(var(--deskW), 100%);
  aspect-ratio: 9 / 16;
  height: auto;
}
#bgGame.bg-full {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  height: min(calc(var(--deskW) / 9 * 16), 94dvh);
  width: auto;
  aspect-ratio: 9 / 16;
}
/* On desktop the case fills the card exactly — no letterboxing. */
#bgShell {
  top: 0; left: 0;
  transform: none;
  width: 100%;
  height: 100%;
}

/*--------------------------------------------------------------------------------
	LAYOUT: MOBILE
---------------------------------------------------------------------------------*/
html.bg-mobile #bgGame.bg-embed {
  width: 100%;
  aspect-ratio: auto;
  height: min(78vh, 760px);
}
html.bg-mobile #bgGame.bg-full {
  position: fixed;
  inset: 0;
  top: 0; left: 0;
  transform: none;
  width: 100%;
  height: 100dvh;
  aspect-ratio: auto;
}
/* Fluid case: keeps its own proportions inside whatever space it gets. */
html.bg-mobile #bgShell {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(100cqw, calc(100cqh * var(--shellRatio)));
  height: min(100cqh, calc(100cqw / var(--shellRatio)));
}

html.bg-standalone, html.bg-standalone body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #b8b7aa;
}

/*--------------------------------------------------------------------------------
	STAGE
---------------------------------------------------------------------------------*/
#bgStage {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: var(--footerH);
  container-type: size;
  container-name: bgstage;
}
/*--------------------------------------------------------------------------------
	DEVICE CASE
---------------------------------------------------------------------------------*/
#bgShell {
  position: absolute;
  container-type: size;
  container-name: bgshell;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(255,255,255,.38), transparent 5%, transparent 94%, rgba(0,0,0,.20)),
    linear-gradient(180deg, var(--case-hi) 0%, var(--case) 9%, #a9a99d 100%);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 2px #d7d5ca, inset 0 0 18px rgba(0,0,0,.18);
}

#bgBrand {
  position: absolute;
  top: 2.4%; left: 7%; right: 7%;
  height: 5.2%;
  display: flex; align-items: baseline; justify-content: space-between;
  color: #5c5d57;
  text-shadow: 0 1px rgba(255,255,255,.78);
  pointer-events: none;
}
#bgBrand .bg-logo {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 8cqw, 40px);
  font-weight: 700;
  letter-spacing: -.06em;
  transform: scaleX(.92);
  transform-origin: left center;
  line-height: 1;
}
#bgBrand .bg-score {
  font: 700 clamp(9px, 3.4cqw, 17px)/1 "Courier New", monospace;
  letter-spacing: .10em;
  color: #4f5049;
}

/*--------------------------------------------------------------------------------
	LCD
---------------------------------------------------------------------------------*/
#bgLcd {
  position: absolute;
  left: 6.5%; right: 6.5%;
  top: 8.4%; bottom: 3.6%;
  min-height: 0;
  background: var(--lcd);
  border: clamp(4px, 1.8cqw, 9px) solid #6b6d63;
  outline: 1px solid var(--line);
  box-shadow:
    inset 0 0 0 1px var(--line),
    inset 0 0 20px rgba(35,42,28,.30),
    0 1px 0 rgba(255,255,255,.70);
  overflow: hidden;
}
#bgLcd::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 40;
  background:
    repeating-linear-gradient(0deg, rgba(20,27,16,.055) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 35%, transparent 0 52%, rgba(31,38,24,.12) 100%);
  mix-blend-mode: multiply;
}

#bgOsBar {
  position: absolute; z-index: 8;
  top: 0; left: 0; right: 0;
  box-sizing: content-box;   /* padding adds to the height instead of eating it */
  height: var(--barH);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--barPadX);
  padding: var(--topPadY) var(--barPadX);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  background: var(--lcd-hi);
  font: 700 clamp(10px, 4.2cqw, 17px)/1 "Courier New", monospace;
  letter-spacing: -.03em;
}
/* Stage counter + progress meter, top left. */
#bgOsBar .bg-stage {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font: 400 clamp(11px, 4.2cqw, 18px)/1 "Courier New", monospace;
  letter-spacing: .06em;
  white-space: nowrap;
}
#bgOsBar .bg-boxes { display: inline-flex; align-items: center; gap: 3px; }
#bgOsBar .bg-box {
  position: relative;
  width: clamp(8px, 2.1cqw, 14px);
  height: clamp(11px, 3.4cqh, 18px);
  border: 1px solid var(--line);
  background: rgba(59,66,49,.08);
  overflow: hidden;
}
#bgOsBar .bg-box i {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  display: block;
  width: 0%;
  background: var(--ink);
  transition: width .25s ease;
}
#bgOsBar .bg-tools { display: inline-flex; align-items: center; gap: .5em; }

/* The original box button, rounded off. Inactive: light face, dark glyph.
   Active: inverted. */
#bgGame #bgHelpBtn,
#bgGame #bgSoundBtn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 1:1 box so the radius makes a true circle. */
  width: var(--circle);
  height: var(--circle);
  aspect-ratio: 1;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 100%;
  background: #aab58a;
  color: var(--ink);
  font: 900 var(--btnFont)/1 "Courier New", monospace;
  -webkit-text-stroke: .4px currentColor;
  text-align: center;
  cursor: pointer;
}
#bgGame #bgHelpBtn.bg-on,
#bgGame #bgSoundBtn.bg-on {
  background: var(--ink);
  color: var(--lcd-hi);
}
#bgGame #bgHelpBtn:active,
#bgGame #bgSoundBtn:active { box-shadow: inset 1px 1px 0 #65704f; transform: translate(1px, 1px); }

#bgViewport {
  position: absolute;
  top: calc(var(--barH) + (var(--topPadY) * 2));
  left: 0; right: 0;
  bottom: var(--barH);
  overflow: hidden;
  background: var(--lcd);
  touch-action: none;
}

#bgStatusBar {
  position: absolute; z-index: 7;
  left: 0; right: 0; bottom: 0;
  height: var(--barH);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--barPadX);
  border-top: 1px solid var(--line);
  background: var(--lcd-hi);
  color: var(--ink);
  font: 700 clamp(8px, 3.2cqw, 13px)/1 "Courier New", monospace;
  pointer-events: none;
}
#bgStatusBar .bg-mark {
  letter-spacing: .10em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .9;
}

/*--------------------------------------------------------------------------------
	PLAYFIELD
---------------------------------------------------------------------------------*/
#bgFieldWrap {
  position: absolute; inset: 0;
  container-type: size;
  container-name: bgfield;
}
/* The grid fills the whole screen area; the column count is worked out in
   JS so the cells come out square, which is what sets the play width. */
#bgBoard {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(20, 1fr);
  border: 0;
  background: var(--lcd);
}
#bgBoard .bg-cell {
  position: relative;
  border-right: 1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
}

#bgBoard .bg-cell.bg-on::before,
#bgBoard .bg-cell.bg-active::before {
  content: "";
  position: absolute; inset: 4%;
  background: var(--blk, #26301c);
  box-shadow:
    inset -1px -1px 0 rgba(0,0,0,.35),
    inset 1px 1px 0 rgba(255,255,255,.12);
}
/* Landing preview: hollow square with an X, pure CSS. */
#bgBoard .bg-cell.bg-ghost::after {
  content: "";
  position: absolute; inset: 8%;
  border: 1px solid var(--lcd-dark);
  opacity: .45;
  background:
    linear-gradient(to top right, transparent calc(50% - .6px), var(--lcd-dark) 50%, transparent calc(50% + .6px)),
    linear-gradient(to bottom right, transparent calc(50% - .6px), var(--lcd-dark) 50%, transparent calc(50% + .6px));
}
#bgBoard .bg-t0 { --blk: #3a4529; } #bgBoard .bg-t1 { --blk: #44502f; }
#bgBoard .bg-t2 { --blk: #4e5b39; } #bgBoard .bg-t3 { --blk: #5b6842; }
#bgBoard .bg-t4 { --blk: #3f4b2c; } #bgBoard .bg-t5 { --blk: #495636; }
#bgBoard .bg-t6 { --blk: #55633d; }

#bgBoard .bg-cell.bg-flash::before { animation: bgCellFlash .22s steps(2, end) 2; }
@keyframes bgCellFlash { 50% { background: var(--lcd-hi); } }

/*--------------------------------------------------------------------------------
	OVERLAYS
---------------------------------------------------------------------------------*/
#bgHelp, #bgGameOver {
  position: absolute; inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5% 6%;
  background: rgba(59,66,49,.34);
  color: var(--ink);
}
#bgGameOver { z-index: 30; }
#bgHelp { z-index: 35; }
#bgHelp.bg-show, #bgGameOver.bg-show { display: flex; }

.bg-panel {
  width: min(96%, 34em);
  max-height: 92%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: .7em;
  padding: 1.1em 1.1em 1.2em;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(183,192,148,.5);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  backdrop-filter: blur(6px) saturate(1.1);
  box-shadow: 0 8px 22px rgba(24,29,18,.34), inset 0 1px 0 rgba(255,255,255,.35);
}
.bg-panel h3 {
  margin: 0;
  font: 700 clamp(12px, 4.4cqw, 21px)/1.1 "Courier New", monospace;
  letter-spacing: .12em;
}
.bg-panel .bg-lede {
  margin: 0;
  font: 400 clamp(8px, 2.9cqw, 13px)/1.45 "Courier New", monospace;
  opacity: .85;
}
.bg-row {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(159,169,129,.42);
  padding: .45em .65em;
}
.bg-row b {
  display: block;
  font: 700 clamp(9px, 3.1cqw, 14px)/1.2 "Courier New", monospace;
  letter-spacing: .04em;
}
.bg-row span {
  display: block;
  font: 400 clamp(8px, 2.8cqw, 12px)/1.35 "Courier New", monospace;
  opacity: .82;
}
#bgGameOver .bg-panel { align-items: center; text-align: center; gap: .9em; }
#bgGameOver .bg-title {
  font: 700 clamp(14px, 5cqw, 24px)/1.2 "Courier New", monospace;
  letter-spacing: .06em;
}

/* The field sits behind the panel, softened. */
#bgFieldWrap.bg-soft { filter: blur(2.5px); opacity: .9; }
#bgGame #bgRestart {
  appearance: none;
  display: inline-block;
  width: auto;
  min-width: 0;
  max-width: 80%;
  align-self: center;
  flex: 0 0 auto;
  margin: 0;
  text-shadow: none;
  text-transform: none;
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: inset -2px -2px 0 var(--lcd-mid), inset 2px 2px 0 var(--lcd-hi);
  background: #aab58a;
  color: var(--ink);
  font: 700 clamp(12px, 3.5cqw, 16px)/1 "Courier New", monospace;
  padding: 7px 14px;
  cursor: pointer;
}
#bgGame #bgRestart:active {
  box-shadow: inset 2px 2px 0 #65704f;
  transform: translate(1px, 1px);
}

/*--------------------------------------------------------------------------------
	PORTRAIT LOCK
---------------------------------------------------------------------------------*/
#bgPortrait {
  position: absolute; inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--ink);
  background: var(--case);
  text-align: center;
  font: 700 clamp(18px, 4cqw, 34px)/1.25 "Courier New", monospace;
}
@media (orientation: landscape) {
  html.bg-mobile #bgGame.bg-full #bgPortrait { display: flex; }
  html.bg-mobile #bgGame.bg-full #bgShell { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  #bgBoard .bg-cell.bg-flash::before { animation: none; }
}