body {
	overflow-x: hidden;
}

/* The breakpoint swatch's GEOMETRY lives here, not only in debugLayout.php.
   That file's <style> ships inside the page HTML, so a stale copy of it can be
   served while this stylesheet - linked with ?r=time() - is already fresh, and
   the page then gets the new rules with the old swatch. That is exactly how a
   20x20 in-flow swatch survived the fix and kept an empty row above the menu
   bar. Prefixed with body so it also outranks that inline block, which appears
   later in the document. Colour is still set per breakpoint further down. */
body .debugLayout {
	width: 5px;
	height: 5px;
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
}

.haschatvote{
        background-color: #dfe6b5;
        border-radius: 4px;
        border: 1px solid #cbd494;
        padding: 2px;
        margin: 3px;
}

#div_regentimer {
	font-size: 32px;
	margin-left: 6px;
}

#bar {
	display:inline-block;
}

/*temp till i find a place for any res */
#statsBarWinertia {
	display:none;
}

#debugpanel_flashdebug a {
	font-size: 10px;
	border-radius: 6px;
	padding: 2px;
	color: #ffffff;
	background-color: #b81f1f;
	margin: 3px;
}
#debugpanel_flashdebug a:hover {
	background-color: #c43429;
}
#panel_debugpanel_flashdebug {
	background-color: #d1beae;
	margin: 5px;
	bottom: 56px;
	height: 20px;
	left: 40px;
	position: fixed;
	z-index: 1000;
}
.toggle_debugpanel_flashdebug{
	cursor: pointer;
	font-size: 10px;
	background-color: #c76f3c;
	margin: 1px;
}


#pageContentArea_borderleft {
	background: url(//magicduel.com/templates/layout-/img/border_left.png) repeat-y left top;
    height: 100%;
    width: 100px;
	position: fixed;
}

#pageContentArea_borderright {
	background: url(//magicduel.com/templates/layout-/img/border_right.png) repeat-y right top;
    height: 100%;
    width: 100px;
    margin-left: 100%;
    padding-left: 100px;
    position: fixed;
    z-index: -222;
}

#pageContentArea_borderbottom {
	background: url(//magicduel.com/templates/layout-/img/border_bottom.png) repeat-x center bottom, url(//magicduel.com/templates/layout-/img/bgpag.jpg) repeat-x center bottom 46px;
    width: 100%;
    height: 100%;
	xxbackground-color: tomato;
	float:left;
	position: absolute;
	margin-top:-8px;
	z-index: -400;
}
#pageContentArea_leftcorner {
	background: url(//magicduel.com/templates/layout-/img/border_leftcorner.png) no-repeat left bottom;
    width: 100%;
    height: 100%;
	xxbackground-color: tomato;
	float:left;
	margin-left: -55px;
	margin-top: -3px;
	position: absolute;
	z-index: -400;
}
#pageContentArea_rightcorner {
	background: url(//magicduel.com/templates/layout-/img/border_rightcorner.png) no-repeat right bottom;
    width: calc(100% + 42px);
    height: 100%;
	xxbackground-color: tomato;
	float:right;
	margin-top: -3px;
	position: absolute;
	z-index: -400;
}


#pageContentArea_bordertop {
    background: url(//magicduel.com/templates/layout-/img/border_top.png) repeat-x center top;
    width: 100%;
    /* min-width: 500px; */
    height: 100px;
    /* background-color: yellow; */
    /* float: left; */
    margin-top: -55px;
    position: fixed;
}

#pageContentArea_content {
	float:left;
	xxposition: fixed;
    width: 100%;
    padding-left: 55px;
    padding-top: 55px;
}

#pageContentArea_bottomspacer {
	height: 1280px;
	z-index: -400;
}
#pagecontent {
	box-shadow: none !important;
}
#pageContentArea {
	min-height: 1200px;
}


/* -------------------- */

#questmakerEditSceneButton{
	
	position: fixed;
    top: 65px;
    left: 180px;
    font-size: 12px;
    background-color: #822020;
    line-height: 1;
    height: 20px;
    width: 90px;
    padding: 3px;
    margin: 0px;
    text-align: center;
    border-radius: 5px;
    color: white;
    z-index: 320;
	
}

#questmakerEditSceneButton a{
	color: white;
}


.bg-lemn {
	height: 100%;
    background-image: none;
	background: url("//magicduel.com/templates/layout-/img/pagebg.jpg") no-repeat center center fixed;
	xxbackground-size: cover !important;									
	background-repeat: repeat;
	background-position: left top;	
}

#popupFrame {
	background-color: transparent;
	border-radius: 0px;
	border: none;
	margin: 0px;
	padding: 0px;

	width: 100%;
    height: 100%;

}

/*
#popupMainPage {

    width: 625px;
    margin-left: 0px;
    height: 521px;
	
}
*/
#popupMainPage {
	width: 100%;
	margin: 0px;
	padding: 10px;
	height: 100%;
	position: relative;
	left:0px;
	top:0px;
}	
		
		#barAreaContent{		
										position: fixed; 	
										top: 240px; 
										right: -4px;
										background-color: rgba(235, 233, 221,0.7);
										-webkit-box-shadow: -3px 3px 5px -1px rgba(0,0,0,0.75);
										-moz-box-shadow: -3px 3px 5px -1px rgba(0,0,0,0.75);
										box-shadow: -3px 3px 5px -1px rgba(0,0,0,0.75);
										border-radius:8px;		
										z-index: 2100;
										
		}
		#moodPanelContent { height: 93%; overflow-x: hidden; /* overflow-y: auto; */ overflow-y: hidden; }
		/* The sidebar iframe may never be taller than the box that clips it. Below 1600px
		   footerscripts.js.php sizes #bar to #barAreaContent - 10px while this box is 93% of it,
		   so the bottom 12-35px of every bar page (the item panel's Use button with them) sat
		   hidden under #barAreaContent_btmlinks, in every browser. At 1600px and up nothing changes. */
		#moodPanelContent > #bar { max-height: 100%; }
		/* Below 1600px the pin link of this panel ("unpin" or "pin", y 240 to 259) stands on the top left
		   corner of the sidebar page, and the two clock lines under the Vitale and Winertia bars (y 238 to
		   253, statusBarWinertia.php) lie on the same edge. Every sidebar page began its first row there,
		   at y 248: the link lay on the first letters of "Adventure Log", of the Mood Panel status line and
		   of the Wishpoints notice, and the centred titles began 4px inside the clock lines (bug report
		   5742). The page starts 16px lower, as it does from 1600px (the rule for the progress ring further
		   down), and is 16px shorter, so it ends where it did and no part of it is clipped. */
		@media (min-width: 641px) and (max-width: 1599px) {
			#moodPanelContent > #bar { position: relative; top: 16px; max-height: calc(100% - 16px); }
		}
		#bugreportInterface{	margin: auto; width: 50%;	 bottom:40px; position: fixed;		z-index:650;	}

		#globalNotifications{	margin: auto; width: 50%;			z-index:700;				}


		

		

		#menuGeneral {			position: fixed; top: 8px; 
										left: 15%;
										width: 50%
										max-width: 500px;
										margin: auto;	 z-index:950;	}
		

		#popupMask {
			height: 100%;
			top: 50%;	
			transform: translate(-50%, -50%); 
		}

		#pagecontent { 			
								width: calc(100% + 7px);

										overflow:auto; 
										height: 100%;
										margin: auto;
										xxbackground:transparent;
										margin: 0;
										position: absolute;
										background-image: url(//magicduel.com/templates/layout-/img/bgpag.jpg);
										background-repeat: repeat;
										background-position: left top;	
										-webkit-box-shadow: 0px 0px 23px 24px 0px 0px 23px 24px rgba(237, 235, 223),1;
										-moz-box-shadow: 0px 0px 23px 24px rgba(237, 235, 223,1);
										box-shadow: 0px 0px 23px 24px rgb(237, 235, 223);
										z-index:100;
										
										
		}
		

				
		
		#todaysProgress{		position: fixed; 	top: 200px; right: -35px;	z-index:2300;  width: 78px;		}
		#townCrier{				position: absolute; 	top: 0px; right: 300px;			z-index:400;					}
		#triggersBox{				position: fixed;  
										xxwidth:280px;	
										top: -2px; 
										right: -4px;  
										//background-color: rgba(226, 200, 146, 0.8);	
										background-color: rgba(218, 209, 187, 0.85);	
										-webkit-box-shadow: -3px 3px 5px -1px rgba(0,0,0,0.75);
										-moz-box-shadow: -3px 3px 5px -1px rgba(0,0,0,0.75);
										box-shadow: -3px 3px 5px -1px rgba(0,0,0,0.75);
										z-index:1100;	
										border-radius:8px;
						}			
		#echipAvatar{			position: absolute; 	top: 30px; right: 80px;	 border: 1px solid #ff0000; background-color: green; z-index:380; }
		
		
		



/* ---------------------------- */

#popupMask {
	z-index: 8400;
}
#popupContainer {
	z-index: 9800;
}

#sb_slide_content { 
	padding: 2px;
	height: 40px; /* 320 */
	width:760px; 
	left: 10px;
	xxbackground-color: rgba(66, 56, 26, 0.9);
}

#sb_slide_button {
	width: 800px;
	height: 38px;
	margin-left: -20px;
	cursor:pointer;
	background-image: url(//magicduel.com/templates/layout-/img/barAreaEdge.png);
	background-repeat: no-repeat;
	background-position:bottom center;
	text-align: center;
	
		font-family: 'Caveat', cursive;
	/* font-family: 'Caveat', cursive; */
	font-size:13px;	padding: 5px;
	line-height: 0.95;
	padding-top: 11px;
	
}
#barAreaButtons {
	background-image: url(//magicduel.com/templates/layout-/img/menubar-bg.png);
	background-repeat: repeat-y;
	background-position:top center;
	left: -20px;
    position: relative;
	width:800px;
	padding-left: 20px;
}
#menuinfo_currentlocation {
	text-shadow: 0px 0px 12px #FFAC2E;
	font-weight: bold;
	display: inline-block;
	width: 310px;
}
/* The side readouts (Actions, Heat) stand on the TRANSPARENT part of barAreaEdge.png - only the
   centre title has the drawn parchment tab behind it - so they were body ink on whatever scrolled
   under the fixed bar (2.1-2.7:1 over the bark, in Chrome and Firefox; bug report 4859). A tight
   parchment-light halo behind each glyph lifts the ink off the bark: stacked small blurs make it
   strong without spreading. No box, so nothing shows while they are empty. */
#menuinfo_leftside,
#menuinfo_rightside {
	display: inline-block;
	text-shadow: 0 0 1px #fffaf0, 0 0 2px #fffaf0, 0 0 3px #fff3d6, 0 0 4px #fff3d6, 0 0 6px rgba(255, 236, 190, 0.85);
}
/* THE COMPANION'S HEAT BOOST (2026-10-24, core/Heat/HeatStore.php): while a companion is held the heat value
   burns. A strong ember halo around the number (a pill of light behind it, a box-shadow glow past it) that breathes
   slowly; the span is made once by the tick in footerscripts.js.php, so the breath never restarts. */
#menuinfo_rightside .md-heatboost {
	display: inline-block;
	padding: 0 5px;
	border-radius: 10px;
	color: #6b1f00;
	font-weight: bold;
	background: radial-gradient(ellipse at center, #fff4c8 0%, #ffc24d 55%, #ff8a1a 100%);
	text-shadow: 0 0 2px #fffbe6, 0 0 5px #fff1b8;
	box-shadow: 0 0 6px 2px rgba(255, 205, 90, 1), 0 0 14px 6px rgba(255, 145, 0, 0.95), 0 0 28px 12px rgba(255, 90, 0, 0.75);
	animation: mdHeatBoost 2.6s ease-in-out infinite;
}
@keyframes mdHeatBoost {
	0%, 100% { box-shadow: 0 0 6px 2px rgba(255, 205, 90, 1), 0 0 14px 6px rgba(255, 145, 0, 0.95), 0 0 28px 12px rgba(255, 90, 0, 0.75); }
	50% { box-shadow: 0 0 9px 3px rgba(255, 220, 120, 1), 0 0 22px 10px rgba(255, 150, 0, 1), 0 0 42px 18px rgba(255, 90, 0, 0.85); }
}
@media (prefers-reduced-motion: reduce) {
	#menuinfo_rightside .md-heatboost { animation: none; }
}

#barExpander{
	background-image: url(//magicduel.com/templates/layout-/img/sidebar-moodpanel.png);
	background-repeat: no-repeat;
	background-position:top left;
	width:28px;
	height:280px;
	margin-left: -17px;
	float:left;
	z-index: 3200;
	cursor: pointer;		
}

#barExpanderTriggers{
	background-image: url(//magicduel.com/templates/layout-/img/sidebar-triggers.png);
	background-repeat: no-repeat;
	background-position:bottom left;
	width:28px;
	height:232px;
	float:left;
	margin-left:-17px;
	z-index: 2200;
	position: absolute;	
}


#sceneBeginnerTips{
	max-width: 500px;
}

#serverTime {
	font-family: 'Jost', sans-serif;
    font-size: 12px;
}


/* ------------------------------------------------------------ */


/********************** HEIGHT RESPONSIVE ********************/

@media  (max-height: 520px) {
			#popupContainer {
				top: 1px !important;
				xxzoom: 60%;
			}

}


/********************* WIDTH RESPONSIVENESS ***********************/



/* This page is the full window, sizes on pagecontent are defined in ifrm.styles.css */

/********* ultra low screens with limited functionality ********/
@media  (max-width: 640px) {
			/* The breakpoint colour swatch, for Mur only (layout.php shows it on
			   $_SESSION['debug'] or rightclick). It is 5x5 and position:fixed now, so it
			   costs no layout space and can stay visible at every width - it was briefly
			   display:none here while it was still a 20x20 block sitting in the flow. */
			.debugLayout{ 	background-color: red; }
			body {
				background: #524e40 !important;
				background-color: #524e40;
			}
			#pagecontent {
				/* was 20px, the room the top strip needed. The strip is gone on mobile
				   (see barAreaMobile.php), so the page starts at the top of the screen. */
				margin-top: 0px;
			}
			#pageContentArea{
				width: 100%;
				margin-left: 0px;   
				margin-top: 0px;
				background: url(/templates/layout-default/img/bgpag.jpg) !important;
				/* The desktop floor (min-height 1200, the 1280px spacer, the fireworks #root under
				   everything) made a short page scroll far past its end on a phone: QDoc 290px on a
				   1562px game, 1231px of empty background, and a player coming back from a
				   scrolled-down long page landed IN it (bug report 5292, measured 2026-10-05 at
				   360px). One screen of parchment is the floor here; the page itself sets the rest. */
				min-height: 100vh;
			}
			#pageContentArea_bottomspacer { height: 0; }
			/* templates/effects/bigparty_effect.php: the fireworks canvas sits in the flow BELOW the
			   page, so on a phone it only ever showed in that empty band. */
			#root { height: 0; overflow: hidden; }
			#menuGeneral {
				position: relative; 
				/* was 20px: the bar painted itself one strip down to leave room for the
				   playername / Dev-News / active-days row above it. That row now lives in the
				   mobile panel (barAreaMobile.php), so the menu bar starts at the top of the
				   screen and everything that tracks it came up by the same 20px. */
				top: 0px; 
				left: 0;
				width: 100%;
				max-width: 640px;
				margin: auto;	
				z-index:950;	
				background: url(/templates/layout-default/img/bgpag.jpg) !important;
			}
			#menu-bar {
				display: block !important;
				background: #cab996 !important;
				border: 0px !important;
				border-bottom: 1px solid #181817 !important;
				border-radius: 0px !important;
				-webkit-border-radius: 0px !important;
				height: auto !important;
				padding: 0px !important;
				padding-left: 3px !important;
				padding-top: 5px !important;
				font-size: 10px !important;
				width: 93% !important;
				line-height: 1.2 !important;
				
			}
			#menu-bar li {
				padding: 0px 1px 0px 1px !important;
			}
			#menu-bar a {
				padding: 0px 2px 0px 0px !important;
				font-size: 11px !important;
				margin-bottom: 1px !important;
			}
			#menuGame {
				position: fixed;
				float: left;
				margin-top: 84px;
				margin-left: -90px;
				z-index: 900;
				zoom: 110%;
			}

			#div_leftmenu {
				left: -80px;
			}
			#div_leftmenu a {
				border: 1px solid #2e1c07;
				padding-left: 10px;
				/* Bootstrap's border-box takes this pad and the border out of .unit's 80px, leaving 68px
				   for the text. Jost is loaded at 400 only, so the bold is synthetic and Firefox widens
				   every letter: "Primordials" set at 71.3px and its last "s" sat on the right border
				   (bug report 5405). 88px gives 76px of room (desktop has 78). Phone only. */
				width: 88px;
			}

			#godsOnline {
				position: fixed;
				top: 280px;
				left: -17px;
				z-index: 400;
				zoom: 80%;
			}	
			#gplo {
				background-color: inherit !important;
				box-shadow: none !important;
				-webkit-box-shadow: none !important;
			}
			#questmakerEditSceneButton {
				left: -15px;
				top: 45px
			}
			#townCrier {
				position: relative;
				/* 20 less than it was, exactly like the bar above it, so the gap under the
				   PAINTED menu bar stays the 4px it always was. */
				top: 4px;
				/* left: 76px; */
				z-index: 400;
				width: 100%;
				background-color: #eeece0;
				background: url(/templates/layout-default/img/bgpag.jpg) !important;
				right: auto;
				padding: 4px;
			}
			#townCrier div {
				width: 68% !important;
				padding-left: 55px;
				margin: auto;
			}
			#townCrier br {
				display: none;
			}
			#creditsTotal { display:none; 	}	
			#erolinDevice { 
				position: fixed;
				top: 70%;
				left: 15px;
				z-index: 800;
				zoom: 100%;
			}
			#erolinDevice_orbs { 
				z-index: 210;
			}
			#erolinStore {
				cursor: pointer;
				border: 2px solid #fcba03;
				background-color: rgba(152, 74, 0, 0.7);
				border-radius: 50%;
				display: inline-block;
				font-size: 10px;
				padding: 5px;
				color: #fcba03;
				/* 40, not 25: the 34px bottom bar (#mdmBar, z 2200) took the lower third of the
				   button and opened instead of storing heat (bug report 7394). The z-index was invalid. */
				bottom: 40px;
				left: 5px;
				position: fixed;
			}
			/* Each orb takes a cell that mobileHeatSlots() (erolinDevice.php) measures and writes as inline
			   left/bottom/scale: a grid in the 40px left gutter that skips the compass, the store and the
			   bottom bar (bug report 5400). The old "left: 5px !important" held every orb in one column and only
			   slots 1..20 had a bottom, so slots 21 and up piled up at the top left, under the menu bar. Both
			   states are the same 20px box here, so the grid is even, and a tap's sticky :hover no longer grows one. */
			.erolin_slot {
				z-index: 200  !important;
				position: fixed !important;
				margin: 0 !important;
				width: 20px !important;
				height: 20px !important;
			}
			.erolin_slot_off {
				opacity: 0.5 !important;
			}
			.erolin_slot_on {
				box-shadow: none !important;
				-webkit-box-shadow: none !important;
				opacity: 1 !important;
			}
			/* The timer sits immediately under the menu bar, at the left, and it TRACKS the
			   bar instead of naming a y of its own. It follows #menuGeneral in the source, so
			   in flow it starts exactly where the bar's flow box ends. The bar used to paint
			   20px lower to clear the top strip, so this was 26px; the strip is gone on mobile
			   and the bar paints at its flow position, so 6px leaves the same gap under the
			   painted bar. That holds no matter what happens above it - a menu bar that wraps
			   to two lines on a narrow screen, or a stale debug swatch still taking a 20px row
			   (verified both: gap stays 6px, and the bar can no longer clip the digits).
			   height:0 keeps it out of the vertical flow so it does not push the scene down,
			   and the two children stop floating for the same reason - escaping floats were
			   adding 26px above #pageContentArea. text-align goes to left because inline-block
			   children obey it where floats did not. */
			#nextRegentime {
				position: relative;
				height: 0;
				left: 10px;
				top: 6px;
				font-size: 1em;
				color: #514d40;
				width: 170px;
				text-align: left;
				text-shadow: 1px 1px #444;
				z-index: 500;
				/* Mostly empty box lying over the top of the scene iframe, so let taps through. */
				pointer-events: none;
			}
			#nextRegentime > div {
				float: none;
				display: inline-block;
				vertical-align: top;
			}
			/* Half size on a phone, 2026-09-14. The clock is NOT drawn at the parent's
			   font-size - #div_regentimer carries its own 32px from the unscoped rule at the
			   top of this file, which is why halving #nextRegentime alone changed nothing
			   visible. This overrides that rule for the narrow layout only; desktop keeps 32px.
			   Measured: the digits went from 78x48 to 39x24. .tipNextRegen is deliberately NOT
			   halved - it is already 10px and is the only part of this widget you can tap. */
			#div_regentimer {
				font-size: 16px;
				margin-left: 3px;
			}
			#nextRegentime .tipNextRegen {
				pointer-events: auto;   /* the [?] link takes its own clicks back */
			}
			/* The scene's usable tools. Desktop parks them in a fixed column on the LEFT
			   (left:200px, 100px wide); on a phone that space belongs to the scene, so
			   they move to the RIGHT, where the lower right sidebar used to sit, one per
			   row above the bottom bar.

			   The .avltool styling below is NOT a duplicate of the desktop rules by
			   choice - those live only in the >=1025px blocks, so on a phone this element
			   had no styling at all beyond display:none. These are the phone's own.

			   Scrolling is the touch drag itself: overflow-y with the scrollbar removed in
			   all three engines, so more tools than fit are reached by dragging the column
			   up and down with nothing drawn over them. overscroll-behavior keeps that drag
			   from turning into a page scroll once the end is reached. */
			#availableTools {
				display: block;
				position: fixed;
				right: 2px;
				/* Anchored at the TOP, growing down, so the list starts high and stays put
				   however many tools a scene offers - bottom-anchored it crept up and down
				   with the count. 280px is just under two things: the old sidebar, which
				   declared top:240px (#barAreaContent), and #todaysProgress, which occupies
				   y 200..275 on the same edge. */
				top: 280px;
				bottom: auto;
				left: auto;
				/* 48, not 70: the column reached 72px in, past the 55px the scene is fitted to, and
				   took the taps meant for the scene's right arrows (bug report 7388). The chips are 46. */
				width: 48px;
				max-width: 48px;
				/* 280 above + 50 to clear the 34px bottom bar */
				max-height: calc(100vh - 330px);
				height: auto;
				z-index: 2100;
				overflow-y: auto;
				overflow-x: hidden;
				overscroll-behavior: contain;
				-webkit-overflow-scrolling: touch;
				scrollbar-width: none;        /* Firefox */
				-ms-overflow-style: none;     /* old Edge */
				text-decoration: none;
				font-size: 11px;
			}
			#availableTools::-webkit-scrollbar { width: 0; height: 0; display: none; }
			/* on a phone only the chips take a tap; the column's empty margins let it through to the
			   scene (the desktop rule sets auto on the row: do not align them, bug report 7388) */
			#availableTools { pointer-events: none; }
			#availableTools .avltool a { pointer-events: auto; }
			/* nothing to show is not a reason to reserve a column */
			#availableTools:empty { display: none; }

			#availableTools .disabled { opacity: 0.3; }
			#availableTools .avltool { text-align: center; }
			#availableTools .avltool a {
				display: block;
				color: #eda81b;
				text-decoration: none;
				margin: 8px auto !important;   /* the entries carry margin:10px inline */
				padding: 3px;
				border-radius: 8px;
				background-color: #eeece0;
				text-align: center;
				width: 46px;
			}
			/* A tool with no icon falls back to its NAME, and a name like "Muratus's Herb
			   Basket" was wrapping to three 13px lines in a 46px chip. Smaller and tighter
			   so two lines do it, and long words break rather than push the chip wider. */
			#availableTools .avltool a {
				font-size: 10px;
				line-height: 1.15;
				overflow-wrap: anywhere;
				word-break: break-word;
			}
			#availableTools .avltool a:active { background-color: #f0bb28; }
			#availableTools .avltool img { margin: auto; display: block; width: 40px; height: 40px; }
			#availableTools .avltool .streakbar_hold {
				height: 7px;
				background-color: #a68b5c;
				width: 46px;
				border-radius: 8px;
				margin: 0 auto;
			}
			#availableTools .avltool .streakbar { height: 7px; background-color: #edaf1c; border-radius: 8px; }
			#availableTools .avltool .streaktotal {
				font-size: 9px;
				color: #635e52;
				margin-top: -9px;
				text-align: center;
				width: 100%;
			}
			#wishpointAchievements { display:none; }
			#playerStats { display:none;	}
			#serverTime{	display: none; }
			#statusBarPlayername { 
				position: absolute;
				z-index: 2000;
				top: 2px;
				font-weight: bold;
				margin-left: 80px;
				text-align: left;
				color: #cab996;
				font-size: 11px;
			}
			#statusBarPlayername br {
				display: none;
			}

			#announcementsAlert {
				position: absolute;
				top: 0px;
				right: 65px;
				font-size: 11px;
				background-color: #38342c;
				border-radius: 4px;
				padding-left: 5px;
				padding-right: 5px;
			}
			#announcementsAlert a {
				color: #f07d43;
			}
			.newAnnouncements {
				background-color: #1c120d !important;
				color: #d15213;
			}
			
			#activityBar{	position: fixed; top:1px; left: 1px;	z-index:960;	}
			#notificationsNewAccount { 
				 position: relative;
				 top: 28px;
				 xleft: 280px;
				 margin:auto;
				  margin-bottom: 22px;				 
				 border: 1px solid #ff0000;
				 z-index:1000;
				 width: 80%;
				 xheight: 30px;
				 background-color: #ff000024;
				 color:#ffffff; font-size: 12px;
				 text-shadow: 0px 0px 9px #000000, 0px 0px 9px #000000;
				 padding: 4px; padding-left: 10px;
			}
			#barArea {	
					position: fixed; 
					xmargin-left: -320px;	
					bottom:0px; 
					xleft: 50%; 
					z-index:2200;
					left: 0px;
					right: 0px;
					width: 100%;
			}			
			#pageContentArea_borderright { display: none; }
			#pageContentArea_borderbottom { display: none; }
			#pageContentArea_leftcorner { display: none; }
			#pageContentArea_rightcorner { display: none; }
			#pageContentArea_bordertop { display: none; }
			#pageContentArea_borderleft { display: none; }	
			#pageContentArea_content {
				padding-left: 0px;
				padding-top: 0px;
			}
			#sb_slide_content {
				padding: 0px;
				left: 0px;
				width: 100%;
				height: auto;
				box-sizing: border-box;
			}
			#sb_slide_button {
				color: #e9e7db;
				width: 100%;
				height: 18px;
				margin-left: 0px;
				padding: 0px;
				background-image: none;
				background-color: #2e1d07;
				padding-top: 2px;
			}
			.barAreaIconLink img {
				padding: 3px;
				float: none;
				display: block;
			}
			#barAreaButtons {
				background-image: none;
				background-color: #e8ba59;
				width: 100%;
				left: 0px;
				padding-left: 0px;
				box-sizing: border-box;
			}
			#menuButtons {
				width: 100%;
			}
			#menuButtons .bartext {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				gap: 4px;
				padding: 4px 6px;
			}
			#menuButtons .barAreaIconLink {
				display: inline-flex;
			}
			#liveHelp {
				position: fixed; 
				right: -2px;
				bottom:105px;
				z-index:2200;
				writing-mode: tb-rl;
			}	
			#liveHelp .livehelpbtn {
				padding:6px;
				font-family: 'Jost', sans-serif;
				font-size: 11px;
				letter-spacing: 2px;
			}
			
						#bountyButton {
				position: fixed;
				bottom: 70px; right: 20px;				z-index: 3000;
				width: 42px;
				height: 49px;
			}
			#bountyButton img{
				zoom: 60%;	
			}
		
	
			
}
/* placed after to overwrite */
@media  (max-width: 500px) {
			.debugLayout{ 	background-color: pink; }
	
						#bountyButton {
				position: fixed;
				left: inherit; top: inherit; bottom: 60px; right: 20px;				z-index: 3000;
				width: 42px;
				height: 49px;
			}
			#bountyButton img{
				zoom: 55%;	
			}	
				
}

@media  (min-width: 641px) and (max-width: 1024px) {
			.debugLayout{ background-color: orange; }
			#pageContentArea{
				margin: auto;
				height: 100%;
				position: absolute;
				transform: translate(-50%, 0%); 
				margin-top: 30px;
				margin-bottom: 80px;
				z-index:100;
				width: 100%;
				min-width: 500px; /*500*/
				max-width: 690px; /*510*/
				margin-left: 20px;
				left: 45%; 
			}
			#menuGame {
				position: fixed;
				float: left;
				margin-top: 120px;
				margin-left: 20px;
				z-index: 900;
				zoom: 90%;
			}
			#godsOnline {
				position: fixed;
				top: 150px;
				left: -17px;
				z-index: 400;
			}	
			#creditsTotal { display:none; 	}		
			#erolinDevice {
				position: fixed;
				top: 70%;
				left: 5px;
				z-index: 800;
				zoom: 100%;
			}
			#erolinStore {
				cursor: pointer;
				border: 2px solid #fcba03;
				background-color: rgba(152, 74, 0, 0.7);
				border-radius: 50%;
				display: inline-block;
				font-size: 10px;
				padding: 5px;
				color: #fcba03;
				left: 20px;
				position: fixed;
			}		
			#availableTools {
				display: none;
			}	
			#nextRegentime {
				position: fixed;
				left: 44px;
				top: 60px;
				font-size: 30px;
				color: #e0dcbc;
				width: 170px;
				text-align: center;
				text-shadow: 1px 1px #444;
				z-index: 0;
			}
			#wishpointAchievements { 
			    position: fixed;
				bottom: 35px;
				left: -11px;
				z-index: 10;
				height: 78px;
			}
			#playerStats {
				position: fixed;
				bottom: 230px;
				left: 25px;
				z-index: 450;
				xxbackground-color: red;
				display:none;
			}
			#serverTime{	position: fixed; top: 270px; left: 5px;	z-index:300;	xxbackground-color: red; }
			#statusBarPlayername {
				position: fixed;
				top: 30px;
				left: -20px;
				font-size: 11px;
				font-weight: bold;
				width: 210px;
				text-align: center;
				color: #dedbcf;
				z-index: 320;
			}
			#announcementsAlert {
				position: absolute;
				top:9px;
				right: 65px;
				font-size: 11px;
				background-color: #38342c;
				border-radius: 4px;
				padding-left: 5px;
				padding-right: 5px;
			}
			#announcementsAlert a {
				color: #f07d43;
			}
			.newAnnouncements {
				background-color: #1c120d !important;
				color: #d15213;
			}
			
			#activityBar{	position: fixed; 	top:10px; left: 56px;	z-index:350;	}			
			#notificationsNewAccount { 
				 position: absolute;
				 top: 30px;
				 left: 80px;
				 border: 1px solid #ff0000;
				 z-index:1000;
				 width: 80%;
				 height: 30px;
				 background-color: #ff000024;
				 color:#ffffff; font-size: 12px;
				 text-shadow: 0px 0px 9px #000000, 0px 0px 9px #000000;
				 padding: 4px; padding-left: 10px;
			}
			#barArea {	
					position: fixed; 
					margin-left: -380px;	
					bottom:0px; 
					left: 50%; 
					z-index:2200;  
			}
			#liveHelp {
				position: fixed; 
				right: 30px;
				bottom:10px;
				z-index:1050;
			}
			#townCrier {
				position: relative;
				top: 24px;
				left: 226px;
				z-index: 400;
				width: 400px
				xxbackground-color: #eeece0;
				xxbackground: url(/templates/layout-default/img/bgpag.jpg) !important;
				right: auto;
				padding: 4px;
			}
			#townCrier div {
				width: 68% !important;
				padding-left: 55px;
				margin: auto;
			}
			#townCrier br {
				display: none;
			}	

			
						#bountyButton {
				position: fixed;
				bottom: 70px; right: 20px;				z-index: 3000;
				width: 42px;
				height: 49px;
			}
			#bountyButton img{
				zoom: 60%;	
			}			
			
}

/* 951-1024: the Triggers panel stays open here and covered the Dev | News strip (thread 5003);
   below 951 the panel shuts itself, so the strip keeps its place */
@media (min-width: 951px) and (max-width: 1024px) {
			#announcementsAlert { right: 380px; }
}

@media  (min-width: 1025px) and (max-width: 1152px) {
			.debugLayout{ background-color: yellow; }
			/*#pageContentArea{
				margin: auto;
				height: 100%;
				position: absolute;
				transform: translate(-50%, 0%); 
				margin-top: 30px;
				margin-bottom: 80px;
				z-index:100;
				width: 100%;
				min-width: 780px; 
				max-width: 780px;
				margin-left: 2px;
				left: 50%; 
			}*/
			#pageContentArea{
				margin: auto;
				height: 100%;
				position: absolute;
				transform: translate(-50%, 0%); 
				margin-top: 30px;
				margin-bottom: 80px;
				z-index:100;
				width: 75%;
				min-width: 921px;
				max-width: 1050px;				
				margin-left: 2px;
				left: 51%;
			}
			#menuGame{				
				position: fixed;
				float: left;
				margin-top: 100px;
				margin-left: 20px;
				z-index:900;
			}			
			#godsOnline {
				position: fixed;
				top: 210px;
				left: -17px;
				z-index: 400;
			}			
			#creditsTotal { display:none; 	}		
			#erolinDevice{				
				position: fixed; 
				bottom:200px;
				left: 40px;
				z-index:800;
			}
			#erolinStore {
				cursor: pointer;
				border: 2px solid #fcba03;
				background-color: rgba(152, 74, 0, 0.7);
				border-radius: 50%;
				display: inline-block;
				font-size: 10px;
				padding: 5px;
				color: #fcba03;
			}			
			#nextRegentime {
				position: fixed;
				left: 44px;
				top: 60px;
				font-size: 30px;
				color: #e0dcbc;
				width: 170px;
				text-align: center;
				text-shadow: 1px 1px #444;
				z-index: 0;
			}
			#availableTools {
				position: fixed;
				left: 200px;
				top: 200px;
				text-decoration: none;
				max-width: 100px;
				font-size: 12px;
				width: 100px;
				height: 55vh;
    			overflow: auto;
				z-index: 700;
			}
			#availableTools .disabled {
				opacity: 0.3;
			}
			#availableTools .avltool a {
				display: block;
				color: #eda81b;
    			text-decoration: none;
				margin: 3px;
				padding: 3px;
				border-radius: 8px;
				background-color: #eeece0;
				text-align: center;
				text-shadow: 1px 1px #444;
				border: 1px solid #3d3d3a;
				width: 70px;
				max-height: 60px;
    			line-height: 13px;
				overflow: hidden;
				-webkit-box-shadow: 4px 3px 8px -2px rgba(0,0,0,0.62); 
				box-shadow: 4px 3px 8px -2px rgba(0,0,0,0.62);
			}
			#availableTools .avltool a:hover {
				background-color: #f0bb28;
			}
			#availableTools .avltool img{
				margin: auto;
			}
			#availableTools .avltool .streakbar_hold{
				height: 9px;
				background-color: #a68b5c;
				width: 77px;
    			border-radius: 8px;
			}
			#availableTools .avltool .streakbar{
				height: 9px;
				background-color: #edaf1c;
				border-radius: 8px;
			}
			#availableTools .avltool .streaktotal{
				float: left;
				font-size: 10px;
				color: #635e52;
				margin-top: -11px;
    			text-align: center;
    			width: 100%;
			}

			#wishpointAchievements { 
				position: fixed; 	
				bottom:20px; 
				left: 2px;	
				z-index:10; 
				height: 78px;
			}
			#playerStats {
				position: fixed;
				bottom: 230px;
				left: 25px;
				z-index: 450;
				xxbackground-color: red;
			}			
			#serverTime{				position: fixed; 	top: 310px; left: 16px;	z-index:300;	xxbackground-color: red; }
			#statusBarPlayername {
				position: fixed;
				top: 30px;
				left: -20px;
				font-size: 11px;
				font-weight: bold;
				width: 210px;
				color: #dedbcf;
				text-align: center;
				z-index: 320;
			}			
			#announcementsAlert {
				position: absolute;
				top:9px;
				right: 380px; /* clear of the Triggers panel (thread 5003) */
				font-size: 11px;
				background-color: #38342c;
				border-radius: 4px;
				padding-left: 5px;
				padding-right: 5px;
			}
			#announcementsAlert a {
				color: #f07d43;
			}
			.newAnnouncements {
				background-color: #1c120d !important;
				color: #d15213;
			}
			#activityBar{	position: fixed; 	top:10px; left: 56px;	z-index:350;	}		
			#notificationsNewAccount { 
				 position: absolute;
				 top: 30px;
				 left: 280px;
				 border: 1px solid #ff0000;
				 z-index:1000;
				 width: 50%;
				 height: 30px;
				 background-color: #ff000024;
				 color:#ffffff; font-size: 12px;
				 text-shadow: 0px 0px 9px #000000, 0px 0px 9px #000000;
				 padding: 4px; padding-left: 10px;
			}
			#barArea {
				position: fixed; 
				margin-left: -370px;	
				bottom:0px; 
				left: 55%; 
				z-index:2200;  
			}
			#liveHelp {
				position: fixed; 
				right: 30px;
				bottom:10px;
				z-index:1050;
			}				
			#townCrier {
				position: relative;
				top: 24px;
				left: 226px;
				z-index: 400;
				width: 400px
				xxbackground-color: #eeece0;
				xxbackground: url(/templates/layout-default/img/bgpag.jpg) !important;
				right: auto;
				padding: 4px;
			}
			#townCrier div {
				width: 68% !important;
				padding-left: 55px;
				margin: auto;
			}
			#townCrier br {
				display: none;
			}

						#bountyButton {
				position: fixed;
				bottom: 70px; right: 45px;				z-index: 3000;
				width: 42px;
				height: 49px;
			}
			#bountyButton img{
				zoom: 60%;	
			}
			
			
}

@media (min-width: 1153px) and (max-width: 1280px){ /*   */
/************* Includes resolutions: 1280 ***************/	
			.debugLayout{ background-color: green; }
			#pageContentArea{
				margin: auto;
				height: 100%;
				position: absolute;
				transform: translate(-50%, 0%); 
				margin-top: 30px;
				margin-bottom: 80px;
				z-index:100;
				width: 100%;
				min-width: 781px;
				max-width: 930px;
				margin-left: 2px;
				left: 50%;
			}
			#menuGame{				
				position: fixed;
				float: left;
				margin-top: 100px;
				margin-left: 20px;
				z-index:900;
			}			
			#godsOnline {
				position: fixed;
				top: 210px;
				left: -17px;
				z-index: 400;
			}			
			#creditsTotal { display:none; 	}	
			#erolinDevice{				
				position: fixed; 
				bottom:200px;
				left: 40px;
				z-index:800;
			}
			#erolinStore {
				cursor: pointer;
				border: 2px solid #fcba03;
				background-color: rgba(152, 74, 0, 0.7);
				border-radius: 50%;
				display: inline-block;
				font-size: 10px;
				padding: 5px;
				color: #fcba03;
			}			
			#nextRegentime {
				position: fixed;
				left: 44px;
				top: 60px;
				font-size: 30px;
				color: #e0dcbc;
				width: 170px;
				text-align: center;
				text-shadow: 1px 1px #444;
				z-index: 0;
			}
			#availableTools {
				position: fixed;
				left: 200px;
				top: 200px;
				text-decoration: none;
				max-width: 100px;
				font-size: 12px;
				width: 100px;
				height: 55vh;
    			overflow: auto;
				z-index: 700;
			}
			#availableTools .disabled {
				opacity: 0.3;
			}
			#availableTools .avltool a {
				display: block;
				color: #eda81b;
    			text-decoration: none;
				margin: 3px;
				padding: 3px;
				border-radius: 8px;
				background-color: #eeece0;
				text-align: center;
				text-shadow: 1px 1px #444;
				border: 1px solid #3d3d3a;
				width: 70px;
				max-height: 60px;
    			line-height: 13px;
				overflow: hidden;
				-webkit-box-shadow: 4px 3px 8px -2px rgba(0,0,0,0.62); 
				box-shadow: 4px 3px 8px -2px rgba(0,0,0,0.62);
			}
			#availableTools .avltool a:hover {
				background-color: #f0bb28;
			}
			#availableTools .avltool img{
				margin: auto;
			}
			#availableTools .avltool .streakbar_hold{
				height: 9px;
				background-color: #a68b5c;
				width: 77px;
    			border-radius: 8px;
			}
			#availableTools .avltool .streakbar{
				height: 9px;
				background-color: #edaf1c;
				border-radius: 8px;
			}
			#availableTools .avltool .streaktotal{
				float: left;
				font-size: 10px;
				color: #635e52;
				margin-top: -11px;
    			text-align: center;
   				width: 100%;
			}

			#wishpointAchievements { 
				position: fixed; 	
				bottom:20px; 
				left: 2px;	
				z-index:10;
				height: 78px;
			}
			#playerStats {
				position: fixed;
				bottom: 230px;
				left: 25px;
				z-index: 450;
				xxbackground-color: red;
			}			
			#serverTime{				position: fixed; 	top: 310px; left: 16px;	z-index:300;	xxbackground-color: red; }
			#statusBarPlayername {
				position: fixed;
				top: 30px;
				left: -20px;
				font-size: 11px;
				font-weight: bold;
				width: 210px;
				color: #dedbcf;
				text-align: center;
				z-index: 320;
			}	

			#announcementsAlert {
				position: absolute;

				top: 9px;
				left: 100%;
				margin-left: -500px; /* clear of the Triggers panel and the bounty slot (thread 5003) */
				
				font-size: 11px;
				background-color: #38342c;
				border-radius: 4px;
				padding-left: 5px;
				padding-right: 5px;
			}
			#announcementsAlert a {
				color: #f07d43;
			}
			.newAnnouncements {
				background-color: #1c120d !important;
				color: #d15213;
			}			
			#activityBar{	position: fixed; 	top:10px; left: 56px;	z-index:350;	}
			#notificationsNewAccount { 
				 position: absolute;
				 top: 30px;
				 left: 280px;
				 border: 1px solid #ff0000;
				 z-index:1000;
				 width: 50%;
				 height: 30px;
				 background-color: #ff000024;
				 color:#ffffff; font-size: 12px;
				 text-shadow: 0px 0px 9px #000000, 0px 0px 9px #000000;
				 padding: 4px; padding-left: 10px;
			}
			#barArea {
				position: fixed; 
				margin-left: -370px;	
				bottom:0px; 
				left: 55%; 
				z-index:2200;  
			}
			#liveHelp {
				position: fixed; 
				right: 30px;
				bottom:10px;
				z-index:1050;
			}		
			#townCrier {
				position: relative;
				top: 24px;
				left: 226px;
				z-index: 400;
				width: 400px
				xxbackground-color: #eeece0;
				xxbackground: url(/templates/layout-default/img/bgpag.jpg) !important;
				right: auto;
				padding: 4px;
			}
			#townCrier div {
				width: 68% !important;
				padding-left: 55px;
				margin: auto;
			}
			#townCrier br {
				display: none;
			}		

			
						#bountyButton {
				position: fixed;
				bottom: 60px; left: 54.5%;				z-index: 3000;
				width: 42px;
				height: 49px;
			}
			#bountyButton img{
				zoom: 60%;
			}

}

/* A PINNED right panel from 1025px to 1280px (html.md-panels-pinned, set in pageContentArea.php).
   The two bands above give #pageContentArea 921px or more, centred, and the open panels then
   covered its right 260px: the scene, the talk button and the chat. Here it is anchored left of
   the panels instead. The panels start 327px in from the right edge; the iframe ends 62px right of
   this box (55px left border + 7px), so right: 397px leaves 8px. width 100% - 492px keeps the
   iframe 150px clear of the left column (clock, server time). !important on the three widths
   because restoreCentralWindow() writes the "- - +" choice inline, and here the fit must win.
   The iframe stays out of the frame bands that do not fit (ifrm.style.css.php): up to 1139px it
   is at most 550px, where the scene shrinks to fit; from 1140px it is 640 to 697px, where the
   scene is 624px wide. 571-639px would cut the scene, 781-920px is the stale band. */
@media (min-width: 1025px) and (max-width: 1280px) {
			html.md-panels-pinned #pageContentArea {
				left: auto;
				right: 397px;
				transform: none;
				margin-left: 0;
				width: calc(100% - 492px) !important;
				min-width: 0 !important;
				max-width: 690px !important;
			}
}
@media (min-width: 1025px) and (max-width: 1139px) {
			html.md-panels-pinned #pageContentArea { max-width: 543px !important; }
}

/* The torn right edge of the page stays clear of the right panel column (Influences, the device), which
   starts about 30px in from the window edge (Mur, 2026-10-28, a Xiaomi Pad 7 Pro in landscape: 1164px
   wide). Centred, the 930px box puts the paper's edge 562px right of its centre, 18px from the window
   edge at 1164px. The centre now stops 612px in from the right, which keeps the edge 48px clear: 30px to
   the left at 1164px, less and less up to 1222px, the same as before from there to 1280px. The pinned
   panels rule above sets left: auto and still wins. */
@media (min-width: 1153px) and (max-width: 1280px) {
			#pageContentArea { left: min(50%, calc(100% - 612px)); }
}


@media  (min-width: 1281px) and (max-width: 1440px) {
			.debugLayout{ background-color:cyan; }
			#pageContentArea{
				margin: auto;
				height: 100%;
				position: absolute;
				transform: translate(-50%, 0%); 
				margin-top: 30px;
				margin-bottom: 80px;
				z-index:100;
				width: 70%;
				min-width: 921px;
				max-width: 1050px;				
				margin-left: 2px;
				left: 51%;
			}
			#menuGame{				
				position: fixed;
				float: left;
				margin-top: 100px;
				margin-left: 20px;
				z-index:900;
			}			
			#godsOnline {
				position: fixed;
				top: 165px;
				left: -17px;
				z-index: 400;
			}	
			#creditsTotal {
				position: fixed;
				top: 4px;
				right: 360px; /* clear of the Triggers panel (thread 5003) */
				z-index: 10;
				font-size: 11px;
				background-color: #f7c634;
				padding: 2px;
				border-radius: 5px;
				max-width: 160px;
			}
			#erolinDevice{				
				position: fixed; 
				bottom:200px;
				left: 20px;
				z-index:800;
			}
			#erolinStore {
				cursor: pointer;
				border: 2px solid #fcba03;
				background-color: rgba(152, 74, 0, 0.7);
				border-radius: 50%;
				display: inline-block;
				font-size: 10px;
				padding: 5px;
				color: #fcba03;
			}			
			#nextRegentime {
				position: fixed;
				left: 44px;
				top: 60px;
				font-size: 30px;
				color: #e0dcbc;
				width: 170px;
				text-align: center;
				text-shadow: 1px 1px #444;
				z-index: 0;
			}
			#availableTools {
				position: fixed;
				left: 200px;
				top: 200px;
				text-decoration: none;
				max-width: 100px;
				font-size: 12px;
				width: 100px;
				height: 55vh;
    			overflow: auto;
				z-index: 700;
			}
			#availableTools .disabled {
				opacity: 0.3;
			}
			#availableTools .avltool a {
				display: block;
				color: #eda81b;
    			text-decoration: none;
				margin: 3px;
				padding: 3px;
				border-radius: 8px;
				background-color: #eeece0;
				text-align: center;
				text-shadow: 1px 1px #444;
				border: 1px solid #3d3d3a;
				width: 70px;
				max-height: 60px;
    			line-height: 13px;
				overflow: hidden;
				-webkit-box-shadow: 4px 3px 8px -2px rgba(0,0,0,0.62); 
				box-shadow: 4px 3px 8px -2px rgba(0,0,0,0.62);
			}
			#availableTools .avltool a:hover {
				background-color: #f0bb28;
			}
			#availableTools .avltool img{
				margin: auto;
			}
			#availableTools .avltool .streakbar_hold{
				height: 9px;
				background-color: #a68b5c;
				width: 77px;
    			border-radius: 8px;
			}
			#availableTools .avltool .streakbar{
				height: 9px;
				background-color: #edaf1c;
				border-radius: 8px;
			}
			#availableTools .avltool .streaktotal{
				float: left;
				font-size: 10px;
				color: #635e52;
				margin-top: -11px;
    			text-align: center;
    			width: 100%;
			}

			#wishpointAchievements { 
				position: fixed; 	
				bottom:20px; 
				left: 2px;	
				z-index:10; 
				height: 78px;
			}
			#playerStats {
				position: fixed;
				bottom: 230px;
				left: 25px;
				z-index: 450;
				xxbackground-color: red;
			}		
			#serverTime{				position: fixed; 	top: 310px; left: 16px;	z-index:300;	xxbackground-color: red; }	
			#statusBarPlayername {
				position: fixed;
				top: 30px;
				left: -20px;
				font-size: 11px;
				font-weight: bold;
				width: 210px;
				color: #dedbcf;
				text-align: center;
				z-index: 320;
			}

			#announcementsAlert {
				position: absolute;

				top: 6px;
				left: 100%;
				margin-left: -680px; /* left of the credits pill: it covered News (thread 5003) */
				
				font-size: 11px;
				background-color: #38342c;
				border-radius: 4px;
				padding-left: 5px;
				padding-right: 5px;
			}
			#announcementsAlert a {
				color: #f07d43;
			}
			.newAnnouncements {
				background-color: #1c120d !important;
				color: #d15213;
			}				
			#activityBar{	position: fixed; 	top:10px; left: 56px;	z-index:350;	}
			#notificationsNewAccount { 
				 position: absolute;
				 top: 30px;
				 left: 280px;
				 border: 1px solid #ff0000;
				 z-index:1000;
				 width: 50%;
				 height: 30px;
				 background-color: #ff000024;
				 color:#ffffff; font-size: 12px;
				 text-shadow: 0px 0px 9px #000000, 0px 0px 9px #000000;
				 padding: 4px; padding-left: 10px;
			}	
			#barArea {
				position: fixed; 
				margin-left: -370px;	
				bottom:0px; 
				left: 55%; 
				z-index:2200;  
			}
			#liveHelp {
				position: fixed; 
				right: 30px;
				bottom:10px;
				z-index:1050;
			}
			#townCrier {
				position: relative;
				top: 24px;
				left: 226px;
				z-index: 400;
				width: 400px
				xxbackground-color: #eeece0;
				xxbackground: url(/templates/layout-default/img/bgpag.jpg) !important;
				right: auto;
				padding: 4px;
			}
			#townCrier div {
				width: 68% !important;
				padding-left: 55px;
				margin: auto;
			}
			#townCrier br {
				display: none;
			}			
			
						#bountyButton {
				position: fixed;
				bottom: 29px; left: 175px;				z-index: 3000;
				width: 42px;
				height: 49px;
			}
			#bountyButton img{
				zoom: 60%;	
			}
			
}

@media  (min-width: 1441px) and (max-width: 1599px) {
			.debugLayout{ background-color: blue; }
			#pageContentArea{
				margin: auto;
				height: 100%;
				position: absolute;
				transform: translate(-50%, 0%); 
				margin-top: 30px;
				margin-bottom: 80px;
				z-index:100;
				width: 80%;
				min-width:920px;
				max-width:1050px;
				margin-left: -10px;
				left: 54%;
			}
			#menuGame{				
				position: fixed;
				float: left;
				margin-top: 100px;
				margin-left: 20px;
				z-index:900;
			}			
			#godsOnline {
				position: fixed;
				top: 165px;
				left: -17px;
				z-index: 400;
			}	
			#creditsTotal {
				position: fixed;
				top: 4px;
				right: 360px;
				z-index: 10;
				font-size: 11px;
				background-color: #f7c634;
				padding: 2px;
				border-radius: 5px;
				max-width: 160px;
			}	
			#erolinDevice{				
				position: fixed; 
				bottom:200px;
				left: 40px;
				z-index:800;
			}
			#erolinStore {
				cursor: pointer;
				border: 2px solid #fcba03;
				background-color: rgba(152, 74, 0, 0.7);
				border-radius: 50%;
				display: inline-block;
				font-size: 10px;
				padding: 5px;
				color: #fcba03;
			}						
			#nextRegentime {
				position: fixed;
				left: 44px;
				top: 60px;
				font-size: 30px;
				color: #e0dcbc;
				width: 170px;
				text-align: center;
				text-shadow: 1px 1px #444;
				z-index: 0;
			}
			#availableTools {
				position: fixed;
				left: 200px;
				top: 200px;
				text-decoration: none;
				max-width: 100px;
				font-size: 12px;
				width: 100px;
				height: 55vh;
    			overflow: auto;
				z-index: 700;
			}
			#availableTools .disabled {
				opacity: 0.3;
			}
			#availableTools .avltool a {
				display: block;
				color: #eda81b;
    			text-decoration: none;
				margin: 3px;
				padding: 3px;
				border-radius: 8px;
				background-color: #eeece0;
				text-align: center;
				text-shadow: 1px 1px #444;
				border: 1px solid #3d3d3a;
				width: 70px;
				max-height: 60px;
    			line-height: 13px;
				overflow: hidden;
				-webkit-box-shadow: 4px 3px 8px -2px rgba(0,0,0,0.62); 
				box-shadow: 4px 3px 8px -2px rgba(0,0,0,0.62);
			}
			#availableTools .avltool a:hover {
				background-color: #f0bb28;
			}
			#availableTools .avltool img{
				margin: auto;
			}
			#availableTools .avltool .streakbar_hold{
				height: 9px;
				background-color: #a68b5c;
				width: 77px;
    			border-radius: 8px;
			}
			#availableTools .avltool .streakbar{
				height: 9px;
				background-color: #edaf1c;
				border-radius: 8px;
			}
			#availableTools .avltool .streaktotal{
				float: left;
				font-size: 10px;
				color: #635e52;
				margin-top: -11px;
    			text-align: center;
    			width: 100%;
			}

			#wishpointAchievements { 
				position: fixed; 	
				bottom:20px; 
				left: 2px;	
				z-index:10; 
				height: 78px;
			}
			#playerStats {
				position: fixed;
				bottom: 230px;
				left: 25px;
				z-index: 450;
				xxbackground-color: red;
			}			
			#serverTime{				position: fixed; 	top: 310px; left: 16px;	z-index:300;	xxbackground-color: red; }
			#statusBarPlayername {
				position: fixed;
				top: 30px;
				left: -20px;
				font-size: 11px;
				font-weight: bold;
				width: 210px;
				color: #dedbcf;
				text-align: center;
				z-index: 320;
			}

			#announcementsAlert {
				position: absolute;

				top: 6px;
				left: 100%;
				margin-left: -680px; /* left of the credits pill: it covered News (thread 5003) */
				
				font-size: 11px;
				background-color: #38342c;
				border-radius: 4px;
				padding-left: 5px;
				padding-right: 5px;
			}
			#announcementsAlert a {
				color: #f07d43;
			}
			.newAnnouncements {
				background-color: #1c120d !important;
				color: #d15213;
			}				
			#activityBar{	position: fixed; 	top:10px; left: 56px;	z-index:350;	}
			#notificationsNewAccount { 
				 position: absolute;
				 top: 30px;
				 left: 280px;
				 border: 1px solid #ff0000;
				 z-index:1000;
				 width: 50%;
				 height: 30px;
				 background-color: #ff000024;
				 color:#ffffff; font-size: 12px;
				 text-shadow: 0px 0px 9px #000000, 0px 0px 9px #000000;
				 padding: 4px; padding-left: 10px;
			}	
			#barArea {
				position: fixed; 
				margin-left: -370px;	
				bottom:0px; 
				left: 55%; 
				z-index:2200;  
			}
			#liveHelp {
				position: fixed; 
				right: 30px;
				bottom:10px;
				z-index:1050;
			}	
			#townCrier {
				position: relative;
				top: 24px;
				left: 226px;
				z-index: 400;
				width: 400px
				xxbackground-color: #eeece0;
				xxbackground: url(/templates/layout-default/img/bgpag.jpg) !important;
				right: auto;
				padding: 4px;
			}
			#townCrier div {
				width: 68% !important;
				padding-left: 55px;
				margin: auto;
			}
			#townCrier br {
				display: none;
			}

						#bountyButton {
				position: fixed;
				position: absolute; top: -7px; right: 720px;				z-index: 3000;
				width: 42px;
				height: 49px;
			}
			#bountyButton img{
				zoom: 60%;	
			}
			
}	


		 
@media (min-width: 1600px) {
			.debugLayout{ background-color: gray; }
			#panel_debugpanel_flashdebug {
				left: 40px;
				bottom: 110px;
			}
			#barExpanderTriggers {
				display: none;
			}
			#todaysProgress {
				right: 171.5px;
				top: 235px;
			}
			#barbox { 
				padding: 20px;
				width: 100%;
			}
			#triggersBox {
				right: 20px;
				width: 380px;
				top: 28px;
			}
			#barExpander {
				display: none;
			}
			#bar {
				padding: 20px;
				width: 100%;
			}
			/* #todaysProgress (75px at top 235) is the centrepiece of the stats strip and reaches 16px
			   into this panel (top 294), over the centred page titles: its ring hid the top of "Mood
			   Panel", "Public Logs", "Research and Connections" and eight more (bug report 5497). The
			   page starts 16px lower instead; relative, so nothing else moves, and 4px of the 20px the
			   frame keeps below it stay free, so no part of the page is clipped. */
			#moodPanelContent > #bar {
				position: relative;
				top: 16px;
			}
			#barAreaContent {
				right: 20px;
				width: 380px;
				top: 294px;
			}
			#barArea {
				position: fixed; 
				margin-left: -332px;	
				bottom:0px; 
				left: 41%; 
				z-index:2200;  
			}			
			#pageContentArea{
				margin: auto;
				height: 100%;
				position: absolute;
				transform: translate(-50%, 0%); 
				margin-top: 30px;
				margin-bottom: 80px;
				z-index:100;
				width: 100%;
				min-width:920px;
				max-width:1050px;
				margin-left: 10px;
				left: 41%;
			}
			#menuGame{				
				position: fixed;
				float: left;
				margin-top: 100px;
				margin-left: 20px;
				z-index:900;
				zoom: 120%;
			}			
			#godsOnline {
				position: fixed;
				top: 165px;
				left: -17px;
				z-index: 400;
			}	
			#creditsTotal {
				position: fixed;
				top: 4px;
				right: 410px;
				z-index: 10;
				font-size: 11px;
				background-color: #f7c634;
				padding: 2px;
				border-radius: 5px;
				max-width: 160px;
			}
			#erolinDevice{				
				position: fixed; 
				bottom:350px;
				left: 40px;
				z-index:800;
			}
			#erolinStore {
				cursor: pointer;
				border: 2px solid #fcba03;
				background-color: rgba(152, 74, 0, 0.7);
				border-radius: 50%;
				display: inline-block;
				font-size: 10px;
				padding: 5px;
				color: #fcba03;
			}						
			#nextRegentime {
				position: fixed;
				left: 44px;
				top: 60px;
				font-size: 30px;
				color: #e0dcbc;
				width: 170px;
				text-align: center;
				z-index: 0;
				text-shadow: 1px 1px #444;
			}
			#availableTools {
				position: fixed;
				left: 200px;
				top: 200px;
				text-decoration: none;
				max-width: 100px;
				font-size: 12px;
				width: 100px;
				height: 55vh;
    			overflow: auto;
				z-index: 700;
			}
			#availableTools .disabled {
				opacity: 0.3;
			}
			#availableTools .avltool a {
				display: block;
				color: #eda81b;
    			text-decoration: none;
				margin: 3px;
				padding: 3px;
				border-radius: 8px;
				background-color: #eeece0;
				text-align: center;
				text-shadow: 1px 1px #444;
				border: 1px solid #3d3d3a;
				width: 70px;
				max-height: 60px;
    			line-height: 13px;
				overflow: hidden;
				-webkit-box-shadow: 4px 3px 8px -2px rgba(0,0,0,0.62); 
				box-shadow: 4px 3px 8px -2px rgba(0,0,0,0.62);
			}
			#availableTools .avltool a:hover {
				background-color: #f0bb28;
			}
			#availableTools .avltool img{
				margin: auto;
			}
			#availableTools .avltool .streakbar_hold{
				height: 9px;
				background-color: #a68b5c;
				width: 77px;
    			border-radius: 8px;
			}
			#availableTools .avltool .streakbar{
				height: 9px;
				background-color: #edaf1c;
				border-radius: 8px;
			}
			#availableTools .avltool .streaktotal{
				float: left;
				font-size: 10px;
				color: #635e52;
				margin-top: -11px;
   				text-align: center;
   				width: 100%;
			}

			#wishpointAchievements { 
				position: fixed; 	
				bottom:20px; 
				left: 2px;	
				z-index:10; 
				height: 78px;
			}
			#playerStats {
				position: fixed;
				bottom: 230px;
				left: 25px;
				z-index: 450;
				xxbackground-color: red;
			}		
			#serverTime{				position: fixed; 	top: 310px; left: 16px;	z-index:300;	xxbackground-color: red; }	
			#statusBarPlayername {
				position: fixed;
				top: 30px;
				left: -15px;
				font-size: 11px;
				font-weight: bold;
				width: 210px;
				color: #dedbcf;
				text-align: center;
				z-index: 320;
			}	

			#announcementsAlert {
				position: absolute;

				top: 6px;
				left: 100%; 
				margin-left: -760px; /* left of the credits pill and the bounty slot (thread 5003) */
				
				font-size: 11px;
				background-color: #38342c;
				border-radius: 4px;
				padding-left: 5px;
				padding-right: 5px;
			}
			#announcementsAlert a {
				color: #f07d43;
			}
			.newAnnouncements {
				background-color: #1c120d !important;
				color: #d15213;
			}		
			
			#activityBar{	position: fixed; 	top:10px; left: 56px;	z-index:350;	}
			#notificationsNewAccount { 
				 position: absolute;
				 top: 30px;
				 left: 280px;
				 border: 1px solid #ff0000;
				 z-index:1000;
				 width: 50%;
				 height: 30px;
				 background-color: #ff000024;
				 color:#ffffff; font-size: 12px;
				 text-shadow: 0px 0px 9px #000000, 0px 0px 9px #000000;
				 padding: 4px; padding-left: 10px;
			}	

			#liveHelp {
				position: fixed; 
				right: 30px;
				bottom:10px;
				z-index:1050;
			}	
			#townCrier {
				position: relative;
				top: 24px;
				left: 226px;
				z-index: 400;
				width: 400px
				xxbackground-color: #eeece0;
				xxbackground: url(/templates/layout-default/img/bgpag.jpg) !important;
				right: auto;
				padding: 4px;
			}
			#townCrier div {
				width: 68% !important;
				padding-left: 55px;
				margin: auto;
			}
			#townCrier br {
				display: none;
			}	

						#bountyButton {
				position: fixed;
				bottom: 60px; left: 42.5%;				z-index: 3000;
				width: 42px;
				height: 49px;
			}
			#bountyButton img{
				zoom: 60%;	
			}			
}


/* =========================================================================
   GAME MENU STACKING - every width, not just the phone.
   The radial menu must draw ABOVE the header strip (#menuGeneral z 950,
   #menu-bar z 999), or the topmost entry of the spread is hidden behind it.
   Each of the seven breakpoint blocks above sets z-index: 900; this single
   line outranks them all by order, so the value lives in ONE place instead of
   seven. If a breakpoint ever genuinely needs different stacking, set it there
   and delete this - but then it has to be set in all of them again.
   The seal itself sits well below the header and never reaches it, so the only
   thing this raises is the open menu.
   ========================================================================= */
#menuGame { z-index: 1000; }

/* Shut state, every width. The menu opens on :hover; clicking an entry closes it, which
   on a phone matters because a tap IS hover and sticks, and on desktop simply gets the
   menu out of the way of the page you just asked for. menuGame.php adds the class and
   clears it on mouseleave (desktop) or a fresh touch of the seal (phone). */
#menuGame.mdm-shut .icon .menu {
	transform: scale(0) !important;
	transition-delay: 0s !important;
}
#menuGame.mdm-shut .icon .menu .spread {
	opacity: 0 !important;
	transition-delay: 0s !important;
}

/* =========================================================================
   TOWN CRIER WORDS, every width above the phone (bug report 5278, 2026-10-05).
   Above 640px the crier stands on the bark strip over the scene, its parchment
   background switched off (the xxbackground lines in every breakpoint block),
   and townCrier.php writes its words #333 INLINE: measured 2.3:1 against the
   bark at every desktop width, unreadable at 9px. Light words with a dark halo
   read on bark and on parchment alike; !important because the colour is inline.
   The phone keeps its parchment strip and the #333 words (max-width: 640px).
   ========================================================================= */
@media (min-width: 641px) {
	#townCrier div { color: #f1e7cf !important; text-shadow: 0 0 2px #000, 0 1px 2px #000; }
	#townCrier a { color: #ffd77a; }
}

/* =========================================================================
   TOWN CRIER BOX, every width above the phone (bug report 5820, 2026-10-11).
   The crier is a panel of design mode now (class DraggableDiv), so its box has
   to be the words and no more. Until now it was a whole row: as wide as the
   window, starting at left 226px (the "width: 400px" of every band has no
   semicolon, so the browser drops it), with the words centred in it by a 68%
   inner box and 55px of padding. That row lies over the top of the page at
   z-index 400, so as a panel it would be one dashed box across the window that
   takes every press there. Same words in the same place, by arithmetic and
   measured at 1100, 1366, 1600 and 1920: words began at 283.7px + 16% of the
   row; the box now starts 4px (its padding) before that.
   ========================================================================= */
@media (min-width: 641px) {
	#townCrier { left: calc(279.7px + 16%); width: max-content; max-width: calc(68% - 52px); }
	#townCrier div { width: auto !important; padding-left: 0; margin: 0; }
}

/* The regen counter's box is its digits and its [?], no more (bug report 6158, 2026-10-17): the 170px of
   every band left about 78px of empty box right of the floated digits, which design mode outlined and
   which stopped against the window edge first. padding-right: .tipNextRegen's left:4px is a relative
   shift that max-content does not count. The phone layout keeps its own rule. */
@media (min-width: 641px) {
	#nextRegentime { width: max-content; padding-right: 4px; }
}

/* The regen counter (with its [?]) and the wishpoints and achievements panel lie over the page, not under
   it (Mur, 2026-10-28). Their bands gave them z-index 0 and 10, under #pageContentArea's 100, so from about
   1280px down the page's left border covered the [?] and the left wishpoint columns and took their taps.
   310 keeps the counter under the player name (320). */
@media (min-width: 641px) {
	#nextRegentime { z-index: 310; }
	#wishpointAchievements { z-index: 450; }
}

/* The scene's tools column (left 200px, 100px wide, from 1025px up) lies over the scene frame, and the
   scene's player list under it: measured at 1200px the column covers the first 68px of the names, at
   1700px their first 23px (bug report 6738, 2026-10-19). Its box was 55vh tall whatever it held, so with
   one tool, or none, an invisible box took every press on the names beneath (Mallos, Nep, Else at the
   Gazebo answered to the column, not the scene). The box is now as tall as its chips and takes no press
   of its own: only a chip does, and a press between or beside the chips reaches the page. Design mode
   gives the box its presses back so it can still be moved (footerscripts.js.php). The phone column
   (640px and less) keeps its own rules. */
@media (min-width: 1025px) {
	#availableTools { height: auto; max-height: 55vh; pointer-events: none; }
	#availableTools .avltool { pointer-events: auto; }
}

/* The tools column from 1025px to 1280px wide (Mur, 2026-10-28, a tablet in landscape at 1164px): at left 200px
   with 70px chips it lay over the scene's player list and chat. It now stands at the window's left edge, on the
   torn border of the page: chips of 40px (32px pictures) at x 96..136, right of the lit heat orbs (x 10..30) and of
   the Store button (x 53..87), left of the scene frame (x 144 at 1164px, further right from there up). It starts
   under the game menu (y 220) and stops above the wishpoints panel (98px from the bottom); more tools scroll in
   the column, with no scrollbar drawn. 56px wide so the streak glow around a chip is not cut. The entries carry
   margin: 10px inline, hence the !important. Tamed orbs measure this column and step around it (erolinDevice.php). */
@media (min-width: 1025px) and (max-width: 1280px) {
	#availableTools { left: 88px; top: 232px; width: 56px; max-width: 56px; max-height: calc(100vh - 336px);
	                  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
	#availableTools::-webkit-scrollbar { width: 0; height: 0; display: none; }
	#availableTools .avltool a { width: 40px; max-height: 40px; margin: 8px auto !important; padding: 3px; border-radius: 6px;
	                             font-size: 9px; line-height: 1.1; overflow: hidden; overflow-wrap: anywhere; word-break: break-word; }
	#availableTools .avltool img { width: 32px; height: 32px; }
}

/* Below 1600px the bottom bar reaches under the right side panel: 800px wide from left 55%, so at 1515px
   the two share x 1188 to 1263, and with the item strip open (240px tall) also y 578 to 800. The bar stood
   above the panel: the left end of the panel's last rows lay under the bar's box, and a pointer going for
   the item panel's Fav button left the panel for the bar, which shut an unpinned panel before the click,
   in every browser (bug report 8387). The panel lies over the bar now (2100); MD.InvStrip keeps the strip's
   filter box clear of it. From 1600px they never meet. */
@media (min-width: 641px) and (max-width: 1599px) {
	#barArea { z-index: 2090; }
}

/* THE SCENE EDITOR (ui/sceneeditor/editor.js, 2026-11-08). While the A25 scene editor is open in the frame it
   sets html.md-editor-wide: the page box, capped at 1050px by the bands above, grows to the room between the
   tools column at the left and the right hand panels, so the editor can use a wide screen (a larger canvas,
   the chat and the assistant beside it). Nothing else reads the class; the editor removes it on pagehide.
   On a phone the editor pins the frame over the screen under html.md-editor-fill, the md-chatfull way
   (footerscripts.js.php's setIframeHeights() leaves such a frame alone). */
@media (min-width: 1281px) and (max-width: 1599px) {
	html.md-editor-wide #pageContentArea {
		left: 110px !important; right: 120px !important; width: auto !important; max-width: none !important;
		min-width: 920px !important; transform: none !important; margin-left: 0 !important;
	}
	html.md-editor-wide.md-panels-pinned #pageContentArea { right: 480px !important; }
}
@media (min-width: 1600px) {
	html.md-editor-wide #pageContentArea {
		left: 320px !important; right: 485px !important; width: auto !important; max-width: none !important;
		min-width: 920px !important; transform: none !important; margin-left: 0 !important;
	}
}
@media (max-width: 640px) {
	html.md-editor-fill, html.md-editor-fill body { overflow: hidden !important; }
	html.md-editor-fill #pagecontent {
		position: fixed !important; left: 0 !important; top: 0; width: 100% !important; max-width: none !important;
		min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
		z-index: 8350 !important; background: #efe8d2 url(/templates/layout-default/img/bgpag.jpg) repeat;
	}
	html.md-editor-fill #pageContentArea { transform: none !important; }
}