/*  phpBB3 Style Sheet
    --------------------------------------------------------------
	Style name:			prosilver (the default phpBB 3.3.x style)
	Based on style:
	Original author:	Tom Beddard ( http://www.subblue.com/ )
	Modified by:		phpBB Limited ( https://www.phpbb.com/ )
    --------------------------------------------------------------
*/

@import url("normalize.css?hash=48eb3f89");
@import url("base.css?hash=7c5543be");
@import url("utilities.css?hash=d8f72c42");
@import url("common.css?hash=843d5d5f");
@import url("links.css?hash=18286e16");
@import url("content.css?hash=d0e24377");
@import url("buttons.css?hash=56f0d25f");
@import url("cp.css?hash=50d868ab");
@import url("forms.css?hash=9016b55c");
@import url("icons.css?hash=64da33ce");
@import url("colours.css?hash=fcb2f289");
@import url("responsive.css?hash=c9d32cba");

/* ==============================================================
   Mysterion: wallpaper + overlay (DAY)
   Image: fond_1.png

   Design:
   - Wallpaper on html for stability (no “sinking”)
   - Body stays transparent so html wallpaper remains visible
   - Overlay sits above wallpaper but under the forum (only one number to tweak)
   ============================================================== */

:root{
	/* Only change this number (e.g. 0.50 -> 0.35) */
	--mysterion-overlay: 0.20;
}

/* Put wallpaper on html for maximum stability */
html{
	background-image: url("./images/fond_1.png") !important;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
	background-position: center top !important;
	background-size: cover !important;

	/* Fallback if image is missing */
	background-color: #0b0f14;

	/* Needed so layering is predictable */
	position: relative;
	min-height: 100%;
}

/* Full-page overlay above wallpaper, below forum */
html::before{
	content: "";
	position: fixed;
	inset: 0;

	/* dominant grey overlay */
	background: rgba(128, 128, 128, var(--mysterion-overlay));

	pointer-events: none;

	/* Keep it behind the page content but above the html background */
	z-index: 0;
}

/* Keep body transparent so html background stays visible */
body{
	background: transparent !important;

	/* Put all content above the overlay */
	position: relative;
	z-index: 1;
}

/* Wide screens: lift crop focus up a bit */
@media screen and (min-width: 1400px){
	html{
		background-position: center 6% !important;
	}
}

/* Ultra-wide: lift a bit more */
@media screen and (min-width: 1800px){
	html{
		background-position: center 2% !important;
	}
}

/* ==============================================================
   Mysterion: responsive background policy
   Desktop = perfect background
   Tablet  = keep background, tweak focus, avoid fixed-jank
   Mobile  = forum-only (no wallpaper)
   ============================================================== */

/* Tablet */
@media (max-width: 1024px){
	html{
		background-attachment: scroll !important;
		background-position: center -60px !important; /* tweak: -40 / -80 etc */
	}
}

/* Mobile: forum-only. Wallpaper OFF. */
@media (max-width: 700px){
	html{
		background-image: none !important;
		background-color: #252525;
		background-attachment: scroll !important;
	}

	/* Overlay off as well, to keep mobile clean */
	html::before{
		background: transparent !important;
	}
}

/* Keep forum containers readable */
#wrap{
	background: transparent;
}

/* ==============================================================
   Mysterion: index disclaimer (light blue, subtle, fixed)
   Note: HTML is placed in index_body.html and uses .mysterion-disclaimer
   ============================================================== */

.mysterion-disclaimer{
	position: fixed;
	top: 10px;
	right: 10px;
	max-width: 220px;

	/* light blue with transparency (subtle, not “warning”) */
	background: rgba(210, 230, 255, 0.74);
	color: #2f3e50;

	border: 1px solid rgba(90, 140, 190, 0.22);
	border-radius: 6px;

	padding: 5px 7px;
	font-size: 9.5px;
	line-height: 1.15;

	z-index: 9999;
}

.mysterion-disclaimer-sep{
	padding: 0 3px;
	opacity: 0.65;
}

/* Small screens: keep it usable and avoid covering too much */
@media (max-width: 700px){
	.mysterion-disclaimer{
		top: 8px;
		right: 8px;
		left: 8px;
		max-width: none;
	}
}