/* "exportable" CSS, i.e., whatever should be included in the downloaded games */


@font-face {
font-family: "Orbiter";

src: url("Orbiter.woff") format("woff"),
}

b {
color: #CDBF00;
}

#room_description > div.actions > button:hover, #room_description > div.exits > button:hover, div#room_description button:hover {
background-color: #D22F8B !important;
}


@media only screen and (max-width: 600px) {

 #title > span.game_title {
font-size: 6em;
line-height: 0.8em;}


}


.bedroom {
background-image: url("images/bedroom.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
height: 370px;
width: 100%;
margin-bottom: 10px;
}
.kitchen {
background-image: url("images/kitchen.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
height: 370px;
width: 100%;
margin-bottom: 10px;
}
.bathroom {
background-image: url("images/bathroom.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
height: 370px;
width: 100%;
margin-bottom: 10px;
}
.garden {
background-image: url("images/garden.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
height: 370px;
width: 100%;
margin-bottom: 10px;
}
.frontdoor {
background-image: url("images/frontdoor.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
height: 370px;
width: 100%;
margin-bottom: 10px;
}
.factory {
background-image: url("images/factory.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
height: 370px;
width: 100%;
margin-bottom: 10px;
}
.staffroom {
background-image: url("images/staffroom.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.mainroad {
background-image: url("images/mainroad.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.newsagents {
background-image: url("images/newsagents.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.pub {
background-image: url("images/pub.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.pond {
background-image: url("images/pond.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.picnicspot {
background-image: url("images/picnicspot.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.junkyard {
background-image: url("images/junkyard.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.rekall {
background-image: url("images/rekall.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.lab {
background-image: url("images/lab.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.ward {
background-image: url("images/ward.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.busstop {
background-image: url("images/busstop.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.tunnelhall {
background-image: url("images/tunnelhall.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.gloomy {
background-image: url("images/gloomy.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.greendragon {
background-image: url("images/greendragon.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.lastresort {
background-image: url("images/lastresort.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.dancefloor {
background-image: url("images/dancefloor.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.trollclearing {
background-image: url("images/trollclearing.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}

.bridgeofdoom {
background-image: url("images/bridgeofdoom.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}

.elfvillage {
background-image: url("images/elfvillage.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.tobaccoshop {
background-image: url("images/tobaccoshop.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.skilift {
background-image: url("images/skilift.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.hotelmisty {
background-image: url("images/hotelmisty.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.goblindungeon {
background-image: url("images/goblindungeon.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.passage {
background-image: url("images/passage.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.cavernlake {
background-image: url("images/cavernlake.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.norbitcottage {
background-image: url("images/norbitcottage.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.web {
background-image: url("images/web.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.greathall{
background-image: url("images/greathall.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.tenniscourt {
background-image: url("images/tenniscourt.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.palacebedroom {
background-image: url("images/palacebedroom.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.torture {
background-image: url("images/torture.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.winecellar {
background-image: url("images/winecellar.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.riverbank {
background-image: url("images/riverbank.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.ruins {
background-image: url("images/ruins.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.lonelymountain {
background-image: url("images/lonelymountain.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}
.cavehalls {
background-image: url("images/cavehalls.jpg");
background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
min-height: 260px;
margin-bottom: 10px;
}

@media only screen and (max-width: 600px) {
 #topbar {
font-size: 8px !important;
      }
#room_description > div.im_in {
    display: none !important;
}
}

#save_load > p > button {
display: none !important; }

/* background-color: #000000; */

#scroller { /* cambio */
	background-color: #000000 !important;
}

body {
	min-height: 100vh; /* cambio */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: #000000;
	color: #ffffff;
	font-family:  "Orbiter", Courier New;
	font-size: 10pt;
	font-weight: bold;
	border-collapse: always;
}
div#game {
	position: relative;
	max-width: 80ch; /* cambio */
	float: right;  /* cambio */
	margin-left: 13vw; /* cambio */
	transition: opacity 1s /* cambio */
}
body.gs_export div#game {
	max-width: 70ch; /* cambio */
	float: none;
}

div#game p {
	margin: 0;
	text-indent: 1em; /* cambio */
	margin-bottom: 5px;  /* cambio */
}

div#title_container {
}

span.game_title {
color: white;
	display: block;
letter-spacing: 2px;

  background: linear-gradient(to right, rgba(255, 215, 255, 0) 0%, rgba(225, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 61%), linear-gradient(rgb(97, 183, 217) 52%, rgb(224, 246, 255) 60%, rgb(78, 99, 132) 61%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
  padding-top: 4px;
  padding-bottom: 4px;

	text-decoration: none; /* cambio */
	text-transform: uppercase;
	text-indent: 0; /* cambio */
	font-weight: bold; /* cambio */
	font-size: 80px; /* cambio */
	font-family: 'New Amsterdam', serif; /* cambio */
	max-width: 15ch; /* cambio */
	margin-bottom: 30px;
padding-top: 20px;
}

@media (max-width: 767.98px) { /* cambio responsivo */

	
	span.game_title {
		font-size: 30px; /* cambio */
letter-spacing: 2px;
	}
	span.game_author {
		font-size: 10px; /* cambio */
	}
	div#game {
		margin-left: 0
	}

	button {
		font-size: 80% !important;
		padding: 4px 8px !important;
		margin: 2px 4px !important;
	}



	body.main-menu .actions button {
		font-size: 15px !important	;
		margin-bottom: 6px;
	} /* cambio */

	#room_description ul {
		padding-left: 20px;
	}

	div#options {
		padding-top: 35%;
	}


}

span.game_author {
	font-size: 10px; /* cambio */
display: block;
}



ul {
	padding-top: 0px;
	margin-top: 0px;
	padding-bottom: 0px;
	margin-bottom: 0px;
	list-style-type: none;
	margin: 0;
}
ul.room_contents_in_scroller {
	display: inline-block;
	content: "- ";
	text-indent: -5px;
}
ul > li {
	text-indent: -5px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
div#room_description ul > li::before {
	content: "- ";
	text-indent: -5px;
}

img.thing_icon {
	height: 20px;
	width: 20px;
}

button {
	font-family: inherit;
	font-size: 12px;
	text-decoration: none;
	cursor: pointer;
	color: #ffffff;
	padding: 10px !important;
	border-radius: 0.25cm;
	border: 0px;
	margin: 5px 15px; /* cambio */
	white-space: nowrap;
	display: inline-block;
}
a#hints_button {
	background-color: #ffffff;
	font-family: monospace;
	font-size: inherit;
	text-decoration: none;
	cursor: pointer;
	color: #aaaaff;
	padding-left: 0.25cm;
	padding-right: 0.25cm; 
	padding: 0.1cm 0.5cm 0.1cm 0.5cm; 
	border-radius: 0.25cm;
	border: 0px;
	margin: 2px;
	white-space: nowrap;
	display: inline-block;
}
/*
button.examine {
	padding-left: 4px;
} */

/* div#wrapper {
	min-height: 200px;
} */

div#top_bar {
	background-color: #D22F8B;
	color: #ffffff;
	padding: 8px;
	 position: -webkit-sticky; /* Safari */
  	position: sticky;
 	 top: 0;
}
div#topbar_left {
	padding: 0px;
	display: inline-block;
}
div#topbar_right {
	float: right;
	text-align: right;
}
div#scroller {
	height: auto; /* cambio */

	background-color: #000066;
	color: #ffffff;
line-height: 20px;
	/* border: 1px solid #000044; */
	/* padding: 5% 5% 2px 5%;*/
	padding-bottom: 14px; /* cambio */
}
div#scroller button {
	background-color: #4682B4;
	line-height: 1.33;
}
span.prompt {
	color: #ffffff;
}
span.prompt::before {
	content: "> ";
}
span.old_prompt {
	color: #4682B4;
}
span.old_message {
	color: #4682B4;
}
div#room_description_container {
	/* overflow: hidden */
	/*background-color: #000055; cambio */
	background-color: #000000; /* cambio */
	line-height: 1.33;
	color: #ffffff;
border-top: 3px dotted #e5e5e5;
box-shadow: inset 0 -1px 0 0 #e5e5e5, inset 0 1px 0 0 #e5e5e5, 0 1px 0 0 #e5e5e5, 0 -1px 0 0 #e5e5e5;
	padding-top: 14px; /* cambio */
}
div#room_description {
	overflow: stretch;
	height: auto; 
	padding: 8px 4% 2px 4%;
	line-height: 1.33;
	font-size: 85% /*cambio */
}

@media only screen and (min-width: 500px) {
	div#room_description div.im_in {
	/* line-height: 1.33; */
	display: none;
}
}


div#room_description div.exits {
}
div#room_description div.actions {
}
div#room_description div.can_see {
}

.can_see li {
	padding-left: 2em;		/* cambio */
	text-indent: -2em;		/* cambio */
}

div#conversation {
	padding: 4px 4% 4px 4%;
	display: none;
	background-color: #273F0B;
	line-height: 1.33;
	color: #ffffff;
}
div#conversation div.talking_to {
}
div#conversation div.conversation_options {
}
div#conversation div.end_conversation {
}
div#conversation button {
	padding-top: 1px;
	padding-bottom: 1px;
	background-color: #ffffff;
	color: #202103;
}

@media (orientation: portrait) {
	span#moves_score {
		display: none;
	}
}

/*
@media (orientation: landscape){
	// two-column layout 
	
	div#title {
	}
	
	div#score: {
	}
	
	div#score:before {
		content: "Score: "
	}
	
	div#left-column {
		width: 50%;
		float: left;
		height: 95%;
	}
	div#scroller {
		height: 90%;
		padding: 5% 5% 5% 5%;
	}
	div#scroller:after { // makes bottom padding work in FF/IE 
		content: "";
		height: 1em;
		display: block;
	}
	
	div#right-column {
		width: 50%;
		float: left;
		height: 95%;
		overflow: auto;
	}	
	
} 
*/

/*
button.examine {
	margin-left: 0.05cm !important;
} */

div#room_description button {
	padding-top: 1px;
	padding-bottom: 1px;
	background-color: #4682B4;
}
div#room_description button.examine {
	background-color: #4682B4;
}
div#room_description button.examine {
	border-radius: 0;
	color: #ffffff;
	cursor: zoom-in;
}

button.examine {
	border-radius: 0;
	color: #ffffff;
	cursor: zoom-in;
}

div#room_description span.unavailable_exit {
	color: #000088;
	padding: 0.1cm 0.5cm 0.1cm 0.5cm;
	white-space: nowrap;
}
div#wait {
	/* overflow: stretch; */
	clear: both;
	/* border: 0px 1px 1px 1px solid #000044; */
	padding: 8px;
	background-color: #000088;
	line-spacing: 1.75;
	text-align: center;
}
div#wait button {
	background-color: #000033;
}

div#inventory_container {
	/* overflow: hidden */
	/* background-color: #000066; cambio */
	background-color: #D22F8B; /* cambio */
}
div#inventory {
	overflow: stretch;
	height: auto;
	/* margin-left: 15%; */
	/* min-height: 10%; */
	/* border: 1px solid #000044; */
	padding: 2px 8px 2px 8px;
	background-color: #D22F8B; /* cambio */
	line-height: 1.33;
}

div#holding_container {
	/* overflow: hidden */
	/* background-color: #000066; cambio */
	background-color: #4682B4; /* cambio */
}
div#holding {
	overflow: stretch;
	height: auto;
	/* margin-left: 15%; */
	/* min-height: 10%; */
	/* border: 1px solid #000044; */
	padding: 8px;
	
	line-height: 1.33;
}
div#holding button {
	padding-top: 1px;
	padding-bottom: 1px;
	background-color: #000033;
}

div#inventory button {
	padding-top: 1px;
	padding-bottom: 1px;
	background-color: #26601F;
	padding-left: 0.5cm;
	padding-right: 0.5cm;
color: white;
background: #CD679A;
}
div#inventory button.examine {
	border-radius: 0px;
}
button:disabled {
	background-color: #111111;
	color: #333333;
	cursor: default;
}

div#save_load_container {
}
div#save_load {
	text-align: center;
	line-height: 1.33;
	font-size: 80%; /*cambio */
	opacity: .5; /*cambio */
	transition: .3s; /*cambio */
	padding-top: 10px; /*cambio */
	background: #D22F8B;
}
div#save_load:hover { opacity: 1 } /*cambio */

div#save_load button {
	padding-top: 1px;
	padding-bottom: 1px;
	background-color: #00000014; /*cambio */
	font-weight: 300;
}



div#saved_games button {
	color: #cccccc;
	background-color: #333333;
}
div#saved_games button:first-of-type {
	color: #ffffff;
	background-color: #666666;
}

div.save_prompt {
	display: none;
	text-align: center;
	margin: 2px;
	padding: 8px;
	background-color: #111111;
	color: #ffffff;
	line-spacing: 1.5;
}
div.save_prompt button {
	color: #000000;
	padding-top: 1px;
	padding-bottom: 1px;
}
div.restart_prompt {
	display: none;
	text-align: center;
	margin: 2px;
	padding: 8px;
}
div.restart_prompt button {
	padding-top: 1px;
	padding-bottom: 1px;
	color: #000000;
}
input#save_name {
	width: 40%;
	font-family: inherit;
	font-size: inherit;
}
#saved_games button.confirm_delete {
	background-color: #cccccc;
	color: #000000;
	
}

div#options {
	/* min-height: 90%; cambio */
	/* top: 0px; cambio */
	position: absolute;
	bottom: 0px; /* cambio */
	left: 0px;
	background-image: url("img/6589k.png"); /* cambio */
	background-size: cover; /* cambio */
	background-repeat: no-repeat;
	color: #000000; /* cambio */
	border-bottom: 1px solid #888; /* cambio */
	
	width: 90%;
	padding: 5%;
	padding-top: 22%; /* cambio */
	line-height: 1; /* cambio */
	
	display: none;
	
}

div#options button {
	background-color: #000033;
}

div#credits {
	position: absolute;
	top: 0px;
	left: 0px;
	color: #2d2d2d; /* cambio */
	background-image: url("img/6589k.png"); /* cambio */
	background-position: bottom; /* cambio */
	background-repeat: no-repeat; /* cambio */

	width: 90%;
	min-height: 90%;
	padding: 5%;
	
	display: none;
	
	line-height: 1.33;
}

div#credits button {
	background-color: #000033;
}

#credits-contens {
  position: absolute;
  bottom: 10px;
  padding: 0 5% 0 0;
} /* cambio */

/* Botones personalizados */

button { font-weight: 300 } /* cambio */

.actions button, .can_see button, .exits button.direction {
	background: #CD679A !important;
	font-weight: 300;
} /* cambio */
		
/* MenÃº principal */

body.main-menu .im_in ,
body.main-menu .exits ,
body.main-menu #holding_container ,
body.main-menu #savefix ,






} /* cambio */

body.main-menu .actions {
	font-size: 0;
color: #26601F !important;
} /* cambio */

body.main-menu .actions button {
	font-size: 16px;
} /* cambio */

body.main-menu #save_load { 
	opacity: 1;
	padding: 8px 4% 2px 4%;
 }

body.main-menu #save_load button {
	display: block;
} /* cambio */

body.main-menu #save_load button[data-localisation_key="save_button"] ,
body.main-menu #save_load button[data-localisation_key="restart_button"] {
	display: none
} /* cambio */


body.main-menu #save_load button[data-localisation_key="restore_button"] ,
body.main-menu button#credit-show { 
	display: block 
} /* cambio */


:root{
  --neon-1:#7df9ff;   /* cyan */
  --neon-2:#a87dff;   /* violet */
  --glow-a:rgba(125,249,255,.55);
  --glow-b:rgba(168,125,255,.35);
}

/* Your title */
span.game_title{
  display:inline-block;
  position:relative;
  letter-spacing:.06em;
  /* Holographic gradient “inside” the text */
  color:transparent;
  background:linear-gradient(120deg,var(--neon-1),#fff 35%,var(--neon-2) 70%) 0 0/200% 100%;
  -webkit-background-clip:text;
  background-clip:text;

  /* Glow + subtle shimmer + glitch */
  filter:drop-shadow(0 0 6px var(--glow-a)) drop-shadow(0 0 22px var(--glow-b));
  animation:
    holoShimmer 5s linear infinite,
    glitchFlicker 3.6s steps(24,end) infinite;
}

/* Scanning light sweep */
span.game_title::after{
  content:"";
  position:absolute; left:-5%; right:-5%; top:0; height:18%;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.25), rgba(255,255,255,0));
  transform:translateY(-130%) skewY(-4deg);
  filter:blur(1px);
  mix-blend-mode:screen;
  animation:scan 3s linear infinite;
  pointer-events:none;
}

/* Optional: small hover boost */
span.game_title:hover{
  filter:drop-shadow(0 0 8px var(--glow-a)) drop-shadow(0 0 28px var(--glow-b));
}

/* Keyframes */
@keyframes holoShimmer { to { background-position:200% 0; } }

@keyframes scan {
  0%   { transform:translateY(-130%) skewY(-4deg); }
  100% { transform:translateY(130%)  skewY(-4deg); }
}

@keyframes glitchFlicker{
  0%,12%,100% { text-shadow:
      0 0 0 rgba(0,0,0,0),
      0 0 10px var(--glow-a); transform:none; }
  13%  { text-shadow:-2px 0 var(--neon-1), 2px 0 #ff4dff; transform:skewX(6deg); }
  14%  { text-shadow: 2px 0 var(--neon-1),-2px 0 #ff4dff; transform:skewX(-6deg); }
  15%  { text-shadow:-1px 0 var(--neon-1), 1px 0 #ff4dff; transform:none; }
  46%  { text-shadow: 0 0 10px var(--glow-a); }
  47%  { text-shadow:-3px 0 var(--neon-1), 3px 0 #ff4dff; transform:translateY(1px); }
  48%  { text-shadow: 3px 0 var(--neon-1),-3px 0 #ff4dff; transform:translateY(0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  span.game_title,
  span.game_title::after{ animation:none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  span.game_title,
  span.game_title::after{ animation:none; }
}

@media only screen and (max-width: 500px) {
  span.game_title{
    animation: none !important;    /* no shimmer/glitch */
    text-shadow: none !important;  /* no glitch offsets */
    /* keep the gradient fill */
    filter: drop-shadow(0 0 6px var(--glow-a)) drop-shadow(0 0 12px var(--glow-b));
  }
  span.game_title::after{ content:none !important; animation:none !important; }
}

/* ===== Mobile overrides for ALL room backgrounds ===== */
@media (max-width: 680px){
  .bedroom, .kitchen, .bathroom, .garden, .frontdoor, .factory, .staffroom, .mainroad,
  .newsagents, .pub, .pond, .picnicspot, .junkyard, .rekall, .lab, .ward, .busstop,
  .tunnelhall, .gloomy, .greendragon, .lastresort, .dancefloor, .trollclearing,
  .bridgeofdoom, .elfvillage, .tobaccoshop, .skilift, .hotelmisty, .goblindungeon,
  .passage, .cavernlake, .norbitcottage, .web, .greathall, .tenniscourt,
  .palacebedroom, .torture, .winecellar, .riverbank, .ruins, .lonelymountain, .cavehalls {
    /* kill fixed/min heights from desktop rules */
    height: auto !important;
    min-height: 0 !important;

    /* give them a responsive height */
    aspect-ratio: 16 / 9;               /* change to 3 / 2 (66.66%) or 4 / 3 (75%) if your photos fit better */

    /* keep your background behaviour */
    background-position: center center !important;
    background-size: contain !important;   /* use 'contain' instead if you want zero crop */
    background-repeat: no-repeat !important;

    width: 100%;
    margin-bottom: 10px;                 /* keep your spacing */
  }
}

/* ===== Fallback for older iOS Safari (no aspect-ratio support) ===== */
@supports not (aspect-ratio: 1 / 1){
  @media (max-width: 680px){
    .bedroom, .kitchen, .bathroom, .garden, .frontdoor, .factory, .staffroom, .mainroad,
    .newsagents, .pub, .pond, .picnicspot, .junkyard, .rekall, .lab, .ward, .busstop,
    .tunnelhall, .gloomy, .greendragon, .lastresort, .dancefloor, .trollclearing,
    .bridgeofdoom, .elfvillage, .tobaccoshop, .skilift, .hotelmisty, .goblindungeon,
    .passage, .cavernlake, .norbitcottage, .web, .greathall, .tenniscourt,
    .palacebedroom, .torture, .winecellar, .riverbank, .ruins, .lonelymountain, .cavehalls {
      position: relative;
      height: auto !important;
      overflow: hidden;
    }
    .bedroom::before, .kitchen::before, .bathroom::before, .garden::before, .frontdoor::before, .factory::before, .staffroom::before, .mainroad::before,
    .newsagents::before, .pub::before, .pond::before, .picnicspot::before, .junkyard::before, .rekall::before, .lab::before, .ward::before, .busstop::before,
    .tunnelhall::before, .gloomy::before, .greendragon::before, .lastresort::before, .dancefloor::before, .trollclearing::before,
    .bridgeofdoom::before, .elfvillage::before, .tobaccoshop::before, .skilift::before, .hotelmisty::before, .goblindungeon::before,
    .passage::before, .cavernlake::before, .norbitcottage::before, .web::before, .greathall::before, .tenniscourt::before,
    .palacebedroom::before, .torture::before, .winecellar::before, .riverbank::before, .ruins::before, .lonelymountain::before, .cavehalls::before {
      content: "";
      display: block;
      padding-top: 56.25%;               /* 16:9. Use 66.66% for 3:2, 75% for 4:3 */
    }
  }
}

		
		</style>