/*	
//	Escaped Escape Rooms
*/

@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/kalam-v18-latin-300.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/kalam-v18-latin-regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/kalam-v18-latin-700.woff2') format('woff2');
  font-display: swap;
}

:root{
    --card:rgba(23,25,29,0.95); 
	--text:#f2f3f5; 
	--muted:#a9afb8; 
	--accent:#3a7afe; 
	--accent-press:#2d5ccd; 
	--border:#262a30;
  }
  
  *{box-sizing:border-box}
  html,body{
	height:100%; 
	margin:0; 
	overflow:hidden; 
	background: var(--bg, #0e0f11) no-repeat center center / cover; 
	color:var(--text); 
	font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif;
	-webkit-tap-highlight-color:transparent; 
	-webkit-touch-callout:none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
	
	  overscroll-behavior-y: contain;
	  touch-action: none;                /* block global scroll */
  }

  .app{
	display:flex;flex-direction:column;height:100dvh;overflow:hidden;
  }

img {
  -webkit-user-drag: none;
  user-drag: none;
}

	.panel-body {
	  position: relative;         /* anchor for pseudo */
	}
	.panel-body::before {
	  content: "";
	  position: absolute;
	  inset: 0;                   /* fill the panel body */
	  background-size: cover;
	  background-position: center;
	  opacity: 0.05;               /* semi-transparent */
	  z-index: 0;                /* sit behind content */
	  pointer-events: none;
	}
	.panel-body > * {
	  position: relative;
	  z-index: 1;
	}

  .topbar{position:sticky;top:0;z-index:1000;background:var(--card);border-bottom:1px solid var(--border)}
  .topbar-grid{display:grid;grid-template-columns:repeat(4,1fr)}
  .nav-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:.5rem;
	padding:.9rem .8rem;
	border:0;
	margin:1px 1px 0px 1px;
	border-radius:10px 10px 0px 0px;
	background:rgba(255,255,255,0.1);
	color:var(--text);
	font-size:1rem;
	font-weight:700;
	cursor:pointer
	}
  .nav-btn.active{background:rgba(255,255,255,0.3);color:#fff;}
  .time-btn{
	  background:transparent;
  }

  .timeBadge {
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: 0.5px;
	position:relative; 
	display:inline-block; 
	overflow:visible;
  }
  .timeBadge.completedTime {
    border-radius:4px;
    padding:0px 6px;
	background:green;
  }
  .timeBadge.remainingTime {
    border-radius:4px;
    padding:0px 6px;
	background:orange;
  }
  

  .hidden{display:none !important;}

  .panels{display:flex;flex-direction:column;gap:.25rem;padding:.25rem;flex:1 1 auto;overflow:hidden}
  .panel{background:var(--card);border:1px solid var(--border);border-radius:14px;min-height:35dvh;flex:1 1 0;overflow:hidden;display:flex;flex-direction:column;position:relative}
  
  .panel-header{
	justify-content: flex-start;
	gap: .5rem;
	padding: 0.2rem 0.9rem;
	border-bottom:1px solid var(--border);
	font-weight:800;
	color:var(--muted);
	letter-spacing:.3px;
	text-transform:uppercase;
	font-size:.8rem;
	display:flex;
	align-items:center;
	background: rgba(0,0,0,0.9);
	z-index: 2;
  }
	.panel-title {
	  flex: 1 1 auto;          /* can grow and shrink */
	  min-width: 0;            /* REQUIRED for text-overflow in flex */
	  padding: 0.5rem 0;       /* trim side padding so it doesn’t push button */
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
	.panel-close {
	  border: 0;
	  background: transparent;
	  color: var(--muted);
	  cursor: pointer;
	  padding: 0.5rem;
	  border-radius: 6px;
	  flex: 0 0 auto;          /* fixed size, no wrapping */
	  white-space: nowrap;     /* avoid button splitting */
	}
	.panel-close:hover {
	  background: #111319;
	  color: var(--text);
	}

	.panel-body{
		position:relative;
		flex:1 1 auto;
		/* overflow:hidden; not for magnifier */
		background:#000;
	  }
	/* Override when a scrollable modula is active */
	.panel-body .letter-panel {
	  height: 100%;
	  overflow-y: auto;
	  -webkit-overflow-scrolling: touch;
	}
	.panel-body .convo-panel {
	  height: 100%;
	  overflow-y: auto;
	  -webkit-overflow-scrolling: touch;
	  touch-action: pan-y;
	}

  .module-root{
	  position:absolute;
	  inset:0;
	  display:flex;
	  flex-direction:column;
	  min-height:100%;
	  min-width:100%;
	  font-size:20px;
  }

  .empty-logo{
	  position:absolute;
	  inset:0;
	  display:grid;
	  place-items:center;
	  text-align:center;
  }
  .empty-logo img{max-width:80%;max-height:60%;opacity:.9}

  .msg{margin:0 0 .7rem 0;line-height:1.4;white-space:pre-wrap}


:root{ --topbar-h: 0px; }

.overlay{
  position:fixed;
  left:0;
  right:0;
  top: var(--topbar-h);
  bottom:0;
  background:var(--card);
  display:none;
  z-index:999;
}

  .overlay.active{display:flex;flex-direction:column}
  .overlay-close{border:0;background:transparent;color:var(--muted);font-size:1.2rem;cursor:pointer}


#hintOverlay { display:none; }
#hintOverlay.active { display:flex; }
.hint-body {
	padding: 1rem;
	text-align: center;
	width: 100%;
	height: 100%;
	font-size: 2rem;
	transform: translateY(25%);
}


.open-bp-btn {
  background:#2563eb;   /* same blue you use */
  color:#fff;
  font-size:1rem;
  font-weight:600;
  border:none;
  border-radius:8px;
  padding:.6rem 1.2rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  margin-top:10%;
}
.open-bp-btn:hover {
  background:#1d4ed8;   /* darker on hover */
}
.open-bp-btn:active {
  transform:translateY(1px);
}

.sepia-filter { filter: sepia(1) !important; }
.grayscale-filter { filter: grayscale(1) !important; }


.std-button {
  bottom: 1rem;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.6rem 1rem;
  margin: 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: background 0.2s ease;
}



/*	IMG CONTEXT MENU PREVENTION	*/
.panel-body img {
  pointer-events: none;   /* makes the touch hit the wrapper, not the image */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}


/*	General	*/
@keyframes warningFadeOut {
  0%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}


/* universal	*/

.black-shadow {
  text-shadow: 0 0 4px black;
}
.white-shadow {
  text-shadow: 0 0 4px black;
}


/*	SPLASH	*/

	.splash {
	  position: fixed;
	  inset: 0;
	  display: none;
	  justify-content: center;
	  align-items: center;
	  background: #000;
	  z-index: 9999;
	}

	.splash img {
	  max-width: 80%;
	  max-height: 80%;
	  border-radius: 20px;
	  border: solid 2px black;
	}
	.splash-enter-btn {
	  position: absolute;
	  padding: 0.8rem 1.5rem;
	  font-size: 1.2rem;
	  left: 50%;
	  bottom: 5%;
	  transform: translateX(-50%);
	  z-index: 1000;
	  background: #2563eb;
	  color: #fff;
	  border: 1px solid white;
	  border-radius: 8px;
	  font-weight: 600;
	  cursor: pointer;
	  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
	}

	.splash-seq{
	  position: absolute;
	  inset: 0;
	  display: none;
	  justify-content: center;
	  align-items: center;
	  text-align: center;
	  padding: 10%;
	  font-size: clamp(30px, 5.5vw, 52px);
	  line-height: 1.3;
	  color: white;
	  text-shadow: 0 2px 6px rgba(0,0,0,0.65);
	  z-index: 2;
	}