/* ===========================================================
   BRICKVANSTEEN — ARCADE HUB (scoped, cleaned + fixed)
   Save as: /arcade-extra.css
   Include AFTER /style.css (only on the Arcade Hub page)
   =========================================================== */

/* ===========================================================
   Layout (dice-style): footer stays at bottom, no overlap
   + remove the big blank gap under the sticky header
   =========================================================== */
body.arcade-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.page.arcade-page main.page-shell{
  flex: 1 0 auto;
  min-height: 0 !important;

  /* FIX: remove the large white gap below header */
  padding-top: 0 !important;

  /* keep some breathing room at the bottom */
  padding-bottom: 3rem !important;

  overflow: visible !important;
}

body.page.arcade-page main.page-shell > section:first-child{
  margin-top: 0 !important;
}

body.arcade-page .footer{
  margin-top: auto;

  /* make sure footer never floats over content */
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
}

/* ===========================================================
   HERO — movies vibe (red → blue, comic border)
   =========================================================== */
.hero.arcade-hero{
  padding: 64px 0 56px;
  border-bottom: 4px solid var(--comic-border, #111);
  background:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,.18), rgba(255,255,255,0) 36%),
    radial-gradient(circle at 80% 15%, rgba(255,215,0,.22), rgba(255,215,0,0) 42%),
    linear-gradient(90deg, rgba(255,59,59,.98) 0%, rgba(0,168,255,.98) 100%);
  position: relative;
  overflow: hidden;
  margin-top: 0 !important;
}

.hero.arcade-hero::after{
  content:"";
  position:absolute;
  inset:-20px;
  background: repeating-linear-gradient(45deg,
    rgba(0,0,0,.08) 0px,
    rgba(0,0,0,.08) 10px,
    rgba(255,255,255,0) 10px,
    rgba(255,255,255,0) 22px);
  opacity: .18;
  pointer-events:none;
}

.hero.arcade-hero .hero-container{ position: relative; z-index: 1; }

.hero.arcade-hero .kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border: 3px solid var(--comic-border, #111);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hero.arcade-hero .hero-title{
  margin: 14px 0 10px;
  font-family: var(--font-heading);
  text-shadow: 4px 4px 0 var(--comic-border, #111);
  color: #fff;
  letter-spacing: .02em;
}

.hero.arcade-hero .hero-subtitle{
  max-width: 62ch;
  margin: 0 0 16px;
  color: rgba(255,255,255,.95);
  text-shadow: 2px 2px 0 rgba(0,0,0,.35);
}

.arcade-hero-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.arcade-cta{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border: 4px solid var(--comic-border, #111);
  border-radius: 16px;
  background: rgba(255,255,255,.90);
  box-shadow: var(--comic-shadow, 4px 4px 0 #111);
  cursor: pointer;
  font-weight: 1000;
  text-decoration:none;
  color: var(--text, #111);
  transition: transform .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}

.arcade-cta:hover{
  transform: translate(-2px,-2px);
  box-shadow: 8px 8px 0 var(--comic-border, #111);
}

.arcade-cta:active{
  transform: translate(0,0);
  box-shadow: var(--comic-shadow, 4px 4px 0 #111);
}

.arcade-cta--alt{ background: rgba(255,215,0,.92); }

.arcade-meta-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.arcade-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border: 3px solid var(--comic-border, #111);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  font-weight: 900;
}

/* Right visual card */
.arcade-visual-card{
  background: rgba(255,255,255,.78);
  border: 3px solid var(--comic-border, #111);
  border-radius: 18px;
  box-shadow: var(--comic-shadow, 4px 4px 0 #111);
  backdrop-filter: blur(6px);
  padding: 16px 18px;
  max-width: 520px;
}

.av-top{ display:flex; gap: 8px; flex-wrap: wrap; align-items:center; margin-bottom: 10px; }

.av-top .tag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border: 3px solid var(--comic-border, #111);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  font-family: var(--font-accent, var(--font-body));
  font-weight: 900;
  font-size: 12px;
}

.av-screen{
  border: 4px solid var(--comic-border, #111);
  border-radius: 18px;
  box-shadow: var(--comic-shadow, 4px 4px 0 #111);
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,0)) , rgba(255,255,255,.92);
  position: relative;
  overflow: hidden;
  padding: 14px 14px 16px;
  min-height: 180px;
}

.av-screen .scanlines{
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.10) 0px,
    rgba(0,0,0,.10) 1px,
    rgba(255,255,255,0) 2px,
    rgba(255,255,255,0) 6px
  );
  opacity: .20;
  pointer-events:none;
}

.av-screen .pixels{
  position:absolute;
  inset: -10px;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;
  opacity: .18;
  transform: rotate(-6deg);
  pointer-events:none;
}

.av-screen .pixels span{
  border: 3px solid rgba(0,0,0,.25);
  border-radius: 12px;
  background: rgba(255,215,0,.25);
  box-shadow: 2px 2px 0 rgba(0,0,0,.18);
}

.av-text{ position: relative; z-index: 1; }

.av-title{
  font-family: var(--font-heading);
  font-weight: 1000;
  letter-spacing: .08em;
  text-shadow: 2px 2px 0 var(--comic-border, #111);
  color: var(--primary, #ff3b3b);
  margin-bottom: 6px;
}

.av-sub{ opacity:.85; font-weight: 900; margin-bottom: 10px; }

.av-bar{
  height: 14px;
  border: 3px solid var(--comic-border, #111);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  overflow: hidden;
}

.av-fill{
  height:100%;
  width: 0%;
  background: linear-gradient(90deg, var(--secondary, #00a8ff), var(--accent, #ffd700));
  transition: width .35s ease;
}

.av-footer{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

.av-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border: 3px solid var(--comic-border, #111);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  font-weight: 900;
  font-size: 12px;
}

.av-pill--gold{ background: rgba(255,215,0,.26); }

/* ===========================================================
   CONTENT SECTION
   =========================================================== */
.arcade-section{
  padding: 54px 0 70px;
  background: repeating-linear-gradient(45deg,
    rgba(0,0,0,.03), rgba(0,0,0,.03) 14px,
    rgba(255,255,255,.18) 14px, rgba(255,255,255,.18) 28px);
  border-top: 4px solid var(--comic-border, #111);
}

.arcade-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 18px;
  align-items: start;
}

@media (max-width: 980px){
  .arcade-grid{ grid-template-columns: 1fr; }
  .arcade-visual-card{ max-width: unset; }
}

/* Shared card */
.arcade-card{
  background: rgba(255,255,255,.92);
  border: 4px solid var(--comic-border, #111);
  border-radius: 18px;
  box-shadow: var(--comic-shadow, 4px 4px 0 #111);
  overflow: hidden;
  position: relative;
}

.arcade-card::before{
  content:"";
  position:absolute;
  top:-10px; left:-10px; right:-10px;
  height: 6px;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  opacity: .9;
}

.arcade-card__head{
  padding: 14px 16px;
  border-bottom: 4px solid var(--comic-border, #111);
  background: rgba(255,255,255,.95);
}

.arcade-card__head h2{
  margin:0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  text-shadow: 2px 2px 0 var(--comic-border, #111);
  display:flex;
  align-items:center;
  gap: 10px;
}

.arcade-card__sub{ margin-top: 4px; opacity:.8; font-weight: 800; }

.arcade-card__body{ padding: 14px 16px 16px; }

/* ===========================================================
   SOUNDBOARD
   =========================================================== */
.sb-controls{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sb-vol{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
}

.sb-vol input[type="range"]{ width: 170px; }

.sb-stop{
  appearance:none;
  border: 3px solid var(--comic-border, #111);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 1000;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  transition: transform .12s ease;
}

.sb-stop:hover{ transform: translate(-1px,-1px); }

.sb-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 10px;
}

@media (max-width: 520px){
  .sb-grid{ grid-template-columns: 1fr; }
}

.sb-btn{
  appearance:none;
  border: 3px solid var(--comic-border, #111);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  padding: 12px 12px;
  cursor: pointer;
  font-weight: 1000;
  text-align:left;
  display:flex;
  align-items:center;
  gap: 10px;
  transition: transform .12s ease, background .12s ease;
}

.sb-btn:hover{ transform: translate(-1px,-1px); background: rgba(255,215,0,.12); }
.sb-btn:active{ transform: translate(0,0); }

.sb-ico{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 3px solid var(--comic-border, #111);
  background: rgba(255,215,0,.86);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.sb-btn--meme .sb-ico{ background: rgba(255,59,59,.22); }

.sb-hint{
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted, #666);
  line-height: 1.4;
}

.sb-hint code{
  padding: 2px 6px;
  border: 2px solid var(--comic-border, #111);
  border-radius: 8px;
  background: rgba(255,215,0,.18);
  font-weight: 900;
}

/* ===========================================================
   DAILY QUEST
   =========================================================== */
.dq-top{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.dq-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border: 3px solid var(--comic-border, #111);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  font-weight: 900;
}

.dq-pill--gold{ background: rgba(255,215,0,.22); }

.dq-quest{
  border: 3px dashed rgba(0,0,0,.25);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,.70);
}

.dq-kicker{
  font-family: var(--font-accent, var(--font-body));
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: 8px;
}

.dq-title{
  font-family: var(--font-heading);
  font-weight: 1000;
  font-size: 1.2rem;
  text-shadow: 2px 2px 0 var(--comic-border, #111);
  color: var(--primary, #ff3b3b);
  margin-bottom: 6px;
}

.dq-text{ font-weight: 900; line-height: 1.45; margin-bottom: 12px; }

.dq-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

.dq-btn{
  appearance:none;
  border: 3px solid var(--comic-border, #111);
  border-radius: 14px;
  background: rgba(255,215,0,.90);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 1000;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  transition: transform .12s ease;
}

.dq-btn:hover{ transform: translate(-1px,-1px); }
.dq-btn:disabled{ opacity:.55; cursor: not-allowed; transform:none; }

.dq-btn--alt{ background: rgba(255,255,255,.92); }

.dq-btn--ghost{
  background: rgba(255,59,59,.10);
  padding: 10px 12px;
}

.dq-badges{ margin-top: 14px; }

.dq-badges__title{
  font-weight: 1000;
  display:flex;
  align-items:center;
  gap: 8px;
  margin-bottom: 10px;
}

.dq-badges__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 10px;
}

@media (max-width: 520px){
  .dq-badges__grid{ grid-template-columns: 1fr; }
}

.badge-card{
  border: 3px solid var(--comic-border, #111);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  padding: 10px 12px;
  display:flex;
  align-items:flex-start;
  gap: 10px;
}

.badge-ico{
  width: 42px;
  height: 42px;
  border: 3px solid var(--comic-border, #111);
  border-radius: 14px;
  background: rgba(255,255,255,.95);
  box-shadow: 2px 2px 0 var(--comic-border, #111);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  font-size: 18px;
}

.badge-body{ flex: 1; }
.badge-title{ font-weight: 1000; margin: 0 0 4px; }
.badge-desc{ margin: 0; opacity:.75; font-size: 12px; font-weight: 800; }

.badge-card.is-locked{ opacity: .55; filter: grayscale(.20); }
.badge-card.is-earned{ background: rgba(255,215,0,.12); }

.dq-hint{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted, #666);
}

/* ===========================================================
   MODAL (Arcade page only)
   - FIX: close button always visible/clickable
   - FIX: GameLibrary iframe never forces modal to scroll/overflow
   =========================================================== */
body.arcade-page.modal-open{ overflow: hidden; }

body.arcade-page .modal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.62);
  padding: 16px;
}

body.arcade-page .modal.is-open{
  display: flex;
  align-items: center;
  justify-content: center;
}

body.arcade-page .modal-content{
  width: min(1100px, 96vw);
  height: min(88vh, 920px);          /* FIX: hard height so content can't push it */
  max-height: min(88vh, 920px);
  background: rgba(255,255,255,.92);
  border: 4px solid var(--comic-border, #111);
  border-radius: 18px;
  box-shadow: 10px 10px 0 rgba(0,0,0,.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;               /* FIX: anchor the absolute close button */
}

body.arcade-page .modal-header{
  padding: 14px 72px 14px 16px;     /* space for close button */
  border-bottom: 4px solid var(--comic-border, #111);
  background: linear-gradient(90deg, rgba(255,59,59,.98) 0%, rgba(0,168,255,.98) 100%);
  color: #fff;
  position: relative;
  z-index: 1;
}

body.arcade-page .modal-header h2{
  margin:0;
  font-family: var(--font-heading);
  text-shadow: 2px 2px 0 rgba(0,0,0,.35);
}

body.arcade-page .modal-header p{
  margin: 4px 0 0;
  opacity: .95;
  font-weight: 900;
}

body.arcade-page .close-button{
  position: absolute;
  right: calc(12px + env(safe-area-inset-right));
  top: calc(12px + env(safe-area-inset-top));
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 4px solid var(--comic-border, #111);
  background: rgba(255,215,0,.95);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  font-weight: 1000;
  color: #111;
  display: flex !important;         /* FIX: in case global CSS hides it */
  align-items: center;
  justify-content: center;
  z-index: 50;                      /* FIX: above header */
  pointer-events: auto;
}

body.arcade-page .modal-body{
  padding: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0; /* important for flex children */
  background: repeating-linear-gradient(45deg,
    rgba(0,0,0,.03), rgba(0,0,0,.03) 14px,
    rgba(255,255,255,.18) 14px, rgba(255,255,255,.18) 28px);
}

/* --- Game Library modal fit (no parent scroll, iframe fills body) --- */
#gameLibraryModal.modal{
  overflow: hidden;
}

#gameLibraryModal .modal-body{
  overflow: hidden; /* iframe owns its viewport */
}

#gameLibraryModal #gameLibraryFrame,
#gameLibraryModal .game-library-modal iframe{
  width: 100%;
  height: 100%;
  min-height: 0;   /* FIX: do not force overflow */
  border: 0;
  display: block;
  background: transparent;
}

@media (max-width: 720px){
  .hero.arcade-hero{ padding: 56px 0 44px; }
  .hero.arcade-hero .hero-title{ font-size: 2.2rem; }

  body.arcade-page .modal-content{
    height: calc(100vh - 32px);
    max-height: calc(100vh - 32px);
  }
}

/* ===========================================================
   TOASTS
   =========================================================== */
.achievements{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
}

.toast{
  border: 3px solid var(--comic-border, #111);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--comic-border, #111);
  background: rgba(255,255,255,.95);
  padding: 12px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  animation: toastIn 240ms ease-out;
}

.toast .t-ico{
  width: 42px;
  height: 42px;
  border: 3px solid var(--comic-border, #111);
  border-radius: 14px;
  background: rgba(255,255,255,.95);
  box-shadow: 2px 2px 0 var(--comic-border, #111);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 18px;
}

.toast .t-body{ flex: 1; }

.toast .t-title{
  font-weight: 1000;
  margin: 0 0 4px;
  font-family: var(--font-accent, var(--font-body, system-ui));
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.toast .t-msg{ margin: 0; font-weight: 900; }
.toast .t-sub{ margin-top: 6px; opacity: .75; font-size: 12px; font-weight: 800; }

@keyframes toastIn{
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@media (max-width: 720px){
  .achievements{
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: unset;
  }
}