/* --------------------------------------------------
   Game tweaks – complements global core.css
-------------------------------------------------- */
/* ==== Gameplay stage (yellow-zone aware) ==== */

html.scroll-lock,
body.scroll-lock{
  height: 100%;
  overflow: hidden;               /* no scrollbars */
  overscroll-behavior: none;      /* stop Android edge-bounce */
}

body.scroll-lock{
  position: fixed;                /* iOS Safari: really freeze */
  width: 100%;
  left: 0; right: 0;
  top: var(--lock-top, 0);        /* we’ll set this from JS */
}

#gameMain.stage-mode { padding-left: 0; padding-right: 0; }

/* Lock everything inside gameMain during gameplay (no vertical panning) */
#gameMain.stage-mode,
#gameMain.stage-mode .section-box,
#gameMain.stage-mode #gameStage,
#gameMain.stage-mode .stage-viewport{
  overflow: hidden !important;   /* beats .core-main .section-box { overflow:auto } */
  overscroll-behavior: none;     /* Android edge-bounce */
  touch-action: none;            /* prevent touch panning on the stage */
}

.stage-box{
  /* override section-box chrome for max usable area */
  padding:0; 
  border:none; 
  background:transparent; 
  box-shadow:none;
  display:flex; 
  flex-direction:column; 
  min-height:100%; 
  height:100%;
}

.stage-viewport{
  position:relative; 
  width:100%; 
  height:100%;
  display:flex; 
  align-items:center; 
  justify-content:center;
  overflow:hidden;  /* letterboxing when needed */
}

#stageImg{
  display:block; 
  max-width:none; 
  max-height:none; /* sized via JS */
  image-rendering:auto;
}

/* === Ring overlay + test controls (for gameStage) === */
.stage-overlay{
  /* size/position is driven from JS to match the scaled image exactly */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;      /* JS sets px equal to #stageImg */
  height: auto;     /* JS sets px equal to #stageImg */
  pointer-events: none;
}

/* Force the gradient stroke on the test ring (in case any generic stroke rules exist) */
.stage-overlay #ringCover {
  stroke: url(#metalGrad) !important;
}

/* Title displayed at the top of the game stage */
.stage-title{
  position:absolute;
  top: 0.5rem;                 /* sits just under the header edge */
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  max-width: 92vw;             /* avoid overflow on small screens */
  padding: .35rem .75rem;
  color: var(--white);
  font: 700 1.7rem/1.2 "Arial Black", Impact, sans-serif;
  letter-spacing:.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;         /* never blocks taps */
}

.stage-status-img{
  position:absolute;
  top: calc(0.5rem + 4rem);     /* just under the 2rem title */
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  height: 3rem;                 /* keep aspect ratio; tweak if you want bigger */
  width: auto;
  max-width: 92vw;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
  pointer-events:none;
}

/* === Round-banked notice strip === */
#stageNoticeGroup { 
  pointer-events: auto; 
}

/* Ended panel should accept clicks */
#stageEndedGroup { 
  pointer-events: auto; 
}

#stageNoticeGroup .notice-text {
  font-family: system-ui, Segoe UI, Arial, sans-serif;
  font-size: 12px;
  fill: var(--uranian-blue);
}

/* === Stage CTA (clickable inside otherwise non-interactive overlay) === */
#stageCtaGroup { 
  pointer-events: auto; 
}

/* === Stage CTA (clickable inside otherwise non-interactive overlay) === */
#stageCtaGroup { pointer-events: auto; }

#stageCtaGroup .cta-btn,
#stageCtaGroup .cta-btn * {
  outline: none !important;
  box-shadow: none !important;            /* in case a global rule adds one */
  -webkit-tap-highlight-color: transparent;
}

#stageCtaGroup .cta-btn:focus,
#stageCtaGroup .cta-btn:focus-visible,
#stageCtaGroup .cta-btn:active {
  outline: none !important;
  box-shadow: none !important;
}

#stageCtaGroup .cta-btn.cta-disabled { 
  opacity: .45; 
  filter: grayscale(40%); 
  cursor: default; 
}

#stageCtaGroup .cta-note {
  font-family: system-ui, Segoe UI, Arial, sans-serif;
  font-size: 16px;
  fill: #9fd0ff;
  pointer-events: none;
}

/* Players list — align address + icons */
#enrollmentsList li .copy-wrap{
  display:inline-flex;
  align-items:center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  min-width: 12ch;          /* reserve space so the ↗ icon starts at the same x */
}

#enrollmentsList li .copy-wrap .copy-icon{
  margin-left: .35rem;
}

/* fix width for the external-link icon so all rows line up */
#enrollmentsList li .copy-wrap + a{
  display: inline-block;
  width: 1.25rem;
  text-align: center;
}

/* keep the date on one line */
#enrollmentsList li .text-end.small{
  white-space: nowrap;
}

/* All Missions filter popover */
#allFilters { 
  position: relative; 
}

#allFilters .filter-pop {
  position: absolute;
  top: 1rem;
  right: 0;
  z-index: 20;
  background: rgba(8,14,20,.96);
  border: 1px solid rgba(62,211,245,.35);
  border-radius: .5rem;
  padding: .6rem .75rem;
  min-width: 220px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

#allFilters .filter-pop h6{
  font-size: .9rem;
  margin: 0 0 .35rem 0;
}

#allFilters .filter-pop .form-check{
  margin: .2rem 0;
}

#allFilters .filter-actions{
  margin-top: .5rem;
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
}

/* When the game stage is visible, let the stage viewport fill the window
   so the vault image can show under the fixed header and footer. */
#gameMain.stage-mode #stageViewport{
  position: fixed;
  inset: 0;            /* top/right/bottom/left = 0 */
  z-index: 50;         /* under header/footer (100), above body bg (-1) */
}

/* Mobile dynamic viewport height (iOS/Android address bar safe) */
@supports (height: 100dvh){
  #gameMain.stage-mode #stageViewport{ height: 100dvh; }
}

.badge-refunded {
  background: rgba(250, 204, 21, 0.12); /* amber-300 bg tint */
  color: #facc15;                       /* amber-400 text */
}

.badge-refund-pending {
  background: rgba(245, 158, 11, 0.12); /* amber-500 bg tint */
  color: #f59e0b;                       /* amber-500 text */
}

.badge-cancelled {
  background: rgba(156, 163, 175, 0.15);/* gray-400 bg tint */
  color: #9ca3af;                       /* gray-400 text */
}