/* ---------------------------------------------------------------------------
   1  ROOT CONSTANTS
-----------------------------------------------------------------------------*/
:root {
  --bp-onecol: 1500px;                /* switch to one column below this width */
  --gap: clamp(8px, 1.2vh, 24px);     /* vertical gap between modules */
}

/* ---------------------------------------------------------------------------
   2  RESET + BODY SHELL
-----------------------------------------------------------------------------*/
* { box-sizing: border-box; margin: 0; padding: 0 }
html, body { height: 100% }

body {
  display: flex; flex-direction: column;
  font: 15px/1.4 system-ui, sans-serif;
  background: #000; color: #fff;
  overflow: hidden;                   /* desktop no page scroll */
}
@media (max-width: var(--bp-onecol)) {
  body { overflow: auto }
}

/* ---------------------------------------------------------------------------
   3  TWO-COLUMN WRAPPER   (#wrap)
-----------------------------------------------------------------------------*/
#wrap {
  flex: 1 1 auto;
  display: flex;                      /* two equal columns */
  /* now uses --bar-h from header.css */
  height: calc(100vh - var(--bar-h));
}
@media (max-width: var(--bp-onecol)) {
  #wrap { display: block; height: auto }
}

/* ---------------------------------------------------------------------------
   4  COLUMN PANELS          (.panel)
-----------------------------------------------------------------------------*/
.panel {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--gap); padding: var(--gap) 0;
  overflow: hidden;
  transform-origin: top center;       /* for JS scale helper */
}
@media (max-width: var(--bp-onecol)) {
  .panel { display: block; overflow: visible }
  .panel + .panel { margin-top: var(--gap) }
}

/* ---------------------------------------------------------------------------
   5  RESIZABLE MODULES       (.module › .arWrap)
-----------------------------------------------------------------------------*/
.module {
  width: 98%; max-width: 98%;
  flex: 0 0 auto;
  min-height: 0;                      /* let panel shrink on ultra-wide screens */
  display: flex; align-items: center; justify-content: center;
}

.arWrap { width: 100%; aspect-ratio: 16/9 } /* default 16:9 — override inline */

.module img,
.module canvas,
.module video {
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

/* ---------------------------------------------------------------------------
   6  OPTIONAL: FLUID TYPE EXAMPLE
-----------------------------------------------------------------------------*/
h1              { font-size: clamp(20px, 2.5vw, 32px) }
h2              { font-size: clamp(18px, 2.2vw, 28px) }
h3, p, td, th   { font-size: clamp(14px, 1.4vw, 22px) }

/* ---------------------------------------------------------------------------
   7  VISUAL DEBUG — thin border around every canvas
-----------------------------------------------------------------------------*/
canvas {
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 4px;
}





/* ---------------------------------------------------------------------------
   HTML MAIN STYLE
-----------------------------------------------------------------------------*/
:root{ --bar-h:clamp(48px,6vh,72px); }      /* header height */

/* reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

/* body */
body{
  display:flex;flex-direction:column;
  font:15px/1.4 system-ui,sans-serif;
  background:#000;color:#fff;
  overflow:hidden;                          /* desktop */
}

/* make sure header always reserves space */
header#mainHeader{height:var(--bar-h);background:#111;}

/* wrapper (two desktop columns) */
#wrap{
  flex:1 1 auto;display:flex;
  height:calc(100vh - var(--bar-h));
}

/* column panels */
.panel{
  flex:1 1 0;
  display:flex;flex-direction:column;align-items:center;
  gap:2vh;padding:2vh 0;overflow:visible;          /* overflow visible = allow scale */
  transform-origin:top center;                     /* scale from centre */
}

/* modules */
.module{
  width:98%;max-width:98%;
  flex:0 0 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
}

/* aspect-ratio wrapper (default 16:9) */
.arWrap{width:100%;aspect-ratio:16/9;}

/* media fills wrapper */
.module img,.module canvas{
  width:100%;height:100%;
  object-fit:contain;
  image-rendering:pixelated;
}

/* mobile stack  */
@media(max-width:1500px){
  body{overflow:auto;}
  #wrap{display:block;height:auto;}

  :root{ --gap:clamp(8px,2vw,24px); }

  .panel{
    width:100%;display:block;
    padding:var(--gap) 0;
    gap:var(--gap);
  }
  .panel+.panel{margin-top:var(--gap);}
  .module{margin:0 auto var(--gap);}
  .module img,.module canvas{height:auto;}
}






/* --------------------------------------------------
   SHARED ACCOUNT & LOGIN UI STYLES
-------------------------------------------------- */

html.auth-checking {
  visibility: hidden;
}


.accountBanner {
  display: block;
  margin: 2vh auto 1vh;
  max-width: 90%;
  max-height: 300px;
  border: 1px solid #333;
  border-radius: 4px;
  object-fit: cover;
}

.accountBox {
  max-width: 640px;
  margin: 2vh auto;
  padding: 32px;
  background: #111;
  border: 1px solid #333;
  border-radius: 6px;
  text-align: center;
  font-family: Arial, sans-serif;
}

.accountBox h2 {
  font-size: clamp(20px, 2.2vw, 32px);
  margin-bottom: 24px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.accountBox p {
  font-size: 16px;
  margin: 12px 0;
}

.accountBox .line {
  margin: 24px auto;
  height: 1px;
  background: #333;
  width: 100%;
}

.accountBox button {
  font: 18px/1.2 Arial, sans-serif;
  padding: 8px 14px;
  margin: 6px 12px;
  border: 2px solid #555;
  background: #000;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
}

.accountBox button:hover:not(:disabled) {
  background: #222;
  border-color: #777;
}

.accountBox button:disabled {
  color: #555;
  cursor: default;
}

.accountBox a {
  display: inline-block;
  margin-top: 16px;
  font-size: 15px;
  color: #1D87F8;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Arial, sans-serif;
}

.accountBox a:hover {
  text-decoration: underline;
}

.status-active { color: #00FFAA; }
.status-inactive { color: #FF4444; }


/* Ensure the promoBox link and its text never look like a default blue link */
.promoBox {
  text-decoration: none !important;  /* no underlines */
  color: inherit !important;         /* inherit your box’s text color */
  display: block;
}

/* Explicitly target headings and paragraphs inside the promoBox */
.promoBox h3,
.promoBox p {
  color: #fff;            /* or whatever your preferred text color is */
  text-decoration: none;  /* no underlines on hover or normal */
}

.promoBox p {
  text-align: justify;
  text-justify: inter-word;
}