/* =====================================================================
   Syrup Town - unified stylesheet  (style.css)
   Single entry for desktop + mobile, switched by viewport width.

   ARCHITECTURE — switched by viewport ORIENTATION:
     - LANDSCAPE half (former index.css) = side-by-side layout:
       monitors, tablets, landscape phones & non-rotating handhelds.
     - PORTRAIT  half (former cordova.css) = stacked layout: portrait phones.
   Redundancy between the halves is intentional for now; de-duplicating into a
   shared base is a later, incremental phase (see CSS_REFACTOR_PLAN.md).

   Keep JS in sync:  var mobile = matchMedia('(orientation: portrait)').matches
   ===================================================================== */

:root {
	/* ---- Layout ---- */
	--menu-width: 21%;            /* side-menu width; close button & JS toggle track this */

	/* ---- Brand palette ---- */
	--c-pink:    #de93ac;         /* primary pink */
	--c-cream:   #fcebb5;         /* frame / border cream */
	--c-mauve:   #ae8492;         /* muted mauve */
	--c-cyan:    #5fe6ec;         /* cyan accent */
	--c-blue:    #0593f8;         /* choice-text blue */
	--c-blue-ui: #0095ff;         /* UI blue (menu arrows) */
	--c-gold:    #c0a771;         /* gold / tan */

	/* ---- Fonts ---- */
	--font-title:   playtime;
	--font-hand:    handmade;
	--font-body:    railway, 'times new roman', sans-serif;
	--font-display: norwester, 'times new roman', sans-serif;

	/* ---- Radii ---- */
	--radius-sm: 5px;
	--radius-md: 15px;

	/* ---- Type scale (RESPONSIVE) ----
	   Sizes scale with the smaller viewport dimension (vmin), so text shrinks on a
	   short landscape phone the way the logo already does. Form: clamp(floor, N*vmin, desktop-cap).
	   These are STARTING VALUES to tune in-device. The "=" equivalents tell you which tier an
	   existing declaration belongs to (e.g. if you see 1.5em, it's --fs-large). */
	--fs-tiny:   clamp(9px,  2.7vmin, 12px);   /* ~12px  =  0.5em  0.7em  0.75em                  */
	--fs-small:  clamp(12px, 3.2vmin, 16px);   /* ~16px  =  1em  1rem  1.1em  16px  17px          */
	--fs-medium: clamp(15px, 3.8vmin, 20px);   /* ~20px  =  1.25rem  1.2em  1.3em  1.4em  20–22px  */
	--fs-large:  clamp(17px, 4.4vmin, 24px);   /* ~24px  =  1.5em  1.5rem  1.875em                */
	--fs-xlarge: clamp(20px, 5.2vmin, 32px);   /* ~32px  =  2em  2rem                             */
	--fs-huge:   clamp(30px, 6vmin,   44px);   /* ~48px  =  2.5rem  3em  3rem  (arrows live above) */

	/* ---- Spacing (RESPONSIVE) — padding/margins SHRINK on small screens so content fills more.
	   Inverse intent of the type scale: clamp(small-screen floor, N*vmin, desktop cap). Tune freely. ---- */
	--space-sm: clamp(4px,  2.5vmin, 16px);
	--space-md: clamp(8px,  4vmin,   30px);
	--space-lg: clamp(12px, 6vmin,   60px);

	/* ---- Component vars that differ by ORIENTATION (defaults = landscape/desktop; the
	   portrait block overrides them). JS reads them via var(--name, fallback), letting us
	   delete if(mobile) branches. Add more here as we convert files. ---- */
	--card-brightness: 80%;   /* collectable card brightness (portrait: 100%) */
	--wardrobe-cols:   3;     /* wardrobe grid columns (portrait: 2) */
	--collection-cols: 3;     /* collection gallery columns (portrait: 1) */
	--ovl-h: 100%;            /* character overlay sprite height (portrait: 75%) */
	--ovl-left: 55%;          /* overlay left anchor (portrait: auto) */
	--ovl-right: auto;        /* overlay right anchor — location overlays (portrait: 60%) */
	--ovl-enc-right: auto;    /* overlay right anchor — encounter overlay (portrait: 0%) */
	--encounter-lh: 7;        /* wall-encounter button line-height (portrait: 1) */
	--fetish-grid-min: 30%;   /* fetish grid minmax min-size (portrait: 90%) */
	--title-btn-maxw: 40%;    /* title screen button max-width (portrait: none) */
	--title-img-h: 500px;     /* title wardrobe-item image height (portrait: 300px) */
	--title-btngrid-h: 130px; /* title button grid height (portrait: 300px) */
	--title-grid-min: 175px;  /* title character grid minmax min (portrait: 110px) */
	--foxf-btngrid-h: 130px;  /* foxf button grid height (portrait: 110px) */
	--outfit-cols: 3;         /* outfit grid columns (portrait: 1) */
	--outfit-cols-wide: 4;    /* wide outfit grid columns (portrait: 2) */
	--foxf-brightness: 60%;   /* foxf card/final brightness (portrait: 80%) */
	--inv-cols: repeat(auto-fill, 270px); /* inventory grid columns (portrait: 1fr) */
	--grotto-btn-max: 30%;    /* grotto nav-button max-width cap (portrait: 45% so they aren't tiny) */
}

/* ---- Collectables category bar (shared / orientation-agnostic) ----
   Responsive flowing button row for the collectables categories (Jiggies/Tarot/…) and their sub-set buttons.
   Replaces the old per-button absolutely-positioned fixed-px 4-col grid + the --collectable-cat-mt margin hack. */
.categoryButtons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--space-sm);
	margin: var(--space-md) 0;
}
.categoryButtons .pictureButton,
.categoryButtons .pictureButton:hover {
	position: static;   /* base .pictureButton(:hover) is absolute (room-nav buttons); category buttons must stay IN FLOW
	                       even on hover, or hovering flips them to absolute, drops them from the flex row, reflows, loses
	                       the hover and snaps back -> the flicker/vanish bug. The :hover selector here (0,0,3) outranks
	                       the base .pictureButton:hover (0,0,2). */
	margin: 0;          /* spacing handled by the flex gap */
	max-width: none;
}

@media (orientation: landscape) {
	/*Misc*/
	html, body {
		width: 100%;
		height: 100%;
		padding: 0px;
		margin: 0px;	
	}
	html {
	    border-color: #cccccc; /* defined Root border-color: Off-white */
	    overflow: hidden;
	    /* preventing overflows like dimmed background-layer to generate scrollbars
			Scrollbars are getting used on the individual containers like #output instead anyways
	     */
	    font-family: arial, sans-serif;
	    font-size: 1rem; /* defined Root font-size (fixed base, NOT a responsive tier) */
	    color: #cccccc; /* defined Root font-color: Off-white */
	    line-height: 1.5em;
	}
	body{
	    display: flex;
	    /* Makes sure #output always fills the rest of the available space */
	}
	*{
		box-sizing: border-box;
		/*when specifying dimensions, it takes padding and borders into account*/
	}
	a, a:visited {
		text-decoration: none;
		color:#509cea;
	}
	.closeButton {
		top: 38px;
		left: var(--menu-width);
		position: absolute;
		font-size: clamp(2rem, 12vh, 100px);
		color: var(--c-blue-ui);
		cursor: pointer;
		text-shadow: 5px 8px #000A, -1px -1px 5px #000A;
		z-index: 0;
		font-family: var(--font-title);
	}
	.openButton {
		top:38px;
		left: 20px;
		position: absolute;
		visibility: hidden;
		font-size: clamp(2rem, 12vh, 100px);
		color: var(--c-blue-ui);
		cursor: pointer;
		text-shadow: 5px 8px #000A, -1px -1px 5px #000A;
		z-index: 0;
		font-family: var(--font-title);
	}
	.jiggyButton {
		font-size: clamp(2rem, 12vh, 100px); /* unified with the open/close menu arrows */
		line-height: 1;
		color: var(--c-blue-ui);
		cursor: pointer;
		text-shadow: 5px 8px #000A, -1px -1px 5px #000A;
		z-index: 1;
		font-family: var(--font-title);
	}
	#jiggyButtonHolders {
		position: fixed;
		top: clamp(110px, 20vh, 200px); /* sit below the open/close arrow at top:38px */
		left: 20px;                     /* same left edge as the open button (folds with the menu) */
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
		z-index: 1;
		transition: left 1s; /* slide in step with the side menu */
	}
	#jiggyButtonHolders.menuOpen {
		left: var(--menu-width); /* menu folded out: sit alongside its right edge, like the close arrow */
	}
	.loader {
	  border: 16px solid #f3f3f3; /* Light grey */
	  border-top: 16px solid #3498db; /* Blue */
	  border-radius: 50%;
	  width: 120px;
	  height: 120px;
	  animation: spin 2s linear infinite;
	}
	hr {
		border: 2px dashed white;
		margin-bottom: 45px; 
	}
	@keyframes spin {
	  0% { transform: rotate(0deg); }
	  100% { transform: rotate(360deg); }
	}

	/****Scroll bar****/
	/* width */
	::-webkit-scrollbar {
	  width: 5px;
	}
	/* Track */
	::-webkit-scrollbar-track {
	  background: #333333; 
	}
	 /* Handle */
	::-webkit-scrollbar-thumb {
	  background: #FFFFFF; 
	  border-radius:3px;
	}
	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
	  background: #DDDDDD; 
	}

	/**** Menu ****/
	div#menu {
	    width: var(--menu-width);
	    height: 100%;
	    flex:none;
		text-align: center;
		overflow-y: auto; /*only adds a scrollbar, when necessary*/
		overflow-x: hidden;
		/*resize: horizontal;  probably better to code the resizing of this container via JS. Something for later. */
		scrollbar-width:none;
		transition: 1s;
		position: relative;
	}
	.title {
		width: 60%;
		padding-top: 10%;
	}
	.titleAuthor {
		font-size: var(--fs-xlarge);
		font-family: var(--font-hand);
		text-decoration:underline;
		color: var(--c-blue-ui);
		font-weight: bold;
		padding-bottom: 3%;
		margin: 0px;
	}
	.menuBackground {
		background-image: url('../../images-webp/system/ui/notepad.webp');
		width: 100%;
		min-height: 100vh;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		aspect-ratio: 270/890;
	}
	.menuButtonLarge {
		width: 28%; 
		cursor: pointer;
	}
	.menuButtonLarge:hover {
		filter:brightness(70%);
	}
	.menuButtonSmall:hover {
		filter:brightness(70%);
	}
	#buttonUpperGrid {
		position: relative;
	}
	/* Side-menu money badge (landscape only; portrait hides it and the footer shows money instead).
	   Migrated out of inline HTML. TODO(2d): height is still fixed px — make responsive/circular in the sizing pass. */
	.moneyCircle {
		background: green;
		height: clamp(28px, 6vmin, 45px);   /* was a flat 45px — too big on small screens; ~45 desktop, ~28 mobile landscape */
		position: absolute;
		top: 0px;
		left: 25%;
		border-radius: 50%;
		font-size: var(--fs-medium, 1.5em);
		pointer-events: none;
	}
	.moneyCircle .playerMoney {
		margin-top: clamp(5px, 1.5vmin, 10px);   /* scales the original 10px text nudge as the box shrinks */
		font-weight: bold;
		color: #FFFFFF;
		font-family: var(--font-title);
	}
	.menuButtonSmall {
		width: 32%;
		cursor: pointer;
	}
	p#title {
		font-size: var(--fs-large);
	    margin-bottom: 15px;
	}
	p#author {
		font-size: var(--fs-large);
		cursor: pointer;
	}

	.flexbox{
	    display: flex;
	    flex-wrap: wrap;
	}
	.flexbox>*{
		/*Only really used for the menu to ensure 2 items per row*/
	    width: 42%;
	    box-sizing: border-box;
	    margin: 15px;
	}
	.playerImageFrame {
		display: block;
		object-fit: cover;
	}
	.museumImageFrame {
		display: block;
		object-fit: cover;
		width: 100%;
		padding-bottom: 200%;
	}
	.playerImage {
		position: absolute;
		display: block;
	    margin: auto;
	  	border: 5px solid var(--c-cream);
	  	border-radius: var(--radius-sm);
		width:69%;
		margin-left: 14%;
		box-shadow: 6px 6px #0005;
		object-fit: cover;
		object-position: 100% 0px;
	}

	/**** Canvas ****/
	.wrapper{
	    background: none; /*To ensure WrapperBG shows, in case browser-native forces white background as default*/
	    width: 100%;
		height: 100%;
		overflow-y: auto; /*only shows a scroll-bar, if necessary*/
		overflow-x: hidden;
		transition: 1s;
	}
	div#output {
	    padding: var(--space-lg);
		transition: 2s;
	}
	div#wrapperBG {
		/*Box covering entire canvas, used to add background-image via JS*/
	    height: 100%;
	    width: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    background-size: 100% 100%;
	    filter: blur(25px) contrast(80%);
	    z-index: -2;
	}
	div#wrapperBG.Evening {
		filter: blur(5px) contrast(80%) brightness(70%) saturate(80%) sepia(65%);
	}
	div#wrapperBG.Night {
		filter: brightness(50%) blur(5px) contrast(80%) saturate(50%) grayscale(30%) sepia(50%) hue-rotate(-90deg);
	}
	div#wrapperBG::after {
		/*dims the background */
	    content: "";
	    position: absolute;
	    height: 100%;
	    width: 100%;
	    z-index: -1;
	}
	.backgroundPicture{
		display: block;
		width: 100%;
		height: 100%;          /* fill the (now square) room; stretch keeps %-positioned buttons aligned */
	}
	.backgroundBorder{
	    border: 5px solid var(--c-cream);
	    border-radius: 30px;
	    height: 100%;
	    width: 100%;
		margin: auto;
		overflow: hidden;
		position:relative;
	}
	.playerRoom {
		position: relative;
		width: 90%;
		margin: auto;
	}
	.Evening {
		filter: brightness(70%) contrast(120%) saturate(80%) sepia(65%);
	}
	.Night {
		filter: brightness(50%) contrast(150%) saturate(50%) grayscale(30%) sepia(50%) hue-rotate(-90deg);
	}
	.pictureButton {
		display: block;
		position: absolute;
		opacity: .5;
		text-align: center;
		cursor: pointer;
	  	border: 3px solid white;
	  	border-radius: var(--radius-sm);
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.pictureButton:hover {
		display: block;
		position: absolute;
		background-color: black;
		opacity: .8;
		text-align: center;
		cursor: pointer;
	  	border: 4px solid white;
	  	border-radius: var(--radius-sm);
		padding-top: 20px;
		padding-bottom: 20px;
	}
	img.bigPicture {
		display: block;
	    max-height: 70vh;
	    margin: auto;
	    border: 5px solid var(--c-cream);
	    border-radius: 30px;
	}
	.gridPicture {
		display: block;
	    margin: auto;
	    border: 5px solid var(--c-cream);
	    border-radius: 30px;
		filter: brightness(50%);
		width:100%;
		cursor:pointer;
	}
	.gridPicture:hover {
		filter: brightness(100%);
	}
	.medPicture {
		display: block;
	    margin: auto;
	    max-height: 500px;
	  	padding: 20px, 1px;
	  	border: 3px solid white;
	  	border-radius: var(--radius-sm);
	}

	/**** Text ****/
	h1,h2,h3,h4,h5,h6,p{
		/*clear any user style agent defintions*/
		margin:0;
		padding:0;
	}
	h1 {
		font-size: var(--fs-huge);
	}
	h2 {
		font-size: var(--fs-xlarge);
	}
	h3 {
		font-size: var(--fs-medium);
	}
	h3 {
		font-size: var(--fs-medium);
	}
	.centeredText {
		font-size: var(--fs-large);
		font-family: var(--font-title);
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		background-color: #00000077;
		border-radius: 12px;
		padding: 15px;
		line-height: 1.3;
		color: #FFFFFF;
		text-shadow: 2px 2px #000000;
	}
	.tinyText {
		color: #BBBBBB;
		text-align:center;
		margin-left: auto;
		margin-right: auto;
		width: 400px;
		font-size: 70%;
	}
	p{margin: 15px 0;}

	/* Textbox interactions */
	.textContent p.switch {
	    color: var(--c-cyan);
		cursor: pointer;
	}
	.textContent p.switch::before {
	    content: '\027A4';
	    padding-right: 5px;
		cursor: pointer;
	}
	/* text emphasis */
	.textBox b {
	    color: hsla(48, 69%, 75%, 1);
	}
	.textName {
		font-size: var(--fs-medium);
		margin: 0px;
		padding: 0px;
		font-weight: bold;
	}
	p.rawText {
		font-size: var(--fs-large);
		font-family: var(--font-title);
		margin-left: auto;
		margin-right: auto;
		background-color: #00000077;
		border-radius: 12px;
		padding: 15px;
		line-height: 1.3;
		text-shadow: 2px 2px #000000;
	    color: #1ce01c;
	}
	.specialText {
		font-size: var(--fs-large);
		font-family: var(--font-title);
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		background-color: #00000077;
		border-radius: 12px;
		padding: 15px;
		line-height: 1.3;
		text-shadow: 2px 2px #000000;
	    color: #1ce01c;
	
	    font-weight: bold;
	    text-align: center;
	}

	/*regular button*/
	.button, .pictureButton, .choiceText, .shopItem, .logbookSwitch{
		font-size: var(--fs-xlarge);
	    background: #665533CC;
	    padding: 15px;
	    margin: 15px;
	    border: none;
	    border-radius: 25px;
	    transition: 0.25s;
	    text-align: center;
		cursor: pointer;
		border-bottom: 3px solid var(--c-gold);
		color: var(--c-blue);
		text-shadow: 2px 2px #00355A;
	}
	.button:hover, .pictureButton:hover, .choiceText:hover, .logbookSwitch:hover{
	    background: rgba(50,50,50,0.75);
	    color: #ffffff;
	    border: none;
	    border-bottom: 3px solid #FFFFFF;
	}
	.choiceText {
		font-size: var(--fs-xlarge);
		font-weight: bold;
		display: block;
		width: fit-content;
		margin: 15px auto;
		color: var(--c-blue);
		font-family: var(--font-hand);
		font-weight:bold; 
	}
	.pictureButton {
		font-weight: bold;
		display: block;
		width: fit-content;
		margin: 15px auto;
		color: #FBEAB5;
		font-family: var(--font-hand);
		font-weight:bold; 
	}
	.pictureButton,.pictureButton:hover {
		font-size: var(--fs-xlarge);
	    background: none;
	    padding: 3% 4%;
	    opacity: 1;
	    border: 0;
		font-family: var(--font-hand);
		font-weight:bold; 
		line-height:1;
		background-image: url("../../images-webp/system/ui/buttonBackboard.webp");
		background-size: 100% 100%;
	}
	.pictureButton:hover {
		filter:hue-rotate(-25deg);
	}
	.playerRoom {
		position: relative;
		aspect-ratio: 1 / 1;
		/* 2f: square nav window (location art is square). Desktop-landscape size below;
		   mobile-landscape override lives in the (max-height:520px) block; portrait is full-width. */
		width: 40%;
		max-width: 100%;
		margin: 0 auto var(--space-lg);
	}

	/*Windows*/
	.windowLeft {
		height: 80%;
		width: 30%;
		float:left;
		overflow: auto;
	}
	.windowRight {
		height: 80%;
		width: 70%;
		float:right;
		overflow: auto;
	}
	.popup{
		position: absolute;
		top: 10%;
	    left: 10%;
		width: 80vw;
		height: 80vh;
	    z-index: 1;
	    overflow: scroll;
	    border: 5px solid var(--c-cream);
	    background: #320C;
	  	border-radius: var(--radius-sm);
	}
	.popup::after {
	    content: "";
	    position: fixed;
		width: 81vw;
		height: 80vh;
	    z-index: -1;
		top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    pointer-events: none;
	}
	.windowTitle {
		font-size: var(--fs-huge);
	    width: 100%;
	    text-align: center;
	    border-bottom: 5px solid var(--c-cream);
	    cursor: pointer;
	    border-radius: var(--radius-sm);
	    background: #320C;
	    display: block;
	    line-height: 2.5;
	
		font-family: var(--font-hand);
		color: var(--c-cream);
		font-weight: bold;
		font-family: var(--font-hand);
		text-shadow: 3px 3px #000A;
	}
	.windowBackdrop {
		background: rgba(25,25,25,0.85);
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		z-index: 4;
	}
	.playerSelf {
		position: absolute;
		height: inherit;
		width: inherit;
	
	}
	.overlayImage {
		position: absolute;
		height: 100%;
		width: inherit;
	
	}
	.thumbFull {
		position: absolute;
		width: inherit;
	}

	/*Inventory Menu*/
	.item {
	    background-color: #00000077;
	    padding: 5%;
		border: 5px solid var(--c-cream);
	    border-radius: var(--radius-sm);
		position: relative;
		font-family: var(--font-title);
		color: #FFFFFF;
		display:grid; 
		grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
		height: 100%;
		width: 100%;
	}
	.itemName {
		font-size: var(--fs-large);
		margin: 0px;
		line-height: 1;
	}
	.itemQuantity {
		font-size: var(--fs-xlarge);
		position: absolute;
		top: 50%;
		left: 5%;
	}
	.itemImage {
	    width: 100%;
		border: 5px solid var(--c-cream);
	    border-radius: var(--radius-sm);
		aspect-ratio:1;
	}

	/*Shop*/
	.shopCategory {
	    background-color: #00000077;
	    padding: 15px 30px;
		border: 5px solid var(--c-cream);
	    border-radius: var(--radius-sm);
		position: relative;
		font-family: var(--font-title);
		color: #FFFFFF;
		display:grid; 
		grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
	}
	.shopCategory:hover {
	    background-color: #00000022;
	    padding: 15px 30px;
		border: 5px solid var(--c-cream);
	    border-radius: var(--radius-sm);
		position: relative;
		font-family: var(--font-title);
		color: #FFFFFF;
		display:grid; 
		grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
	}
	.shopCategoryName {
		font-size: var(--fs-large);
		margin: 0px;
		line-height: 1;
	}
	.phoneSelectionMenu .shop {
		margin: 0px; 
		justify-content:initial; 
		grid-template-columns: 
		repeat(auto-fill, 300px);
	}


	.shopItem {
		cursor: pointer;
		position: block;
		width: 100%;
		background-color: #333333;
		overflow: auto;
	    height: unset;
		display: flex;	
	    align-items: center;
	}
	.shopName {
		font-size: var(--fs-small);
		pointer-events: none;
		float: left;
		color: white;
		left: 30%;
	    flex: 3 1 auto;
	}
	.shopDesc {
		font-size: var(--fs-small);
		pointer-events: none;
		float: left;
		margin-left: 15px;
		color: white;
		padding-top: -10px;
		width: 40%;
		left: 40%;
		flex: 5 1 auto;
	}
	.shopPrice {
		font-size: var(--fs-medium);
		pointer-events: none;
		float: left;
		margin-left: 15px;
		color: white;
		left: 90%;
		width: 5%;
	    flex: 2 1 auto;
	}
	.shopImage {
		pointer-events: none;
		float: left;
		height: 69px;
		width: 69px;
	  	border: 3px solid white;
	  	border-radius: var(--radius-sm);
	    float: right;
	    margin-right: 15px;
	}
	.shopItem>* {
	    margin: 0 15px;
	}

	/**** Logbook ****/
	div.popup, .save {
	    display: flex;
	    flex-wrap: wrap;
		padding: 0px;
		overflow: hidden;
	}
	div.inventory {
	    display: grid;
	}
	.lb_Name{
	color:var(--character-color);
	}
	.logbookLeft .button {
		font-size: var(--fs-large);
	}
	.logbookRight {
		left:20%;
		height: 80%;
		width: 80%;
	    left: unset;
	    padding: 15px;
	    overflow-y: auto;
	    overflow-x: hidden;
	}
	.logbookLeft {
		height: 80%;
		width: 20%;
	    top: unset;
	    padding: 0;
	   overflow-y: scroll;
	    overflow-x: hidden;
	}
	#selfImage {
		float: right;
		width: 100%;
	    max-width: 30%;
		margin: 0 30px;
		position: relative;
	}
	.selfSwitch {
		display: inline;
		cursor: pointer;
	}
	.selfSwitch:hover {
		display: inline;
		cursor: pointer;
	}

	/****Save menu****/
	div#save {
	    flex-flow: column;
	}
	.saveButton, .deleteButton, .loadButton, .saveFileButton, .loadFileButton {
		font-size: var(--fs-small);
	    color: #ffffff; 
	    padding: 15px; 
	    margin-left: 15px; 
	    text-align: center;
	    width: 120px;
	    border: none; 
	    border-bottom: 3px solid #ffffff;
	    border-radius: var(--radius-sm); 
	   	cursor: pointer; 

	}
	.saveSlot {
	padding: 5px 0;
	    height: unset;
	    display: flex;
	    margin: 15px 0;
	    position: relative;
	    background-color: rgba(255,255,255,0.25);
	    flex-direction: row-reverse;
	    justify-content: flex-end;
	    padding-left: 105px;
	    border-radius: var(--radius-sm);
	}
	.saveDate {
		font-size: var(--fs-medium);
	    flex: 5 1;
	}
	.saveList {
	display: flex;
	    flex-direction: column;
	    overflow-y: scroll;
	    width: 100%;
		height: 80%;
		word-wrap: break-word;
	}
	.deleteButton{
		color:#FF0000;
		border-color:#FF0000;
	}
	.saveName, .loadButton, .saveButton, .deleteButton, .loadFileButton, .saveFileButton {
	    position: unset;
	    flex: 1 1 auto;
	    max-width: fit-content;
	    max-height: fit-content;
	    margin: var(--space-sm);

	}
	.saveName {
		font-size: var(--fs-medium);
	position: absolute;
	    left: 30px;
	    width: 75px;
	    margin: auto;
	    display: block;
	    top: 50%;
	    transform: translateY(-50%);
	}

	/***Phone***/
	.phoneTextBox {
		position: relative;
		display: block;
		width: 98%;
	  	min-height: 92px;
		padding: 5px;
		overflow: hidden;
	  	background-color: #111122;
	  	border: 5px solid white;
	  	border-radius: var(--radius-sm);
	}
	.phoneTextBox p {
		margin: 0px;
		padding: 0px;
	}
	.phoneTextThumb {
		position: relative;
	  	display: block;
	    margin: auto;
	  	padding: 1px;
	 	height: 100px;
		width: 100px;
	  	float: left;
		overflow: hidden;
	  	margin: 0px 10px 0px 0px;
	  	border: 3px solid white;
	  	border-radius: var(--radius-sm);
	}
	.phoneTextName {
		color: white;
		margin: 0px;
		padding: 0px;
		font-weight: bold;
	}
	.phonePicture {
	    display: block;
	    margin: auto;
	    max-height: 100%;
	    max-width: 100%;
	      border: 3px solid;
	      border-radius: var(--radius-sm);
	}

	/*** Mobile Ver Stuff ***/
	/*Footer Hiding*/ /*Comment this out in mobile ver*/
	.footer { 
		height: 0%;
		overflow: hidden;
	}
	.footer .switch {
		font-size: 300%;
		height: 100px;
		width: 33%;
		margin: auto;
		margin-top: 50px;
		text-align: center;
		box-sizing: border-box;
		float: left;
	  	border: 3px solid white;
	  	border-radius: var(--radius-sm);
	}
	/*Other*/ /*Comment this out in dekstop ver*/
	/*
	.footerButton {
		height: 10vh;
		text-align: center;
		box-sizing: border-box;
		float: left;
	  	border: 3px solid white;
	  	border-radius: var(--radius-sm);
	    background: rgba(0,0,0,0.75);
	    margin: 15px;
	    border: none;
	    border-bottom: 3px solid grey;
	    border-radius: var(--radius-sm);
	    transition: 0.25s;
	    text-align: center;
		cursor: pointer;
	}
	.footerButton:hover{
	    background: rgba(50,50,50,0.75);
	    color: #ffffff;
	      border: none;
	    border-bottom: 3px solid #FFFFFF;
	}
	img.bigPicture {
	    max-height: 60vh;
	    max-width: 90%;
	}
	div#menu {
	    width: 0px;
	    overflow: hidden;
	    border-right: 0px;
	}
	div#wrapperBG {
	    height: calc(100% + 0px);
	    width: calc(100% + 0px);
	    position: absolute;
	    top: 0;
	    left: 0;
	    z-index: 1;
	    background-repeat: no-repeat;
	    background-size: cover;
	    filter: blur(10px);
	    z-index: -2;
	}
	div#wrapperBG::after {
	    background: rgba(0,0,0,0.75);
	    content: "";
	    position: absolute;
	    height: calc(100% + 0px);
	    width: calc(100% + 0px);
	    z-index: -1;
	}
	.pictureButton, .choiceText{
		font-size: var(--fs-xlarge);
		font-weight: bold;
	    display: block;
	    width: fit-content;
	    margin: 2px;
	}
	.choiceText {
		font-size: var(--fs-xlarge);
		width: 80%;
		margin: auto;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.pictureButton,.pictureButton:hover {
		font-size: var(--fs-xlarge);
	    padding: 2px;
		min-height: 10vh;
	    opacity: 1;
	    border: 0;
	    border-bottom: 3px solid #FFFFFF;
	}
	.playerRoom {
		height: 70vh;
	    width: 90%;
		margin: auto;
	    margin-bottom:30px;
	}
	.button, .choiceText, .shopItem, .logbookSwitch{
		margin-bottom: 15px;
	}
	.flexbox>*{
	    width: 30%;
	    margin: auto;
		margin-top: 30px;
	}
	#restartButton {
	    color: #FF0000;
	    border-color:#FF0000;
	    margin: auto;
	    margin-top: 30px;
	}
	div#output {
		padding: 5px;
	}
	*/

	/*Basic Schema*/
	.dialogueContainer.basic{
		font-size: var(--fs-large);
		position: relative;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		background-color: rgba(0,0,0,0.5);
		border-bottom: 5px solid;
		/* border-color: var(--character-color); */
		margin: 15px 0;
		padding: 15px;
		border-radius: var(--radius-md);
		width: 100%;
		overflow: hidden;
		box-shadow: inset 0 0 20px #000;
		color: #FFFFFF;
		text-shadow: 0px 0px 5px black;
	}
	img.thumbnailImage.basic{
		width: 150px;
		border-radius: var(--radius-md);
		/* box-shadow: -5px 5px var( --character-color); */
		flex: none;
		object-fit: cover;
		object-position: 100% 0;
		position:absolute;
	}
	p.textName.basic{
		font-size: var(--fs-large);
		margin: 0px;
		padding: 0px;
		font-weight: bold;
		text-shadow: 3px 3px black, 0px 0px 5px black;
	}
	.thumbnailBorder.basic {
		height:150px;
		width: 150px;
		margin-right: 30px;
	}

	/*Lobotomy Schema*/
	p.lobotomyText {
		font-size: var(--fs-large);
		margin: 30px 0px;
		font-family: var(--font-body);
		font-style: normal;
	}
	.dialogueContainer.lobotomy {
		position: relative;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    background-color: rgba(0,0,0,0.9);
		border: solid 5px;
	    margin: 15px 0;
	    padding: 0px;
	    width: 100%;
		overflow: hidden;
		-moz-transform: skew(-5deg, 0deg);
		-webkit-transform: skew(-5deg, 0deg);
		-o-transform: skew(-5deg, 0deg);
		-ms-transform: skew(-5deg, 0deg);
		transform: skew(-5deg, 0deg);
	}
	.textName.lobotomy {
		font-size: var(--fs-large);
		font-weight: bold;
	    text-align: center;
		font-family: var(--font-display);
		-moz-transform: skew(5deg, 0deg);
		-webkit-transform: skew(5deg, 0deg);
		-o-transform: skew(5deg, 0deg);
		-ms-transform: skew(5deg, 0deg);
		transform: skew(5deg, 0deg);
		margin-bottom: 0px;
		color: black;
		margin: 15px 0;
		text-align: left;
	}
	img.thumbnailImage.lobotomy {
	    width: 135px;
	    /*box-shadow: -5px 5px var( --character-color);*/
	    flex: none;
		-moz-transform: scale(0.9) skew(5deg, 0deg);
		-webkit-transform: scale(0.9) skew(5deg, 0deg);
		-o-transform: scale(0.9) skew(5deg, 0deg);
		-ms-transform: scale(0.9) skew(5deg, 0deg);
		transform: scale(0.9) skew(5deg, 0deg);
		margin-top: -1px;
		object-fit: cover;
		object-position: 100% 0;
		position:absolute;
	}
	.thumbnailBorder.lobotomy {
		height:135px;
	}
	.textContainer.lobotomy {
		font-size: var(--fs-large);
		font-family: var(--font-body);
		font-style: normal;
		-moz-transform: skew(5deg, 0deg);
		-webkit-transform: skew(5deg, 0deg);
		-o-transform: skew(5deg, 0deg);
		-ms-transform: skew(5deg, 0deg);
		transform: skew(5deg, 0deg);
	}
	.thumbnailContainer.lobotomy {
	    display: inline-block;
	    width: 130px;
		margin-right: 40px;
		margin-left: 30px;
	}
	.thumbnailContainer.lobotomyBorder {
	    height: 127px;
	    width: 135px;
		background-color: #000000;
	    margin-right: 30px;
	    margin-left: 10px;
		-moz-transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-o-transform: scale(1.1);
		-ms-transform: scale(1.1);
		transform: scale(1.1);
	}
	.choiceTextLobotomy {
		font-size: var(--fs-xlarge);
		padding: 0px;
		margin: 0px;
		font-family: var(--font-body);
		font-weight: normal;
	}
	.choiceTextLobotomy:hover{
	}
	.choiceFrameLobotomy{
		font-size: var(--fs-large);
	    background: rgba(0,0,0,0.75);
	    padding: 15px;
	    margin: 15px;
	    transition: 0.25s;
	    text-align: center;
		cursor: pointer;
		font-weight: bold;
	    display: block;
	    width: fit-content;
	    max-width: 30vw;
	    margin: 15px auto;
		border: solid 5px;
	}

	.choiceFrameLobotomy:hover{
	    background: rgba(50,50,50,0.75);
	    color: #ffffff;
		border-color: rgba(50,50,50,0.75);
	}

	.dialogueContainer.lobotomy p.switch {
	    color: var(--c-cyan);
		cursor: pointer;
	}
	.dialogueContainer.lobotomy p.switch::before {
	    content: '\027A4';
	    padding-right: 5px;
		cursor: pointer;
	}

	/*Persona Schema*/
	.dialogueContainer.persona {
		position: relative;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    margin: 15px 0;
	    padding: 0px;
	    width: 100%;
		overflow: hidden;
	}
	img.thumbnailImage.persona {
	    width: 150px;
	    /*box-shadow: -5px 5px var( --character-color);*/
	    flex: none;
		object-fit: cover;
		object-position: 100% 0;
		position:absolute;
	}
	.textContainer.persona {
		font-size: var(--fs-large);
		font-family: var(--font-body);
		font-style: normal;
		margin-left: 60px;
	}
	.thumbnailContainer.persona {
	    display: inline-block;
	    width: 150px;
		box-shadow: 0px 5px;
	    border-radius: 15px/5%;
		margin-bottom: 5px;
		overflow: hidden;
		background: #0003;
		flex-shrink: 0;
	}
	.thumbnailBorder.persona {
		width:150px;
		height:150px;
		position: relative; 
	}
	.nameContainer.persona {
		-moz-transform: skew(3deg, 0deg);
		-webkit-transform: skew(3deg, 0deg);
		-o-transform: skew(3deg, 0deg);
		-ms-transform: skew(3deg, 0deg);
		transform: skew(3deg, 0deg);
		padding-bottom: 3px;
	}
	.nameContent.persona {
		font-size: var(--fs-large);
		-moz-transform: skew(-3deg, 0deg);
		-webkit-transform: skew(-3deg, 0deg);
		-o-transform: skew(-3deg, 0deg);
		-ms-transform: skew(-3deg, 0deg);
		transform: skew(-3deg, 0deg);
		font-weight: bold;
		font-family: var(--font-display);
		z-index: 1;
	}
	.textNamePersonaBlack{
		border:solid 44px #000;
		position:absolute;
		margin:-68px 0 0 115px;
		transform: scaleX(3.8) scaleY(.5);
		z-index: -1;
	}
	.textNamePersonaWhite{
		border:solid 44px #fff;
		position:absolute;
		margin:-68px 0 0 115px;
		transform: scaleX(3.9) scaleY(.6);
		z-index: -2;
	}
	.personaNameArrow{
		border:solid 32px transparent;
		border-right-color:#000;
		position:absolute;
		margin:-26px 0 0 -88px;
		transform: scaleX(2) scaleY(.5);
	}
	.personaNameArrowShadow{
		border:solid 32px transparent;
		border-right-color:#fff;
		position:absolute;
		margin:-26px 0 0 -90px;
		transform: scaleX(2.2) scaleY(.7);
		z-index:-2;
	}
	.textContent.persona {
		border: 3px solid white;
		background-color: #000;
		padding-left: 19px;
		padding-right: 19px;
		margin-left: 3px;
		margin-top: -9px;
	}

	.choiceTextPersona {
		font-size: var(--fs-large);
		padding: 0px;
		margin: 0px;
		font-family: var(--font-body);
		font-weight: normal;
	}
	.choiceTextPersona:hover{
	}
	.choiceFramePersona{
		font-size: var(--fs-large);
	    background: #000000;
	    color: #ffffff;
	    padding: 15px;
	    margin: 15px;
	    transition: 0.25s;
	    text-align: center;
		cursor: pointer;
		font-weight: bold;
	    display: block;
	    width: fit-content;
	    max-width: 30vw;
	    margin: 15px auto;
		border: solid 5px;
	}

	.choiceFramePersona:hover{
	    background: #ffffff;
	    color: #000000;
		border-color: #000000;
	}

	.dialogueContainer.persona p.switch {
	    color: var(--c-cyan);
		cursor: pointer;
	}
	.dialogueContainer.persona p.switch::before {
	    content: '\027A4';
	    padding-right: 5px;
		cursor: pointer;
	}

	.personaMenuButton {
		font-size: var(--fs-large);
		letter-spacing: .2em;
	    background: #000000;
	    color: #ffffff;
		border: solid 3px #ffffff;
	    padding: 15px;
	    margin: 15px;
		border: solid 3px #ffffff;
		border-radius: 0px;
	    transition: 0.25s;
	    text-align: center;
		cursor: pointer;
		-moz-transform: skew(5deg, 0deg);
		-webkit-transform: skew(5deg, 0deg);
		-o-transform: skew(5deg, 0deg);
		-ms-transform: skew(5deg, 0deg);
		transform: skew(5deg, 0deg);
	}
	.personaMenuButton:hover{
	    background: rgba(0,0,0);
	    filter:invert(1);
	}
	.pictureButtonPersona{
		font-size: var(--fs-large);
		letter-spacing: .2em;
		display: block;
		position: absolute;
	    background: #000000;
	    color: #ffffff;
		border: solid 3px #ffffff;
		font-weight: bold;
	    display: block;
	    width: fit-content;
	    margin: 15px auto;
	    padding: 15px;
	    margin: 15px;
	    border: 3px solid;
	    transition: 0.25s;
	    text-align: center;
		cursor: pointer;
		-moz-transform: skew(3deg, 0deg);
		-webkit-transform: skew(3deg, 0deg);
		-o-transform: skew(3deg, 0deg);
		-ms-transform: skew(3deg, 0deg);
		transform: skew(3deg, 0deg);
	}
	.pictureButtonPersona:hover {
	    padding: 15px;
	    background: #ffffff;
	    color: #000000;
		border: solid 3px #000000;
	}


	#buttonMenu {
		display:inline-block;
	}
	/*Royalty Schema*/
	/*Royalty Schema*/
	.dialogueContainer.royalty {
		position: relative;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    margin: 5px 0;
	    padding: 0px;
	    width: 100%;
		overflow: hidden;
	}
	img.thumbnailImage.royalty {
	    width: 150px;
	    /*box-shadow: -5px 5px var( --character-color);*/
	    flex: none;  
		-webkit-filter:grayscale(0.9);
		filter: grayscale(0.9);
		object-fit: cover;
		object-position: 100% 0;
		position:absolute;
	}
	.textContainer.royalty {
		font-size: var(--fs-large);
		font-family: var(--font-body);
		font-style: normal;
		margin-top: 5px;
		width: 90%;
	}
	.thumbnailContainer.royalty {
	    display: inline-block;
	    width: 160px;
		overflow: hidden;
	}
	.nameContainer.royalty {
		width:150px;
		background-color: #000C;
		border: 3px solid;
		border-radius: var(--radius-sm);
		/*z-index:1;*/
		position: absolute;
		bottom: 0px;
	}
	.nameContent.royalty {
		font-size: var(--fs-large);
		font-family: marker, norwester, times new roman, sans-serif;
		z-index: 1;
		margin: auto;
		text-align: center;
	}
	.textBorder.royalty {
	    width: 100%;
		border: 3px solid white;
		border-radius: var(--radius-sm);
		background-color: #000;
		padding: 0px 15px;
		min-height: 150px;
	}
	.thumbnailBorder.royalty {
		width:150px;
		height:150px;
	}
	.textContainer.royalty p {
		font-size: var(--fs-large);
		font-family: railway;
		line-height: 1.2;
		margin: 0px;
	}

	.choiceTextRoyalty {
		font-size: var(--fs-large);
		padding: 0px;
		margin: 0px;
		font-family: var(--font-body);
		font-weight: normal;
	}
	.choiceTextRoyalty:hover{
	}
	.choiceFrameRoyalty{
		font-size: var(--fs-large);
	    background: #000000;
	    color: #ffffff;
	    padding: 15px;
	    margin: 15px;
	    transition: 0.25s;
	    text-align: center;
		cursor: pointer;
		font-weight: bold;
	    display: block;
	    width: fit-content;
	    max-width: 30vw;
	    margin: 15px auto;
		border: solid 5px;
	}

	.choiceFrameRoyalty:hover{
	    background: #ffffff;
	    color: #000000;
		border-color: #000000;
	}

	.dialogueContainer.royalty p.switch {
	    color: var(--c-cyan);
		cursor: pointer;
	}
	.dialogueContainer.royalty p.switch::before {
	    content: '\027A4';
	    padding-right: 5px;
		cursor: pointer;
	}

	.royaltyMenuButton {
	    background: #000000;
	    color: #ffffff;
		border: solid 3px #ffffff;
	    padding: 15px;
	    margin: 15px;
		border: solid 3px #ffffff;
		border-radius: 0px;
	    transition: 0.25s;
	    text-align: center;
		cursor: pointer;
	}
	.royaltyMenuButton:hover{
	    background: #ffffff;
	    color: #000000;
		border: solid 3px #000000;
	}
	.pictureButtonRoyalty{
		font-size: var(--fs-large);
		display: block;
		position: absolute;
	    background: #000000;
	    color: #ffffff;
		border: solid 3px #ffffff;
		font-weight: bold;
	    display: block;
	    width: fit-content;
	    margin: 15px auto;
	    padding: 15px;
	    margin: 15px;
	    border: 3px solid;
	    transition: 0.25s;
	    text-align: center;
		cursor: pointer;
		-moz-transform: skew(3deg, 0deg);
		-webkit-transform: skew(3deg, 0deg);
		-o-transform: skew(3deg, 0deg);
		-ms-transform: skew(3deg, 0deg);
		transform: skew(3deg, 0deg);
	}
	.pictureButtonRoyalty:hover {
	    padding: 15px;
	    background: #ffffff;
	    color: #000000;
		border: solid 3px #000000;
	}

	/*Syrup Schema*/
	.dialogueContainer.syrup {
		font-size: var(--fs-large);
		position: relative;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    background-color: rgba(50,30,0,0.8);
		border: 5px solid var(--c-cream);
		color: #FFFFFF;
	    margin: 15px 0;
	    border-radius: var(--radius-md);
	    width: 100%;
		overflow: hidden;
		font-family: var(--font-hand);
		box-shadow: 11px 11px #000A,
					0 0 20px 2px #000A;
		z-index: 0;
	}
	.textContainer.syrup {
		/*added so in the case of ever having so much dialog that it would extend over the picture, it aligns neatly at the right to the picture as demosntrated in example1.jpg.*/
	}
	.syrup .switch {
		font-size: var(--fs-small);
	    color: var(--c-blue);
		cursor: pointer;
		text-shadow: 2px 2px #00355A;
		-webkit-text-stroke: 1px #036A;
		font-family: var(--font-title);
		line-height: 1.2;
		margin: 0px;
	}
	.syrup .switch::before {
	    content: '\027A4';
	    padding-right: 5px;
		cursor: pointer;
	}
	.syrup .switch:hover {
	    color: #ffffff;
	}
	.dialogueDivider.syrup {
		height: 20px;
		width: 300px;
		margin-top: 5px;
		margin-bottom: -5px;
		filter: drop-shadow(3px 3px #000A);
	}
	.dialogueBackground.syrup {
		height: 150px;
		position: absolute;
		width: 225px;
		right: 15px;
		top: 15px;
		z-index: -1;
	}
	.thumbnailBorder.syrup {
		width:150px;
		height:150px;
	}
	img.thumbnailImage.syrup {
	    width: 150px;
	    border-radius: var(--radius-md);
	    /*box-shadow: -5px 5px var( --character-color);*/
	    flex: none;
		object-fit: cover;
		object-position: 100% 0px;
		position:absolute;
	}
	.textContainer.syrup p {
		font-size: var(--fs-xlarge);
		font-family: var(--font-title);
		line-height: 1.2;
		margin: 0px;
	}

	p.textName.syrup {
		font-size: var(--fs-huge);
		color: var(--c-cream);
		margin: 0px;
		padding: 0px;
		font-weight: bold;
		font-family: var(--font-hand);
		text-shadow: 3px 3px #000A;
		line-height: 1;
	}

	.textContainer.syrup .switch {
		font-size: var(--fs-xlarge);
	    /*font-size: var(--fs-small);*/
	}
	.textContainer.syrup .status {
		font-size: var(--fs-xlarge);
	}
	p.rawTextSyrup {
	    margin-bottom: 45px;
		font-family: var(--font-hand);
	}
	.specialTextSyrup {
		font-size: var(--fs-small);
	    color: #1ce01c;
	    font-weight: bold;
	    margin-bottom: 45px;
	    text-align: center;
		font-family: var(--font-hand);
	}
	hr.syrup {
		border: none;
		margin-top: 0px;
		margin-bottom: 0px;
	}
	.textDivider.syrup {
		border: 5px solid var(--c-cream);
		border-radius: 50%;
	}

	.titleCard {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0vh;
		left: 0vw;
	}
	.titleBackboard {
		position:absolute;
		transition: top 2s;
		transition-timing-function: ease;
		top: -100%;
		height:100vh;
		width:100vw;
		left:0%;
	}
	.titleButton {
		position:absolute;
		transition: top 2s;
		transition-timing-function: ease;
		left:38vw;
		top: 200%;
		cursor:pointer;
		width: 20%;
	}
	.titleButton:hover {
		filter:brightness(70%);
	}
	:root {
		--scaleX: calc(100vw/1200);
		--scaleY: calc(100vh/800);
	}
  
	.titleLetter {
		font-family: var(--font-hand);
		color: var(--c-cream);
		position:absolute;
		top: 0vh;
		left: 0vw;
		rotate: 0deg;
		transition: top 0.1s, rotate 0.1s;
		transition-timing-function: linear;
		font-size: 7vw;
		font-weight:bold;
		transform: scale((--scaleX), (--scaleY));
	}

	.cardImage {
		position:absolute;
		top: 15%;
		left: 5%;
		width: 90%;
		height: 83%;
		object-fit: fill;
		object-position: 100% 0px;
	}
	.flip-card {
	  background-color: transparent;
	  width: 100%;
	  height: 100%;
	  perspective: 1000px;
	  color:white;
	}

	.flip-card-inner {
	  position: relative;
	  width: 100%;
	  height: 100%;
	  text-align: center;
	  transition: transform 0.6s;
	  transform-style: preserve-3d;
	  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	}
	.flipping .flip-card-inner {
	  transform: rotateY(180deg);
	}

	.board .cardStatBlock {
		font-size:2vw;
	}

	.cardStatBlock{
		font-size:3vw;
		position: absolute;
		top:0px;
		left:0px;
		height:100%;
		width:100%;
		z-index: 1;
		transition: transform 0.6s;
		filter: drop-shadow(-2px 2px 0 black) drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black) drop-shadow(2px -2px 0 black);
		-webkit-filter: drop-shadow(-2px 2px 0 black) drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black) drop-shadow(2px -2px 0 black);
	}

	.flipping .cardStatBlock {
		transform: rotateY(180deg);
	}

	.flip-card-front, .flip-card-back {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  -webkit-backface-visibility: hidden;
	  backface-visibility: hidden;
	}

	.flip-card-front {
		background: linear-gradient(306deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 9%, rgba(0,212,255,1) 100%); 
	}

	.flip-card-back { 
		background: linear-gradient(306deg, rgba(2,0,36,1) 0%, rgba(121,9,9,1) 13%, rgba(255,119,119,1) 100%); 
		transform: rotateY(180deg);
	}

	.shimmer {
	  display:inline-block;
	  -webkit-mask:linear-gradient(-60deg,#000 10%,#0005,#000 90%) right/1000% 100%;
	  background-repeat: no-repeat;
	  animation: shimmer 2.5s infinite;
	  font-size: 50px;
	}

	@keyframes shimmer {
	  100% {-webkit-mask-position:left}
	}

	.cardFrame {
		position:absolute; 
		top:0px; 
		left:0px; 
		width:100%;
		height:100%;
	}

	.hand{
		display:grid; 
		grid-template-columns: repeat(auto-fill, 15vw);
		gap: 1vw;
	}
	#logbookGridHolder .flip-card-inner{
		height: 30vw;
		width: 15vw;
	}
	/* Trophies (#achievements): responsive grid that SIZES CARDS TO AVAILABLE SPACE — 5 columns on desktop landscape,
	   3 on mobile landscape (override in the small-landscape block). Overrides .hand's fixed repeat(auto-fill,15vw),
	   which caused the "fits 5, leftover whitespace for a 6th" layout. Cards fill the cell and keep their 2:1 tall shape. */
	#achievements { grid-template-columns: repeat(5, 1fr); }
	#achievements .flip-card-inner { width: 100%; height: auto; aspect-ratio: 1 / 2; }
	#achievements p {
		position: relative;
		z-index: 1;
		width: 88%;
		text-align: center;
		font-family: var(--font-hand);
		line-height: 1.3;
		margin: auto;
		margin-top: 10%;
		color: #55ccee;
		text-shadow: 3px 3px black;
		background: #0007;
	}
	.achievementName {
		font-size: var(--fs-huge);
		border-radius: 60%;
	}
	.achievementText {
		font-size: var(--fs-xlarge);
		border-radius: 15%;
	}

	.buttonGrid {
		display:grid;
		grid-template-columns:auto auto auto auto auto;
	}
	.galleryGrid {
		display:grid;
		grid-template-columns:repeat(3, auto);
	}
	#galleryGrid {
		display:grid;
		grid-template-columns:repeat(3, 1fr);
	}

	.progressbar {
	  background-color: black;
	  border-radius: 13px;
	  /* (height of inner div) / 2 + padding */
	  padding: 3px;
	}

	.progressbar>div {
	  background-color: orange;
	  width: 40%;
	  /* Adjust with JavaScript */
	  height: 20px;
	  border-radius: 10px;
	}

	.gridInventory {
		display: grid;
		gap: 1rem;
		grid-template-columns: repeat(3, minmax(240px, .4fr));
	}

	.gridHolder {
		overflow: auto;
		height: 80%;
	}

	.phoneSelectionBox{
		position: relative;
		background-color: rgba(0,0,0,0.5);
		border-bottom: 5px solid;
		/* border-color: var(--character-color); */
		margin: 15px 0;
		padding: 15px;
		border-radius: var(--radius-md);
		width: 100%;
		overflow: hidden;
		box-shadow: inset 0 0 20px #000;
	}

	.phoneSelectionMenu {
		display: grid;
		gap: 1.5rem;
		grid-template-columns: repeat(auto-fill, 30%);
		margin-top: 1.5rem;
		justify-content: center;
	}
	.phoneSelectionMenu.logbook {
		grid-template-columns: repeat(auto-fill, 200px);
	}
	.phoneSelectionMenu .textBox {
		padding: 0px;
		height: 320px;
		display: block;
		cursor: pointer;
	  	border: 3px solid white;
		border-radius: 25px;
		position: relative;
		overflow: hidden;
	}
	.phoneSelectionMenu .textBox:hover {
		background: rgba(50,50,50,0.75);
	    color: #ffffff;
	    border-bottom: 3px solid #FFFFFF;
		cursor: pointer;
	}
	.phoneSelectionMenu .phoneTextThumb {
		position: relative;
	  	display: block;
	    margin: auto;
	  	padding: 1px;
		width: 100%;
		height: 100%;
	  	float: left;
		overflow: hidden;
	  	margin: 0px 10px 0px 0px;
	  	border: 3px solid white;
	  	border-radius: var(--radius-sm);
		height: 200px;
	}
	.selectionMenuText {
		font-size: var(--fs-medium);
		margin: auto;
		border: none;
		font-weight: bold;
		display: block;
		width: fit-content;
		text-align: center;
	}
	.phoneSelectionMenu .pictureButton, .phoneSelectionMenu .choiceText {
		margin: auto;
		border: none;
	}
	.phoneSelectionMenu .pictureButton, .choiceText:hover {
	    padding: 15px;
	    border: 0;
		opacity: 1;
	}

	#phoneGridHolder img.textThumb {
		border-radius: 0px;
		border: none;
		border-bottom: 3px solid white;
	}
	#phoneGridHolder .phoneSelectionMenu .textBox {
		color: black;
		border-radius: var(--radius-md);
		border-bottom: 3px solid white;
	}

	#logbookGridHolder .selectionMenuText {
		font-size: var(--fs-xlarge);
		transform: skew(-15deg, -15deg);
		width: 145%;
		margin-top: 230px;
		margin-left: -40px;
		background: #000000A0;
		height: 40px;
		line-height: 40px;
		font-family: var(--font-hand);
	}

	#logbookGridHolder .phoneSelectionMenu img.textThumb {
		margin-right: 0px;
		margin-left: -15px;
		width: 225px;
		position: absolute;
	}
	p.selfDesc{
		font-size: var(--fs-xlarge);
		font-family: var(--font-title);
		line-height: 1.2;
		color: white;
	}

	.selectionMenuCrown {
		font-size: var(--fs-huge);
		color: #FFFFFF;
		position: absolute;
		bottom: 154px;
		/* background: black; */
		height: 39px;
		padding-top: 9px;
		border-radius: var(--radius-md);
		font-weight: bold;
		text-shadow: 2px 2px black;
	}

	.button3
	{
	  border-radius: 20px;
	  padding: 10px 15px;
	  color: #000;
	  font-weight: bold;
	  background: var(--c-mauve);
	  background: -moz-linear-gradient(top,  var(--c-mauve) 0%, var(--c-pink) 70%, var(--c-mauve) 100%);
	  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,var(--c-mauve)), color-stop(70%,var(--c-pink)), color-stop(100%,var(--c-mauve)));
	  background: -webkit-linear-gradient(top,  var(--c-mauve) 0%,var(--c-pink) 70%,var(--c-mauve) 100%);
	  background: -o-linear-gradient(top,  var(--c-mauve) 0%,var(--c-pink) 70%,var(--c-mauve) 100%);
	  background: -ms-linear-gradient(top,  var(--c-mauve) 0%,var(--c-pink) 70%,var(--c-mauve) 100%);
	  background: linear-gradient(to bottom,  var(--c-mauve) 0%,var(--c-pink) 70%,var(--c-mauve) 100%);
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--c-mauve)', endColorstr='var(--c-mauve)',GradientType=0 );
	}
	.button3:active
	{
	  color: #000;
	  background: var(--c-pink);
	  background: -moz-linear-gradient(top,  var(--c-pink) 0%, var(--c-pink) 70%, var(--c-pink) 100%);
	  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,var(--c-pink)), color-stop(70%,var(--c-pink)), color-stop(100%,var(--c-pink)));
	  background: -webkit-linear-gradient(top,  var(--c-pink) 0%,var(--c-pink) 70%,var(--c-pink) 100%);
	  background: -o-linear-gradient(top,  var(--c-pink) 0%,var(--c-pink) 70%,var(--c-pink) 100%);
	  background: -ms-linear-gradient(top,  var(--c-pink) 0%,var(--c-pink) 70%,var(--c-pink) 100%);
	  background: linear-gradient(to bottom,  var(--c-pink) 0%,var(--c-pink) 70%,var(--c-pink) 100%);
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--c-pink)', endColorstr='var(--c-pink)',GradientType=0 );
	}

	.overlay {
		position: absolute;
		cursor: pointer; 
		object-fit: cover;
		object-position: 100% 0px;
		filter:opacity(80%);
	}
	.overlay:hover {
		filter:opacity(100%);
	}
	.ghost {
		position: absolute;
		cursor: pointer; 
		aspect-ratio: 1;
		object-fit: cover;
		object-position: 100% 0px;
		filter:opacity(60%);
		transform: scale(1.3);
	}
	.ghost:hover {
		filter:brightness(150%);
	}

	@-webkit-keyframes pulseBox {
	  0% {-webkit-box-shadow: 0px 0px 10px 0px rgba(222, 147, 172, 0.6);}
	  100% {-webkit-box-shadow: 0px 0px 18px 0px rgba(222, 147, 172, 0.9);}
	}
	@-moz-keyframes pulseBox {
	  0% {-moz-box-shadow: 0px 0px 10px 0px rgba(222, 147, 172, 0.6);}
	  100% {-moz-box-shadow: 0px 0px 18px 0px rgba(222, 147, 172, 0.9);}
	}
	@-o-keyframes pulseBox {
	  0% {-o-box-shadow: 0px 0px 10px 0px rgba(222, 147, 172, 0.6);}
	  100% {-o-box-shadow: 0px 0px 18px 0px rgba(222, 147, 172, 0.9);}
	}
	@keyframes pulseBox {
	  0% {box-shadow: 0px 0px 10px 0px rgba(222, 147, 172, 0.6);}
	  100% {box-shadow: 0px 0px 18px 0px rgba(222, 147, 172, 0.9);}
	}

	.pulseBox {
	  -webkit-animation-name: pulseBox;
	  -moz-animation-name: pulseBox;
	  -o-animation-name: pulseBox;
	  animation-name: pulseBox;
	  -webkit-animation-duration: 1s;
	  -moz-animation-duration: 1s;
	  -o-animation-duration: 1s;
	  animation-duration: 1s;
	  -webkit-animation-iteration-count: infinite;
	  -moz-animation-iteration-count: infinite;
	  -o-animation-iteration-count: infinite;
	  animation-iteration-count: infinite;
	  -webkit-animation-direction: alternate;
	  -moz-animation-direction: alternate;
	  -o-animation-direction: alternate;
	  animation-direction: alternate;
	  -webkit-animation-timing-function: ease-in-out;
	  -moz-animation-timing-function: ease-in-out;
	  -o-animation-timing-function: ease-in-out;
	  animation-timing-function: ease-in-out;
	  border: 0px;
	}

	@-webkit-keyframes pulseText {
	  0% {text-shadow: 0px 0px 8px rgba(222, 147, 172, 0.7);}
	  100% {text-shadow: 0px 0px 22px rgba(222, 147, 172, 1);}
	}
	@-moz-keyframes pulseText {
	  0% {text-shadow: 0px 0px 8px rgba(222, 147, 172, 0.7);}
	  100% {text-shadow: 0px 0px 22px rgba(222, 147, 172, 1);}
	}
	@-o-keyframes pulseText {
	  0% {text-shadow: 0px 0px 8px rgba(222, 147, 172, 0.7);}
	  100% {text-shadow: 0px 0px 22px rgba(222, 147, 172, 1);}
	}
	@keyframes pulseText {
	  0% {text-shadow: 0px 0px 8px rgba(222, 147, 172, 0.7);}
	  100% {text-shadow: 0px 0px 22px rgba(222, 147, 172, 1);}
	}

	.pulseText {
	  -webkit-animation-name: pulseText;
	  -moz-animation-name: pulseText;
	  -o-animation-name: pulseText;
	  animation-name: pulseText;
	  -webkit-animation-duration: 0.8s;
	  -moz-animation-duration: 0.8s;
	  -o-animation-duration: 0.8s;
	  animation-duration: 0.8s;
	  -webkit-animation-iteration-count: infinite;
	  -moz-animation-iteration-count: infinite;
	  -o-animation-iteration-count: infinite;
	  animation-iteration-count: infinite;
	  -webkit-animation-direction: alternate;
	  -moz-animation-direction: alternate;
	  -o-animation-direction: alternate;
	  animation-direction: alternate;
	  -webkit-animation-timing-function: ease-in-out;
	  -moz-animation-timing-function: ease-in-out;
	  -o-animation-timing-function: ease-in-out;
	  animation-timing-function: ease-in-out;
	  border: 0px;
	}

	#puzzle-container {
		position: relative;
		border: 2px solid #000;
	}
	.puzzle-piece {
		position: absolute;
		cursor: pointer;
	}

	.dungeonTile {
		background-color: #000A;
	}
	.dungeonTile.red {
		background-color: #A007;
	}
	.dungeonTile.green {
		background-color: #0A07;
	}
	.dungeonTile.blue {
		background-color: #00A7;
	}
	.dungeonTile.wild {
		background-color: #ccc7;
	}
	.dungeonTile.shop {
		background-color: #FFBF0077;
	}
	.dungeonTile.chest {
		background-color: #FF00BF77;
	}
	.dungeonTile.random {
		background-color: #7F00FF77;
	}
	.dungeonTile.boss {
		background-color: #A00;
	}
	.accessoryTextBox {

	}
	.accessoryText {
		font-size: var(--fs-xlarge);
		position:absolute;
		transform: skew(-15deg, -15deg);
		width: 145%;
		text-align: center;
		margin-left: -40px;
		margin-top: 400px;
		z-index:1;
		background: #000000A0;
		height: 40px;
		line-height: 40px;
		font-family: var(--font-hand);
	}

	/*Webui stuff*/
	/* Shared container for layout */
	#resultArea {
	  width: 55%;
	  height: 80vh;
	  overflow-y: auto;
	  background: #111;
	  padding: 10px;
	  box-sizing: border-box;
	  float:right;
	}

	/* Style for all prompt fields */
	.mobilePromptInput {
		font-size: var(--fs-medium);
	  width: 40%;
	  padding: 10px;
	  margin-bottom: 10px;
	  border: 2px solid #555;
	  background: #222;
	  color: white;
	  box-sizing: border-box;
	  resize: none;
	  height: 30vh;
	  float:left;
	}

	/* Keep the generate button touch-friendly */
	.mobileGenerateButton {
		font-size: var(--fs-medium);
	  width: 100%;
	  padding: 12px;
	  background: limegreen;
	  color: black;
	  font-weight: bold;
	  border: none;
	  margin-top: 10px;
	  border-radius: 10px;
	}
	.mobileResetButton {
		font-size: var(--fs-medium);
	  width: 24%;
	  padding: 12px;
	  background: red;
	  color: black;
	  font-weight: bold;
	  border: none;
	  margin-top: 10px;
	  border-radius: 10px;
	}

	.mobileBatchSize {
		width: 100%;
		display: flex;
		margin: auto;
	}
	.mobileSizeSelect {
		width: 100%;
		display: flex;
		margin: auto;
	}
	.unselectable {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.newKeyword {
		color: #9bffa8;
	}
	.removedKeyword {
		color: #ff5227;
	}

	.modUploadWrapper{
	    width:100%;
	    display:flex;
	    justify-content:center;
	    margin-top:30px;
	}

	.modUploadZone{
		font-size: var(--fs-medium);
	    width:420px;
	    height:160px;

	    display:flex;
	    align-items:center;
	    justify-content:center;

	    text-align:center;
	    white-space:pre-line;

	    font-weight:bold;

	    background:#665533CC;
	    border-radius:30px;
	    border-bottom:4px solid var(--c-gold);

	    color:var(--c-blue);
	    text-shadow:2px 2px #00355A;

	    cursor:pointer;
	    transition:0.25s;

	    outline:3px dashed var(--c-gold);
	    outline-offset:-10px;
	}

	.modUploadZone:hover{
	    transform:scale(1.05);
	}

	.modUploadZone.dragHover{
	    background:#776644CC;
	    outline:3px dashed var(--c-blue);
	}

	.search-results-dropdown {
	    position: absolute;
	    width: 100%;
	    max-height: 200px;
	    overflow-y: auto;
	    background: #2a2a2a;
	    border: 2px solid var(--c-cyan);
	    z-index: 100;
	}
	.search-row {
	    padding: 8px;
	    cursor: pointer;
	    border-bottom: 1px solid #444;
	}
	.search-row:hover {
	    background: #3a3a3a;
	    color: var(--c-cyan);
	}
	.item-insert-card h3 {
		font-size: var(--fs-small);
	    margin: 0 0 10px 0;
	    color: #f1c40f;
	}

	/* Add this to your stylesheet */
	.card-delete-btn {
	    background: none;
	    border: none;
	    outline: none;
	    transition: transform 0.1s ease;
	}

	.card-delete-btn:hover {
	    transform: scale(1.2);
	    color: #ff5f5f; /* Give it a little pop on hover */
	}

	/* Make the nested container slightly smaller than the parent */
	.dialogueContainer.syrup .dialogueContainer.syrup {
	    width: 95%;
	    margin: 10px auto;
	    background-color: rgba(30, 20, 0, 0.9); /* Slightly darker to create depth */
	    box-shadow: 5px 5px #0008; /* Smaller shadow for the nested child */
	}




	/* The main workspace */
	/* Container for the whole editor space */
	.syrup-editor-space {
	    display: flex;
	    flex-direction: column;
	    gap: 20px;
	    width: 100%;
	    box-sizing: border-box;
	}

	/* Individual Scene/Event Window */
	.syrup-window {
	    background-color: rgba(50,30,0,0.8);
	    border: 5px solid var(--c-cream);
	    border-radius: var(--radius-md);
	    color: #FFFFFF;
	    font-family: var(--font-hand);
	    display: flex;
	    flex-direction: column;
	    overflow: hidden;
	    box-shadow: 11px 11px #000A, 0 0 20px 2px #000A;
		transition: max-height 0.3s ease;
	}

	/* Sticky Headers and Footers */
	.syrup-header-upper, .syrup-footer-upper {
	    position: sticky;
	    z-index: 10;
	    background-color: rgba(50,30,0,0.8);
	    padding: 10px 15px;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}
	.syrup-header-upper { top: 0; border-bottom: 3px solid var(--c-cream); }
	.syrup-footer-upper { bottom: 0; border-top: 3px solid var(--c-cream); justify-content: center; gap: 15px; }

	/* Dynamic Content Areas */
	.syrup-header-lower {
	    background-color: rgba(255,255,255,0.1);
	    padding: 10px 15px;
	    border-bottom: 2px solid var(--c-cream);
	    display: flex;
	    flex-wrap: wrap;
	    gap: 10px;
	}
	.syrup-contents {
	    padding: 15px;
	    overflow-y: auto; /* Allows scrolling inside the buffer */
	    flex-grow: 1;
	}
	.syrup-footer-lower {
	    background-color: rgba(0,0,0,0.5);
	    padding: 5px 15px;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}

	/* Inputs and Buttons */
	.syrup-textarea {
		font-size: var(--fs-large);
	    width: 100%;
	    min-height: 200px;
	    background-color: rgba(50,30,0,0.8);
	    color: var(--c-cream);
	    border-radius: 8px;
	    border: 2px solid #509cea;
	    padding: 10px;
	    box-sizing: border-box;
	}
	.syrup-btn {
	    background-color: var(--c-cream);
	    color: #503200;
	    border: none;
	    padding: 8px 15px;
	    border-radius: 8px;
	    font-weight: bold;
	    cursor: pointer;
	    transition: 0.2s;
	}
	.syrup-btn:hover { background-color: #FFFFFF; }
	.syrup-btn-danger { background-color: #ff6b6b; color: white; }

	/* Collapse state */
	.syrup-window.collapsed .syrup-contents, 
	.syrup-window.collapsed .syrup-header-lower, 
	.syrup-window.collapsed .syrup-footer-upper {
	    display: none;
	}

	.syrup-editor-row {
	    display: flex;
	    align-items: flex-start;
	    border-bottom: 1px solid #444;
	    background: #222;
	    padding: 2px 0;
	}

	.syrup-line-number {
	    width: 30px;
	    text-align: right;
	    padding-right: 10px;
	    color: #666;
	    user-select: none;
	    font-family: monospace;
	}

	.syrup-line-input {
	    flex-grow: 1;
	    color: #eee;
	    font-family: monospace;
	    outline: none;
	    white-space: pre-wrap;
	    word-break: break-all;
	}

	.syrup-line-input:focus {
	    background: #333;
	}

	.syrup-line-req-btn {
		font-size: var(--fs-tiny);
	    opacity: 0.3;
	    transition: opacity 0.2s;
	    margin-left: 10px;
	}

	.syrup-editor-row:hover .syrup-line-req-btn {
	    opacity: 1;
	}

	.syrup-editor-container {
	    position: relative; /* Crucial so the overlay stays inside the editor */
	}

	.syrup-editor-overlay {
	    position: absolute;
	    top: 0; left: 0; right: 0; bottom: 0;
	    background: rgba(0, 0, 0, 0.6);
	    z-index: 100;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}

	.syrup-req-modal {
	    background: #2a2a2a;
	    border: 1px solid #555;
	    padding: 15px;
	    border-radius: var(--radius-sm);
	    min-width: 400px;
	    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
	    z-index: 101;
	}

	.syrup-modal-buttons {
	    display: flex;
	    justify-content: flex-end;
	    gap: 10px;
	    margin-top: 15px;
	    padding-top: 10px;
	    border-top: 1px solid #444;
	}

	.syrup-line-input {
	    position: relative;
	    white-space: pre-wrap;
	}

	.grottoBtn {
		opacity: 0.6;
	}
	.grottoBtn:hover {
		opacity: 1;
	}

	/* font-sizes for elements whose rule lives only in the other orientation */
	.footer .button { font-size: var(--fs-small); }
	.dialogueContainer.basic { font-size: var(--fs-medium); }
	.galleryGrid.textContainer { font-size: var(--fs-tiny); }
	input { font-size: var(--fs-small); }
}

/* ===================== PORTRAIT  (tall screens: portrait phones) ===================== */
@media (orientation: portrait) {
	/* Portrait overrides of the orientation component vars (see :root). */
	:root {
		--card-brightness: 100%;
		--wardrobe-cols:   2;
		--collection-cols: 1;
		--ovl-h: 75%;
		--ovl-left: 55%;
		--ovl-right: 60%;
		--ovl-enc-right: 0%;
		--encounter-lh: 1;
		--fetish-grid-min: 90%;
		--title-btn-maxw: none;
		--title-img-h: 300px;
		--title-btngrid-h: 300px;
		--title-grid-min: 110px;
		--foxf-btngrid-h: 110px;
		--outfit-cols: 1;
		--outfit-cols-wide: 2;
		--foxf-brightness: 80%;
		--inv-cols: 1fr;
		--grotto-btn-max: 45%;
	}
	/* Unified: desktop-only title elements that are absolutely positioned for
	   the desktop title screen and would otherwise float loose on mobile.
	   Money shows on the footer INVENTORY button; version/changelog is desktop-only. */
	.moneyCircle    { display: none; }
	#versionTracker { display: none; }
	/*Misc*/
	html, body {
		width: 100%;
		height: 100%;
		padding: 0px;
		margin: 0px;	
		position: fixed;
	}
	html {
	    border-color: #cccccc;
	    overflow: hidden;
	    font-family: arial, sans-serif;
	    font-size: 1rem; /* defined Root font-size (fixed base, NOT a responsive tier) */
	    color: #cccccc; /* defined Root font-color: Off-white */
	    line-height: 1.5em;
	}
	body{
	    display: flex;
	    /* Makes sure #output always fills the rest of the available space */
	}
	*{
		box-sizing: border-box;
		/*when specifying dimensions, it takes padding and borders into account*/
	}
	a, a:visited {
		text-decoration: none;
		color:#509cea;
	}
	.closeButton {
		top:-115px;
		left: -340px;
		position: absolute;
		font-size: 50px;
	  	border: 5px solid white;
	  	border-radius: 20px;
		color:white;
	
	}
	.openButton {
		top: -115px;
		left: -120px;
		position: absolute;
		font-size: 50px;
		visibility: hidden;
	  	border: 5px solid white;
	  	border-radius: 20px;
		color:white;
	}
	.jiggyButton {
		font-size: clamp(2rem, 12vh, 100px);
		line-height: 1;
		color: var(--c-blue-ui);
		cursor: pointer;
		text-shadow: 5px 8px #000A, -1px -1px 5px #000A;
		z-index: 1;
		font-family: var(--font-title);
		opacity: 0.9;
	}
	#jiggyButtonHolders {
		display: none; /* portrait uses the bottom writeHTML zoom/back buttons instead */
	}
	.ghost {
		position: absolute;
		cursor: pointer;
	}
	.overlay {
		position: absolute;
		cursor: pointer; 
		object-fit: cover;
		object-position: 100% 0px;
	}
	.loader {
	  border: 16px solid #f3f3f3; /* Light grey */
	  border-top: 16px solid #3498db; /* Blue */
	  border-radius: 50%;
	  width: 120px;
	  height: 120px;
	  animation: spin 2s linear infinite;
	}
	hr {
		border: 2px dashed white;
		margin-bottom: 45px; 
	}
	@keyframes spin {
	  0% { transform: rotate(0deg); }
	  100% { transform: rotate(360deg); }
	}

	/****Scroll bar****/
	/* width */
	::-webkit-scrollbar {
	  width: 5px;
	}
	/* Track */
	::-webkit-scrollbar-track {
	  background: #333333; 
	}
	 /* Handle */
	::-webkit-scrollbar-thumb {
	  background: #FFFFFF; 
	  border-radius:3px;
	}
	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
	  background: #DDDDDD; 
	}

	/**** Menu ****/
	div#menu {
	    width: 400px;
	    height: 100%;
	    flex:none;
	    border-right: 5px solid;
	  	background-color: #111111;
		text-align: center;
		overflow-y: auto; /*only adds a scrollbar, when necessary*/
		overflow-x: hidden;
		/*resize: horizontal;  probably better to code the resizing of this container via JS. Something for later. */
	}
	p#title {
		font-size: var(--fs-large);
	    margin-bottom: 15px;
	}
	p#author {
		font-size: var(--fs-large);
	}

	.flexbox{
	    display: flex;
	    flex-wrap: wrap;
	}
	.flexbox>*{
		/*Only really used for the menu to ensure 2 items per row*/
	    width: 42%;
	    box-sizing: border-box;
	    margin: 15px;
	}
	.playerImageFrame {
		display: block;
		object-fit: cover;
		visibility: hidden;
	}
	.museumImageFrame {
		display: block;
		object-fit: cover;
		width: 100%;
		padding-bottom: 200%;
	}
	.playerImage {
		position: absolute;
		display: block;
	    margin: auto;
	  	border: 5px solid var(--c-cream);
	  	border-radius: var(--radius-sm);
		margin-left: 14%;
		box-shadow: 6px 6px #0005;
		object-fit: cover;
		object-position: 100% 0px;
	}

	/**** Canvas ****/
	.wrapper{
	    background: none; /*To ensure WrapperBG shows, in case browser-native forces white background as default*/
	    width: 100%;
		height: 100%;
		overflow-y: auto; /*only shows a scroll-bar, if necessary*/
		overflow-x: hidden;
	}
	div#output {
	    padding: 60px;
	}
	div#wrapperBG {
		/*Box covering entire canvas, used to add background-image via JS*/
	    height: 100%;
	    width: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    background-size: 100% 100%;
	    filter: blur(15px) contrast(80%);
	    z-index: -2;
	}
	div#wrapperBG.Evening {
		filter: blur(15px) contrast(80%) brightness(70%) saturate(80%) sepia(65%);
	}
	div#wrapperBG.Night {
		filter: brightness(50%) blur(15px) contrast(80%) saturate(50%) grayscale(30%) sepia(50%) hue-rotate(-90deg);
	}
	div#wrapperBG::after {
		/*dims the background */
	    content: "";
	    position: absolute;
	    height: 100%;
	    width: 100%;
	    z-index: -1;
	}
	.backgroundPicture{
		display: block;
		width: 100%;
		height: 100%;          /* fill the (now square) room; stretch keeps %-positioned buttons aligned */
	}
	.backgroundBorder{
	    border: 5px solid var(--c-cream);
	    border-radius: 30px;
	    height: 100%;
	    width: 100%;
		margin: auto;
		overflow: hidden;
		position:relative;
	}
	.playerRoom {
		position: relative;
		width: 90%;
		margin: auto;
	}
	.Evening {
		filter: brightness(70%) contrast(120%) saturate(80%) sepia(65%);
	}
	.Night {
		filter: brightness(50%) contrast(150%) saturate(50%) grayscale(30%) sepia(50%) hue-rotate(-90deg);
	}
	.pictureButton {
		display: block;
		position: absolute;
		background-color: #605533CC;
		opacity: .5;
		text-align: center;
		cursor: pointer;
	  	border: 3px solid white;
	  	border-radius: var(--radius-sm);
		padding-top: 20px;
		padding-bottom: 20px;
	}
	img.bigPicture {
		display: block;
	    max-height: 90vh;
	    max-width: 100%;
	    margin: auto;
		border: 3px solid white;
	    border-radius: 30px;
	}
	.medPicture {
		display: block;
	    margin: auto;
	    max-height: 500px;
	  	padding: 20px, 1px;
	  	border: 3px solid white;
	  	border-radius: var(--radius-sm);
	}

	/**** Text ****/
	h1,h2,h3,h4,h5,h6,p{
		/*clear any user style agent defintions*/
		margin:0;
		padding:0;
	}
	h1 {
		font-size: var(--fs-huge);
	}
	h2 {
		font-size: var(--fs-xlarge);
	}
	h3 {
		font-size: var(--fs-medium);
	}
	h3 {
		font-size: var(--fs-medium);
	}
	.centeredText {
		font-size: var(--fs-large);
		font-family: var(--font-title);
		text-align:center;
		margin-left: auto;
		margin-right: auto;
		background-color: #00000077;
		border-radius: 12px;
		color: #FFFFFF;
		text-shadow: 2px 2px #000000;
		padding: 15px;
		line-height: 1.3;
	}
	.tinyText {
		color: #BBBBBB;
		text-align:center;
		margin-left: auto;
		margin-right: auto;
		width: 400px;
		font-size: 70%;
	}
	p{margin: 15px 0;}

	/* Textbox interactions */
	.switch {
	    color: var(--c-cyan);
		cursor: pointer;
	}
	.switch::before {
	    content: '\027A4';
	    padding-right: 5px;
		cursor: pointer;
	}
	/* Textbox interactions */
	.textBox p.switch {
	    color: var(--c-cyan);
		cursor: pointer;
	}
	.textBox p.switch::before {
	    content: '\027A4';
	    padding-right: 5px;
		cursor: pointer;
	}
	/* text emphasis */
	.textBox b {
	    color: hsla(48, 69%, 75%, 1);
	}
	.textName {
		font-size: var(--fs-medium);
		margin: 0px;
		padding: 0px;
		font-weight: bold;
	}
	p.rawText {
		font-size: var(--fs-large);
		font-family: var(--font-title);
		margin-left: auto;
		margin-right: auto;
		background-color: #00000077;
		border-radius: 12px;
		padding: 15px;
		line-height: 1.3;
		text-shadow: 2px 2px #000000;
	    color: #1ce01c;
	}
	.specialText {
		font-size: var(--fs-large);
		font-family: var(--font-title);
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		background-color: #00000077;
		border-radius: 12px;
		padding: 15px;
		text-shadow: 2px 2px #000000;
	    color: #1ce01c;
	
	    font-weight: bold;
	    text-align: center;
		line-height: 1.5;
	}

	/*regular button*/
	.button, .pictureButton, .choiceText, .shopItem, .logbookSwitch{
		font-size: var(--fs-xlarge);
	    background: #665533CC;
	    padding: 15px;
	    border: none;
	    border-radius: 25px;
	    transition: 0.25s;
	    text-align: center;
		cursor: pointer;
		border-bottom: 3px solid var(--c-gold);
		color: var(--c-blue);
		text-shadow: 2px 2px #00355A;
	}
	.logbookLeft .button{
		margin: 0px;
		margin-bottom:10px;
		padding: 15px 0px;
		line-height: 1.5;
		font-size: var(--fs-small);   /* category column is only ~30% wide on portrait; xlarge overflowed long names */
		overflow-wrap: break-word;    /* let a long single word ("Pocketmanz") wrap instead of overflowing + clipping */
	}
	.pictureButton, .choiceText {
		font-size: var(--fs-xlarge);
		font-weight: bold;
		display: block;
		width: fit-content;
		margin: 15px auto;
		color: var(--c-blue);
		font-family: var(--font-hand);
		font-weight:bold; 
	}
	.playerRoom {
	    width: 100%;
	    margin-bottom:60px;
	}

	/*Windows*/
	.windowLeft {
		height: 80%;
		width: 30%;
		float:left;
		overflow: auto;
	}
	.windowRight {
		height: 80%;
		width: 70%;
		float:right;
		overflow: auto;
	}
	.popup{
		position: absolute;
		top: 50%;
	    left: 50%;
		width: 90vw;
		height: 88vh;
	    transform: translate(-50%, -53%);
	    z-index: 1;
	    overflow: visible;
	    border: 5px solid var(--c-cream);
	  	border-radius: var(--radius-sm);
		  background: #320C;
	}
	.popup::after {
	    content: "";
	    position: fixed;
		width: 90vw;
		height: 88vh;
	    z-index: -1;
		top: 50%;
	    left: 50%;
	    transform: translate(-50%, -53%);
	    pointer-events: none;
	}
	.windowTitle {
		font-size: var(--fs-huge);
	    width: 100%;
	    text-align: center;
	    border-bottom: 3px solid var(--c-cream);
	    cursor: pointer;
	    border-radius: var(--radius-sm);
	    background: #320C;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    min-height: 1.8em;
	    line-height: 1.2;
	    padding: 0.15em 0.3em;

		font-family: var(--font-hand);
		color: var(--c-cream);
		font-weight: bold;
		font-family: var(--font-hand);
		text-shadow: 3px 3px #000A;
	}
	.windowBackdrop {
		background: rgba(25,25,25,0.85);
		position: fixed;
		z-index: 5;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
	}
	/*Inventory Menu*/
	.item {
	    background-color: #00000077;
	    padding: 5%;
		border: 5px solid var(--c-cream);
	    border-radius: var(--radius-sm);
		position: relative;
		font-family: var(--font-title);
		color: #FFFFFF;
		display:grid; 
		grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
		height: 100%;
		width: 100%;
	}
	.itemName {
		font-size: var(--fs-large);
		margin: 0px;
		line-height: 1;
	}
	.itemQuantity {
		font-size: var(--fs-xlarge);
		position: absolute;
		top: 50%;
		left: 5%;
	}
	.itemImage {
	    width: 100%;
		border: 5px solid var(--c-cream);
	    border-radius: var(--radius-sm);
		aspect-ratio:1;
	}
	.playerSelf {
		position: absolute;
		height: inherit;
		width: inherit;
		max-width:100%;
	
	}
	.overlayImage {
		position: absolute;
		height: 100%;
		width: inherit;
	}
	.thumbFull {
		position: absolute;
		height: inherit;
	}

	/*Shop*/
	.shopItem {
		cursor: pointer;
		position: block;
		width: 100%;
		background-color: #333333;
		overflow: auto;
	    height: unset;
		display: flex;	
	    align-items: center;
	}
	.shopName {
		font-size: var(--fs-small);
		pointer-events: none;
		float: left;
		color: white;
		left: 30%;
	    flex: 3 1 auto;
	}
	.shopDesc {
		font-size: var(--fs-small);
		pointer-events: none;
		float: left;
		color: white;
		padding-top: -10px;
		width: 40%;
		left: 40%;
		flex: 5 1 auto;
	}
	.shopPrice {
		font-size: var(--fs-medium);
		pointer-events: none;
		float: left;
		color: white;
		left: 90%;
		width: 5%;
	    flex: 2 1 auto;
	}
	.shopImage {
		pointer-events: none;
		float: left;
		height: 69px;
		width: 69px;
	  	border: 3px solid white;
	  	border-radius: var(--radius-sm);
	    float: right;
	    margin-right: 15px;
	}
	.shopItem>* {
	    margin: 0 5px;
		width:20%;
	}

	.shopCategory {
	    background-color: #00000077;
	    padding: 15px 5px;
		border: 5px solid var(--c-cream);
	    border-radius: var(--radius-sm);
		position: relative;
		font-family: var(--font-title);
		color: #FFFFFF;
		display:grid; 
		grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
	}
	.shopCategoryName {
		font-size: var(--fs-large);
		margin: 0px;
		line-height: 1;
	}
	

	/**** Logbook ****/
	div.popup, .save {
	    display: flex;
	    flex-wrap: wrap;
		padding: 0px;
		overflow: hidden;
	}
	div.inventory {
	    display: grid;
	}
	.lb_Name{
	color:var(--character-color);
	}
	.logbookRight {
		left:30%;
		height: 80%;
		width: 70%;
	    left: unset;
	    padding: 15px;
	    overflow-y: auto;
	    overflow-x: hidden;
	}
	.logbookLeft {
		height: 80%;
		width: 30%;
	    top: unset;
	    padding: 0;
	   overflow-y: scroll;
	    overflow-x: hidden;
	}
	#selfImage {
	    height: 100%;
		max-height:40vh;
		margin: 0 30px;
		position: relative;
	}
	.selfSwitch {
		display: inline;
		cursor: pointer;
	}

	/****Save menu****/
	div#save {
	    flex-flow: column;
	}
	.saveButton, .deleteButton, .loadButton, .saveFileButton, .loadFileButton {
		font-size: var(--fs-small);
	    color: #ffffff; 
	    padding: 15px; 
	    margin-left: 15px; 
	    text-align: center;
	    /*width: 120px;*/
	    border: none; 
	    border-bottom: 3px solid #ffffff;
	    border-radius: var(--radius-sm); 
	   	cursor: pointer; 

	}
	.saveSlot {
	padding: 5px 0;
	    height: unset;
	    display: flex;
	    margin: 15px 0;
	    position: relative;
	    background-color: rgba(255,255,255,0.25);
	    flex-direction: column;
	    justify-content: flex-end;
	    padding-left: 65px;
	    border-radius: var(--radius-sm);
	}
	.saveDate {
		font-size: var(--fs-medium);
	    flex: 5 1;
	}
	.saveList {
	display: flex;
	    flex-direction: column;
	    overflow-y: scroll;
	    width: 100%;
		height: 80%;
		word-wrap: break-word;
	}
	.deleteButton{
		color:#FF0000;
		border-color:#FF0000;
	}
	.saveName, .loadButton, .saveButton, .deleteButton, .loadFileButton, .saveFileButton {
	    position: unset;
	    flex: 1 1 auto;
	    max-width: fit-content;
	    max-height: fit-content;
	    margin: 7px;

	}
	.saveName {
		font-size: var(--fs-medium);
	position: absolute;
	    left: 10px;
	    width: 55px;
	    margin: auto;
	    display: block;
	    top: 50%;
	    transform: translateY(-50%);
	}
	.saveButtonsList {
		display:flex;
	}
	/***Phone***/
	.phoneTextBox {
		position: relative;
		display: block;
		width: 98%;
	  	min-height: 92px;
		padding: 5px;
		overflow: hidden;
	  	background-color: #111122;
	  	border: 5px solid white;
	  	border-radius: var(--radius-sm);
	}
	.phoneTextBox p {
		margin: 0px;
		padding: 0px;
	}
	.phoneTextThumb {
		position: relative;
	  	display: block;
	    margin: auto;
	  	padding: 1px;
	 	height: 100px;
		width: 100px;
	  	float: left;
		overflow: hidden;
	  	margin: 0px 10px 0px 0px;
	  	border: 3px solid white;
	  	border-radius: var(--radius-sm);
	}
	.phoneTextName {
		color: white;
		margin: 0px;
		padding: 0px;
		font-weight: bold;
	}
	.phonePicture {
	    display: block;
	    margin: auto;
	    max-height: 100%;
	    max-width: 100%;
	      border: 3px solid;
	      border-radius: var(--radius-sm);
	}

	/*** Mobile Ver Stuff ***/
	/*Footer Hiding*/ /*Comment this out in mobile ver*/
	.footer { 
		/*height: 0%;
		overflow: hidden;*/
	}
	.footer .switch {
		font-size: 300%;
		height: 100px;
		width: 33%;
		margin: auto;
		margin-top: 50px;
		text-align: center;
		box-sizing: border-box;
		float: left;
	  	border: 3px solid white;
	  	border-radius: var(--radius-sm);
	}


	/*Other*/ /*Comment this out in dekstop ver*/

	.footerButton {
		height: 10vh;
		text-align: center;
		box-sizing: border-box;
		float: left;
	  	border: 3px solid white;
	  	border-radius: var(--radius-sm);
	    background: rgba(0,0,0,0.75);
	    margin: 15px;
	    border: none;
	    border-bottom: 3px solid grey;
	    border-radius: var(--radius-sm);
	    transition: 0.25s;
	    text-align: center;
		cursor: pointer;
	}
	.gridPicture {
		display: block;
	    margin: auto;
	    border: 5px solid var(--c-cream);
	    border-radius: 30px;
		width:100%;
		cursor:pointer;
	}
	div#menu {
	    width: 0px;
	    overflow: hidden;
	    border-right: 0px;
	}
	div#wrapperBG {
	    height: calc(100% + 0px);
	    width: calc(100% + 0px);
	    position: absolute;
	    top: 0;
	    left: 0;
	    z-index: 1;
	    background-repeat: no-repeat;
	    background-size: cover;
	    filter: blur(15px) contrast(80%);
	    z-index: -2;
	}
	div#wrapperBG::after {
	    content: "";
	    position: absolute;
	    height: calc(100% + 0px);
	    width: calc(100% + 0px);
	    z-index: -1;
	}
	.pictureButton, .choiceText{
		font-size: var(--fs-xlarge);
		font-weight: bold;
	    display: block;
	    width: fit-content;
	    margin: 2px;
	}
	.choiceText {
		font-size: var(--fs-xlarge);
		width: 80%;
		margin: auto;
		padding-top: 10px;
		padding-bottom: 10px;
		line-height: 1;
	}
	.playerRoom {
		position: relative;
		aspect-ratio: 1 / 1;
		/* 2f: full-width square nav window in portrait (height-capped so it can't overflow a near-square viewport). */
		width: min(100%, 95vh);
		max-width: 100%;
		margin: 0 auto var(--space-lg);
	}
	.button, .choiceText, .shopItem, .logbookSwitch{
	}
	.flexbox>*{
	    width: 30%;
	    margin: auto;
		margin-top: 30px;
	}
	#restartButton {
	    color: #FF0000;
	    border-color:#FF0000;
	    margin: auto;
	    margin-top: 30px;
	}
	div#output {
		padding: 5px;
	}
	.footer .button {
		font-size: var(--fs-small);
		line-height: 1.5;
		background: #00000077;
	}

	/*Basic Schema*/
	.dialogueContainer.basic{
		font-size: var(--fs-medium);
		position: relative;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		background-color: rgba(0,0,0,0.5);
		border-bottom: 5px solid;
		/* border-color: var(--character-color); */
		margin: 15px 0;
		padding: 15px;
		border-radius: 40px;
		width: 100%;
		overflow: hidden;
		box-shadow: inset 0 0 20px #000;
		color: #FFFFFF;
		text-shadow: 0px 0px 5px black;
	}
	img.thumbnailImage.basic{
		width: 125px;
		border-radius: var(--radius-md);
		/* box-shadow: -5px 5px var( --character-color); */
		flex: none;
		object-fit: cover;
		object-position: 100% 0;
		position:absolute;
	}
	p.textName.basic{
		font-size: var(--fs-large);
		margin: 0px;
		padding: 0px;
		font-weight: bold;
		text-shadow: 3px 3px black, 0px 0px 5px black;
	}
	.thumbnailBorder.basic {
		width: 125px;
		margin-right: 0px;
		height:125px;
	}

	/*Lobotomy Schema*/
	p.lobotomyText {
		font-size: var(--fs-large);
		margin: 30px 0px;
		font-family: var(--font-body);
		font-style: normal;
	}
	.dialogueContainer.lobotomy {
		position: relative;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    background-color: rgba(0,0,0,0.9);
		border: solid 10px;
	    margin: 15px 15px;
	    padding: 0px;
	    width: 95%;
		overflow: hidden;
		-moz-transform: skew(-5deg, 0deg);
		-webkit-transform: skew(-5deg, 0deg);
		-o-transform: skew(-5deg, 0deg);
		-ms-transform: skew(-5deg, 0deg);
		transform: skew(-5deg, 0deg);
	}
	.textName.lobotomy {
		font-size: var(--fs-large);
		font-weight: bold;
	    text-align: center;
		font-family: var(--font-display);
		-moz-transform: skew(5deg, 0deg);
		-webkit-transform: skew(5deg, 0deg);
		-o-transform: skew(5deg, 0deg);
		-ms-transform: skew(5deg, 0deg);
		transform: skew(5deg, 0deg);
		margin-bottom: 0px;
		color: black;
		margin-top: 5px;
		margin-bottom: -15px;
		text-align: left;
	}
	img.thumbnailImage.lobotomy {
	    width: 100px;
	    /*box-shadow: -5px 5px var( --character-color);*/
	    flex: none;
		-moz-transform: scale(0.9) skew(5deg, 0deg);
		-webkit-transform: scale(0.9) skew(5deg, 0deg);
		-o-transform: scale(0.9) skew(5deg, 0deg);
		-ms-transform: scale(0.9) skew(5deg, 0deg);
		transform: scale(0.9) skew(5deg, 0deg);
		object-fit: cover;
		object-position: 100% 0;
		margin-top: -10px;
		position:absolute;
	}
	.thumbnailBorder.lobotomy {
		height:125px;
	}
	.textContainer.lobotomy {
		font-size: var(--fs-large);
		font-family: var(--font-body);
		font-style: normal;
		-moz-transform: skew(5deg, 0deg);
		-webkit-transform: skew(5deg, 0deg);
		-o-transform: skew(5deg, 0deg);
		-ms-transform: skew(5deg, 0deg);
		transform: skew(5deg, 0deg);
	}
	.thumbnailContainer.lobotomy {
	    display: inline-block;
		margin-right: 15px;
		margin-left: 15px;
		width: 95px;
		flex-shrink: 0;
	}
	.thumbnailContainer.lobotomyBorder {
	    height: 125px;
	    width: 125px;
		background-color: #000000;
	    margin-right: 30px;
	    margin-left: 10px;
		-moz-transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-o-transform: scale(1.1);
		-ms-transform: scale(1.1);
		transform: scale(1.1);
	}
	.choiceTextLobotomy {
		font-size: var(--fs-xlarge);
		padding: 0px;
		margin: 0px;
		font-family: var(--font-body);
		font-weight: normal;
	}
	.choiceFrameLobotomy{
		font-size: var(--fs-large);
	    background: rgba(0,0,0,0.75);
	    padding: 15px;
	    margin: 15px;
	    transition: 0.25s;
	    text-align: center;
		cursor: pointer;
		font-weight: bold;
	    display: block;
	    width: fit-content;
	    max-width: 30vw;
	    margin: 15px auto;
		border: solid 5px;
	}

	.dialogueContainer.lobotomy p.switch {
	    color: var(--c-cyan);
		cursor: pointer;
	}
	.dialogueContainer.lobotomy p.switch::before {
	    content: '\027A4';
	    padding-right: 5px;
		cursor: pointer;
	}

	/*Persona Schema*/
	.dialogueContainer.persona {
		position: relative;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    margin: 15px 0;
	    padding: 0px;
	    width: 100%;
		overflow: hidden;
	}
	img.thumbnailImage.persona {
	    width: 125px;
	    /*box-shadow: -5px 5px var( --character-color);*/
	    flex: none;
		object-fit: cover;
		object-position: 100% 0;
		position:absolute;
	}
	.textContainer.persona {
		font-size: var(--fs-large);
		font-family: var(--font-body);
		font-style: normal;
		margin-left: 20px;
	}
	.thumbnailContainer.persona {
	    display: inline-block;
	    width: 125px;
		box-shadow: 0px 5px;
	    border-radius: 15px/5%;
		margin-bottom: 5px;
		overflow: hidden;
		background: #0003;
		flex-shrink: 0;
	}
	.thumbnailBorder.persona {
		width:125px;
		height:125px;
		position:relative;
	}
	.nameContainer.persona {
		-moz-transform: skew(3deg, 0deg);
		-webkit-transform: skew(3deg, 0deg);
		-o-transform: skew(3deg, 0deg);
		-ms-transform: skew(3deg, 0deg);
		transform: skew(3deg, 0deg);
		padding-bottom: 3px;
	}
	.nameContent.persona {
		font-size: var(--fs-large);
		-moz-transform: skew(-3deg, 0deg);
		-webkit-transform: skew(-3deg, 0deg);
		-o-transform: skew(-3deg, 0deg);
		-ms-transform: skew(-3deg, 0deg);
		transform: skew(-3deg, 0deg);
		font-weight: bold;
		font-family: var(--font-display);
		z-index: 1;
		margin-left: 15px;
	}
	.textNamePersonaBlack{
		border:solid 44px #000;
		position:absolute;
		margin:-72px 0 0 119px;
		transform: scaleX(3.8) scaleY(.5);
		z-index: -1;
	}
	.textNamePersonaWhite{
		border:solid 44px #fff;
		position:absolute;
		margin:-84px 0 0 119px;
		transform: scaleX(3.9) scaleY(.6);
		z-index: -2;
	}
	.personaNameArrow{
		border:solid 32px transparent;
		border-right-color:#000;
		position:absolute;
		margin:-42px 0 0 -82px;
		transform: scaleX(1.7) scaleY(.4);
	}
	.personaNameArrowShadow{
		border:solid 32px transparent;
		border-right-color:#fff;
		position:absolute;
		margin:-42px 0 0 -85px;
		transform: scaleX(1.9) scaleY(.6);
		z-index:-2;
	}
	.textContent.persona {
		border: 3px solid white;
		background-color: #000;
		padding-left: 5px;
		padding-right: 5px;
		margin-left: -20px;
		margin-top: -8px;
	}

	.choiceTextPersona {
		font-size: var(--fs-large);
		padding: 0px;
		margin: 0px;
		font-family: var(--font-body);
		font-weight: normal;
	}
	.choiceFramePersona{
		font-size: var(--fs-large);
	    background: #000000;
	    color: #ffffff;
	    padding: 15px;
	    margin: 15px;
	    transition: 0.25s;
	    text-align: center;
		cursor: pointer;
		font-weight: bold;
	    display: block;
	    width: fit-content;
	    max-width: 50vw;
	    margin: 15px auto;
		border: solid 5px;
	}

	.dialogueContainer.persona p.switch {
	    color: var(--c-cyan);
		cursor: pointer;
	}
	.dialogueContainer.persona p.switch::before {
	    content: '\027A4';
	    padding-right: 5px;
		cursor: pointer;
	}

	.personaMenuButton {
		font-size: var(--fs-large);
		letter-spacing: .1em;
	    background: #000000;
	    color: #ffffff;
		border: solid 3px #ffffff;
	    padding: 15px;
	    margin: 15px;
		border: solid 3px #ffffff;
		border-radius: 0px;
	    transition: 0.25s;
	    text-align: center;
		cursor: pointer;
		-moz-transform: skew(5deg, 0deg);
		-webkit-transform: skew(5deg, 0deg);
		-o-transform: skew(5deg, 0deg);
		-ms-transform: skew(5deg, 0deg);
		transform: skew(5deg, 0deg);
	}
	.pictureButtonPersona{
		font-size: var(--fs-large);
		letter-spacing: .1em;
		display: block;
		position: absolute;
	    background: #000000;
	    color: #ffffff;
		border: solid 3px #ffffff;
		font-weight: bold;
	    display: block;
	    width: fit-content;
	    margin: 15px auto;
	    padding: 15px;
	    margin: 15px;
	    border: 3px solid;
	    transition: 0.25s;
	    text-align: center;
		cursor: pointer;
		-moz-transform: skew(3deg, 0deg);
		-webkit-transform: skew(3deg, 0deg);
		-o-transform: skew(3deg, 0deg);
		-ms-transform: skew(3deg, 0deg);
		transform: skew(3deg, 0deg);
	}


	#buttonMenu {
		display:inline-block;
	}
	/*Royalty Schema*/
	/*Royalty Schema*/
	.dialogueContainer.royalty {
		position: relative;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    margin: 5px 0;
	    padding: 0px;
	    width: 100%;
		overflow: hidden;
	}
	img.thumbnailImage.royalty {
	    width: 125px;
	    /*box-shadow: -5px 5px var( --character-color);*/
	    flex: none;  
		-webkit-filter:grayscale(0.9);
		filter: grayscale(0.9);
		object-fit: cover;
		object-position: 100% 0;
		position:absolute;
	}
	.textContainer.royalty {
		font-size: var(--fs-large);
		font-family: var(--font-body);
		font-style: normal;
		margin-top: 5px;
		width: 90%;
	}
	.thumbnailContainer.royalty {
	    display: inline-block;
	    width: 125px;
	}
	.nameContainer.royalty {
		width:125px;
		background-color: #000C;
		border: 3px solid;
		border-radius: var(--radius-sm);
		/*z-index:1;*/
		position: absolute;
		bottom: 0px;
	}
	.nameContent.royalty {
		font-size: var(--fs-large);
		font-family: marker, norwester, times new roman, sans-serif;
		z-index: 1;
		margin: auto;
		text-align: center;
		height:30px;
	}
	.textBorder.royalty {
	    width: 100%;
		border: 3px solid white;
		border-radius: var(--radius-sm);
		background-color: #000;
		padding: 0px 15px;
		min-height: 125px;
	}
	.thumbnailBorder.royalty {
		width:125px;
		height:125px;
	}
	.textContainer.royalty p {
		font-size: var(--fs-large);
		font-family: railway;
		line-height: 1.2;
		margin: 0px;
	}

	.choiceTextRoyalty {
		font-size: var(--fs-large);
		padding: 0px;
		margin: 0px;
		font-family: var(--font-body);
		font-weight: normal;
	}
	.choiceFrameRoyalty{
		font-size: var(--fs-large);
	    background: #000000;
	    color: #ffffff;
	    padding: 15px;
	    margin: 15px;
	    transition: 0.25s;
	    text-align: center;
		cursor: pointer;
		font-weight: bold;
	    display: block;
	    width: fit-content;
	    max-width: 30vw;
	    margin: 15px auto;
		border: solid 5px;
	}

	.dialogueContainer.royalty p.switch {
	    color: var(--c-cyan);
		cursor: pointer;
	}
	.dialogueContainer.royalty p.switch::before {
	    content: '\027A4';
	    padding-right: 5px;
		cursor: pointer;
	}

	.royaltyMenuButton {
	    background: #000000;
	    color: #ffffff;
		border: solid 3px #ffffff;
	    padding: 15px;
	    margin: 15px;
		border: solid 3px #ffffff;
		border-radius: 0px;
	    transition: 0.25s;
	    text-align: center;
		cursor: pointer;
	}
	.pictureButtonRoyalty{
		font-size: var(--fs-large);
		display: block;
		position: absolute;
	    background: #000000;
	    color: #ffffff;
		border: solid 3px #ffffff;
		font-weight: bold;
	    display: block;
	    width: fit-content;
	    margin: 15px auto;
	    padding: 15px;
	    margin: 15px;
	    border: 3px solid;
	    transition: 0.25s;
	    text-align: center;
		cursor: pointer;
		-moz-transform: skew(3deg, 0deg);
		-webkit-transform: skew(3deg, 0deg);
		-o-transform: skew(3deg, 0deg);
		-ms-transform: skew(3deg, 0deg);
		transform: skew(3deg, 0deg);
	}

	/*Syrup Schema*/
	.dialogueContainer.syrup {
		font-size: var(--fs-large);
		position: relative;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    background-color: rgba(50,30,0,0.8);
		border: 5px solid var(--c-cream);
		color: #FFFFFF;
	    margin: 15px 0;
	    border-radius: var(--radius-md);
	    width: 100%;
		overflow: hidden;
		font-family: var(--font-hand);
		box-shadow: 11px 11px #000A,
					0 0 20px 2px #000A;
		z-index: 0;
	}
	.textContainer.syrup {
		/*added so in the case of ever having so much dialog that it would extend over the picture, it aligns neatly at the right to the picture as demosntrated in example1.jpg.*/
	}
	.syrup .switch {
		font-size: var(--fs-small);
	    color: var(--c-blue);
		cursor: pointer;
		text-shadow: 2px 2px #00355A;
		-webkit-text-stroke: 1px #036A;
		font-family: var(--font-title);
		line-height: 1.2;
		margin: 0px;
	}
	.syrup .switch::before {
	    content: '\027A4';
	    padding-right: 5px;
		cursor: pointer;
	}
	.dialogueDivider.syrup {
		height: 20px;
		width: 300px;
		margin-top: 5px;
		margin-bottom: -5px;
		filter: drop-shadow(3px 3px #000A);
	}
	.dialogueBackground.syrup {
		height: 125px;
		position: absolute;
		width: 225px;
		right: 15px;
		top: 15px;
		z-index: -1;
	}
	.thumbnailBorder.syrup {
		width:125px;
		height:125px;
	}
	img.thumbnailImage.syrup {
	    width: 125px;
	    border-radius: var(--radius-md);
	    /*box-shadow: -5px 5px var( --character-color);*/
	    flex: none;
		object-fit: cover;
		object-position: 100% 0px;
		position:absolute;
	}
	.textContainer.syrup p {
		font-size: var(--fs-xlarge);
		font-family: var(--font-title);
		line-height: 1.2;
		margin: 0px;
		margin-bottom: 15px;
	}

	p.textName.syrup {
		font-size: var(--fs-huge);
		color: var(--c-cream);
		margin: 0px;
		padding: 0px;
		font-weight: bold;
		font-family: var(--font-hand);
		text-shadow: 3px 3px #000A;
		line-height: 1;
	}

	.textContainer.syrup .switch {
		font-size: var(--fs-xlarge);
	}
	.textContainer.syrup .status {
		font-size: var(--fs-xlarge);
	}
	p.rawTextSyrup {
	    margin-bottom: 45px;
		font-family: var(--font-hand);
	}
	.specialTextSyrup {
		font-size: var(--fs-small);
	    color: #1ce01c;
	    font-weight: bold;
	    margin-bottom: 45px;
	    text-align: center;
		font-family: var(--font-hand);
		line-height: 1.5;
	}
	hr.syrup {
		border: none;
		margin-top: 0px;
		margin-bottom: 0px;
	}
	.textDivider.syrup {
		border: 5px solid var(--c-cream);
		border-radius: 50%;
	}

	.titleCard {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0vh;
		left: 0vw;
	}
	.titleBackboard {
		position:absolute;
		transition: top 2s;
		transition-timing-function: ease;
		top: -100%;
		width:100vw;
		height: 50vh;
		left:0%;
	}
	.titleButton {
		position:absolute;
		transition: top 2s;
		transition-timing-function: ease;
		top: 200%;
		cursor:pointer;
		width: 50%;
	}
	:root {
		--scaleX: calc(100vw/1200);
		--scaleY: calc(100vh/800);
	}
	.titleLetter {
		font-family: var(--font-hand);
		color: var(--c-cream);
		position:absolute;
		top: 0vh;
		left: 0vw;
		rotate: 0deg;
		transition: top 0.1s, rotate 0.1s;
		transition-timing-function: linear;
		font-size: 27vw;
		font-weight:bold;
		transform: scale((--scaleX), (--scaleY));
	}

	.galleryGrid.textContainer {
		font-size: var(--fs-tiny);
	}

	.flip-card {
	  background-color: transparent;
	  width: 100%;
	  height: 100%;
	  perspective: 1000px;
	  color:white;
	}

	.flip-card-inner {
	  position: relative;
	  width: 100%;
	  height: 100%;
	  text-align: center;
	  transition: transform 0.6s;
	  transform-style: preserve-3d;
	  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	}
	.flipping .flip-card-inner {
	  transform: rotateY(180deg);
	}

	.board .cardStatBlock {
		font-size:2vw;
	}

	.cardStatBlock{
		font-size:3vw;
		position: absolute;
		top:0px;
		left:0px;
		height:100%;
		width:100%;
		z-index: 1;
		transition: transform 0.6s;
		filter: drop-shadow(-2px 2px 0 black) drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black) drop-shadow(2px -2px 0 black);
		-webkit-filter: drop-shadow(-2px 2px 0 black) drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black) drop-shadow(2px -2px 0 black);
	}

	.flipping .cardStatBlock {
		transform: rotateY(180deg);
	}

	.flip-card-front, .flip-card-back {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  -webkit-backface-visibility: hidden;
	  backface-visibility: hidden;
	}

	.flip-card-front {
		background: linear-gradient(306deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 9%, rgba(0,212,255,1) 100%); 
	}

	.flip-card-back { 
		background: linear-gradient(306deg, rgba(2,0,36,1) 0%, rgba(121,9,9,1) 13%, rgba(255,119,119,1) 100%); 
		transform: rotateY(180deg);
	}

	.shimmer {
	  display:inline-block;
	  -webkit-mask:linear-gradient(-60deg,#000 10%,#0005,#000 90%) right/1000% 100%;
	  background-repeat: no-repeat;
	  animation: shimmer 2.5s infinite;
	  font-size: 50px;
	}

	@keyframes shimmer {
	  100% {-webkit-mask-position:left}
	}

	.cardFrame {
		position:absolute; 
		top:0px; 
		left:0px; 
		width:100%;
		height:100%;
	}

	.hand{
		display:grid; 
		grid-template-columns: repeat(auto-fill, 20vh);
		height: 100%;
		overflow: scroll;
	}
	#logbookGridHolder .flip-card-inner{
		height: 40vh; 
		width: 20vh;
	}
	#achievements p {
		position: relative;
		z-index: 1;
		width: 88%;
		text-align: center;
		font-family: var(--font-hand);
		line-height: 1.3;
		margin: auto;
		margin-top: 10%;
		color: #55ccee;
		text-shadow: 3px 3px black;
		background: #0007;
	}
	.achievementName {
		font-size: var(--fs-huge);
		border-radius: 60%;
	}
	.achievementText {
		font-size: var(--fs-xlarge);
		border-radius: 15%;
	}

	.buttonGrid {
		display:grid;
		grid-template-columns:auto auto auto auto auto;
	}
	.galleryGrid {
		display:grid;
		grid-template-columns:repeat(1, auto);
	}

	.progressbar {
	  background-color: black;
	  border-radius: 13px;
	  /* (height of inner div) / 2 + padding */
	  padding: 3px;
	}

	.progressbar>div {
	  background-color: orange;
	  width: 40%;
	  /* Adjust with JavaScript */
	  height: 20px;
	  border-radius: 10px;
	}

	.gridInventory {
		display: grid;
		gap: 1rem;
		grid-template-columns: repeat(3, minmax(240px, .4fr));
	}

	.gridHolder {
		height: 85%;
		overflow: auto;
	}

	.phoneSelectionBox{
		position: relative;
		background-color: rgba(0,0,0,0.5);
		border-bottom: 5px solid;
		/* border-color: var(--character-color); */
		margin: 15px 0;
		padding: 15px;
		border-radius: var(--radius-md);
		width: 100%;
		overflow: hidden;
		box-shadow: inset 0 0 20px #000;
	}

	.phoneSelectionMenu {
		display: grid;
		grid-template-columns: 1fr;
		/*gap: 1rem;
		padding-top: 1.5rem;*/
		justify-content: center;
	}
	.phoneSelectionMenu.logbook {
		grid-template-columns: repeat(auto-fill, 30%);
	}
	.phoneSelectionMenu .shop {
		margin: 0px; 
		justify-content:initial; 
		grid-template-columns: 
		repeat(auto-fill, 125px);
	}
	.phoneSelectionMenu .textBox {
		padding: 0px;
		height: 200px;
		display: block;
		cursor: pointer;
	  	border: 3px solid white;
		border-radius: 25px;
		position: relative;
		overflow: hidden;
	}
	.phoneSelectionMenu .phoneTextThumb {
		position: relative;
	  	display: block;
	    margin: auto;
	  	padding: 1px;
		width: 100%;
		height: 100%;
	  	float: left;
		overflow: hidden;
	  	margin: 0px 10px 0px 0px;
	  	border: 3px solid white;
	  	border-radius: var(--radius-sm);
		height: 200px;
	}
	.selectionMenuText {
		font-size: var(--fs-medium);
		margin: auto;
		border: none;
		font-weight: bold;
		display: block;
		width: fit-content;
		text-align: center;
	}
	.phoneSelectionMenu .pictureButton, .phoneSelectionMenu .choiceText {
		margin: auto;
		border: none;
	}

	#phoneGridHolder img.textThumb {
		border-radius: 0px;
		border: none;
		border-bottom: 3px solid white;
	}
	#phoneGridHolder .phoneSelectionMenu .textBox {
		color: black;
		border-radius: var(--radius-md);
		border-bottom: 3px solid white;
	}

	#logbookGridHolder .selectionMenuText {
		font-size: var(--fs-xlarge);
		transform: skew(-15deg, -15deg);
		width: 145%;
		margin-top: 125px;
		margin-left: -25px;
		background: #000000A0;
		height: 40px;
		line-height: 40px;
		font-family: var(--font-hand);
	}

	#logbookGridHolder .phoneSelectionMenu img.textThumb {
		margin-right: 0px;
		margin-left: -15px;
		width: 125px;
		position: absolute;
	}
	.logbookLeft {
		height: 100%;
	    padding: 0;
	}
	.logbookRight {
		height: 90%;
	    padding: 0px;
	}
	p.selfDesc{
		font-size: var(--fs-xlarge);
		font-family: var(--font-title);
		line-height: 1.2;
		color: white;
	}

	.selectionMenuCrown {
		font-size: var(--fs-huge);
		color: #FFFFFF;
		position: absolute;
		bottom: 154px;
		/* background: black; */
		height: 39px;
		padding-top: 9px;
		border-radius: var(--radius-md);
		font-weight: bold;
		text-shadow: 2px 2px black;
	}


	.buttonGrid {
		display:grid;
		grid-template-columns:auto auto;
	}

	.button3
	{
	  border-radius: 20px;
	  padding: 10px 15px;
	  color: #000;
	  font-weight: bold;
	  background: var(--c-mauve);
	  background: -moz-linear-gradient(top,  var(--c-mauve) 0%, var(--c-pink) 70%, var(--c-mauve) 100%);
	  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,var(--c-mauve)), color-stop(70%,var(--c-pink)), color-stop(100%,var(--c-mauve)));
	  background: -webkit-linear-gradient(top,  var(--c-mauve) 0%,var(--c-pink) 70%,var(--c-mauve) 100%);
	  background: -o-linear-gradient(top,  var(--c-mauve) 0%,var(--c-pink) 70%,var(--c-mauve) 100%);
	  background: -ms-linear-gradient(top,  var(--c-mauve) 0%,var(--c-pink) 70%,var(--c-mauve) 100%);
	  background: linear-gradient(to bottom,  var(--c-mauve) 0%,var(--c-pink) 70%,var(--c-mauve) 100%);
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--c-mauve)', endColorstr='var(--c-mauve)',GradientType=0 );
	}
	.button3:active
	{
	  color: #000;
	  background: var(--c-pink);
	  background: -moz-linear-gradient(top,  var(--c-pink) 0%, var(--c-pink) 70%, var(--c-pink) 100%);
	  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,var(--c-pink)), color-stop(70%,var(--c-pink)), color-stop(100%,var(--c-pink)));
	  background: -webkit-linear-gradient(top,  var(--c-pink) 0%,var(--c-pink) 70%,var(--c-pink) 100%);
	  background: -o-linear-gradient(top,  var(--c-pink) 0%,var(--c-pink) 70%,var(--c-pink) 100%);
	  background: -ms-linear-gradient(top,  var(--c-pink) 0%,var(--c-pink) 70%,var(--c-pink) 100%);
	  background: linear-gradient(to bottom,  var(--c-pink) 0%,var(--c-pink) 70%,var(--c-pink) 100%);
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--c-pink)', endColorstr='var(--c-pink)',GradientType=0 );
	}

	@-webkit-keyframes pulseBox {
	  0% {-webkit-box-shadow: 0px 0px 10px 0px rgba(222, 147, 172, 0.6);}
	  100% {-webkit-box-shadow: 0px 0px 18px 0px rgba(222, 147, 172, 0.9);}
	}
	@-moz-keyframes pulseBox {
	  0% {-moz-box-shadow: 0px 0px 10px 0px rgba(222, 147, 172, 0.6);}
	  100% {-moz-box-shadow: 0px 0px 18px 0px rgba(222, 147, 172, 0.9);}
	}
	@-o-keyframes pulseBox {
	  0% {-o-box-shadow: 0px 0px 10px 0px rgba(222, 147, 172, 0.6);}
	  100% {-o-box-shadow: 0px 0px 18px 0px rgba(222, 147, 172, 0.9);}
	}
	@keyframes pulseBox {
	  0% {box-shadow: 0px 0px 10px 0px rgba(222, 147, 172, 0.6);}
	  100% {box-shadow: 0px 0px 18px 0px rgba(222, 147, 172, 0.9);}
	}

	.pulseBox {
	  -webkit-animation-name: pulseBox;
	  -moz-animation-name: pulseBox;
	  -o-animation-name: pulseBox;
	  animation-name: pulseBox;
	  -webkit-animation-duration: 1s;
	  -moz-animation-duration: 1s;
	  -o-animation-duration: 1s;
	  animation-duration: 1s;
	  -webkit-animation-iteration-count: infinite;
	  -moz-animation-iteration-count: infinite;
	  -o-animation-iteration-count: infinite;
	  animation-iteration-count: infinite;
	  -webkit-animation-direction: alternate;
	  -moz-animation-direction: alternate;
	  -o-animation-direction: alternate;
	  animation-direction: alternate;
	  -webkit-animation-timing-function: ease-in-out;
	  -moz-animation-timing-function: ease-in-out;
	  -o-animation-timing-function: ease-in-out;
	  animation-timing-function: ease-in-out;
	  border: 0px;
	}

	@-webkit-keyframes pulseText {
	  0% {text-shadow: 0px 0px 8px rgba(222, 147, 172, 0.7);}
	  100% {text-shadow: 0px 0px 22px rgba(222, 147, 172, 1);}
	}
	@-moz-keyframes pulseText {
	  0% {text-shadow: 0px 0px 8px rgba(222, 147, 172, 0.7);}
	  100% {text-shadow: 0px 0px 22px rgba(222, 147, 172, 1);}
	}
	@-o-keyframes pulseText {
	  0% {text-shadow: 0px 0px 8px rgba(222, 147, 172, 0.7);}
	  100% {text-shadow: 0px 0px 22px rgba(222, 147, 172, 1);}
	}
	@keyframes pulseText {
	  0% {text-shadow: 0px 0px 8px rgba(222, 147, 172, 0.7);}
	  100% {text-shadow: 0px 0px 22px rgba(222, 147, 172, 1);}
	}

	.pulseText {
	  -webkit-animation-name: pulseText;
	  -moz-animation-name: pulseText;
	  -o-animation-name: pulseText;
	  animation-name: pulseText;
	  -webkit-animation-duration: 0.8s;
	  -moz-animation-duration: 0.8s;
	  -o-animation-duration: 0.8s;
	  animation-duration: 0.8s;
	  -webkit-animation-iteration-count: infinite;
	  -moz-animation-iteration-count: infinite;
	  -o-animation-iteration-count: infinite;
	  animation-iteration-count: infinite;
	  -webkit-animation-direction: alternate;
	  -moz-animation-direction: alternate;
	  -o-animation-direction: alternate;
	  animation-direction: alternate;
	  -webkit-animation-timing-function: ease-in-out;
	  -moz-animation-timing-function: ease-in-out;
	  -o-animation-timing-function: ease-in-out;
	  animation-timing-function: ease-in-out;
	  border: 0px;
	}



	.pictureButton,.pictureButton:hover {
		font-size: var(--fs-xlarge);
	    background: none;
	    padding: 5% 5%;
	    opacity: 1;
	    border: none;
	    border-bottom: none;
		font-family: var(--font-hand);
		font-weight:bold; 
		line-height:1.5;
		background-image: url("../../images-webp/system/ui/buttonBackboard.webp");
		background-size: 100% 100%;
	}
	.pictureButton:hover {
		filter:hue-rotate(-25deg);
	}
	br {
		margin: 0.7em;
		display:block;
		content: ""
	}

	input {
		font-size: var(--fs-small);
		max-width: 25vw;
	}
	.accessoryText {
		font-size: var(--fs-xlarge);
		position:absolute;
		transform: skew(-15deg, -15deg);
		width: 145%;
		text-align: center;
		margin-left: -25px;
		margin-top: 80px;
		z-index:1;
		background: #000000A0;
		height: 40px;
		line-height: 40px;
		font-family: var(--font-hand);
	}

	/*Webui stuff*/
	/* Shared container for layout */
	#resultArea {
	  height: 50vh;
	  overflow-y: auto;
	  background: #111;
	  padding: 10px;
	  box-sizing: border-box;
	}

	/* Style for all prompt fields */
	.mobilePromptInput {
		font-size: var(--fs-medium);
	  width: 100%;
	  padding: 10px;
	  margin-bottom: 10px;
	  border: 2px solid #555;
	  background: #222;
	  color: white;
	  box-sizing: border-box;
	  resize: none;
	  height: 30vh;
	}

	/* Keep the generate button touch-friendly */
	.mobileGenerateButton {
		font-size: var(--fs-medium);
	  width: 100%;
	  padding: 12px;
	  background: limegreen;
	  color: black;
	  font-weight: bold;
	  border: none;
	  margin-top: 10px;
	  border-radius: 10px;
	}
	.mobileResetButton {
		font-size: var(--fs-medium);
	  width: 24%;
	  padding: 12px;
	  background: red;
	  color: black;
	  font-weight: bold;
	  border: none;
	  margin-top: 10px;
	  border-radius: 10px;
	}

	.mobileBatchSize {
		width: 100%;
		display: flex;
		margin: auto;
	}
	.mobileSizeSelect {
		width: 100%;
		display: flex;
		margin: auto;
	}

	.unselectable {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.newKeyword {
		color: #9bffa8;
	}
	.removedKeyword {
		color: #ff5227;
	}

	.modUploadWrapper{
	    width:100%;
	    display:flex;
	    justify-content:center;
	    margin-top:30px;
	}

	.modUploadZone{
		font-size: var(--fs-medium);
	    width:420px;
	    height:160px;

	    display:flex;
	    align-items:center;
	    justify-content:center;

	    text-align:center;
	    white-space:pre-line;

	    font-weight:bold;

	    background:#665533CC;
	    border-radius:30px;
	    border-bottom:4px solid var(--c-gold);

	    color:var(--c-blue);
	    text-shadow:2px 2px #00355A;

	    cursor:pointer;
	    transition:0.25s;

	    outline:3px dashed var(--c-gold);
	    outline-offset:-10px;
	}

	.modUploadZone:hover{
	    transform:scale(1.05);
	}

	.modUploadZone.dragHover{
	    background:#776644CC;
	    outline:3px dashed var(--c-blue);
	}

	.search-results-dropdown {
	    position: absolute;
	    width: 100%;
	    max-height: 200px;
	    overflow-y: auto;
	    background: #2a2a2a;
	    border: 2px solid var(--c-cyan);
	    z-index: 100;
	}
	.search-row {
	    padding: 8px;
	    cursor: pointer;
	    border-bottom: 1px solid #444;
	}
	.search-row:hover {
	    background: #3a3a3a;
	    color: var(--c-cyan);
	}
	.item-insert-card h3 {
		font-size: var(--fs-small);
	    margin: 0 0 10px 0;
	    color: #f1c40f;
	}

	/* Add this to your stylesheet */
	.card-delete-btn {
	    background: none;
	    border: none;
	    outline: none;
	    transition: transform 0.1s ease;
	}

	.card-delete-btn:hover {
	    transform: scale(1.2);
	    color: #ff5f5f; /* Give it a little pop on hover */
	}

	/* Make the nested container slightly smaller than the parent */
	.dialogueContainer.syrup .dialogueContainer.syrup {
	    width: 95%;
	    margin: 10px auto;
	    background-color: rgba(30, 20, 0, 0.9); /* Slightly darker to create depth */
	    box-shadow: 5px 5px #0008; /* Smaller shadow for the nested child */
	}




	/* The main workspace */
	/* Container for the whole editor space */
	.syrup-editor-space {
	    display: flex;
	    flex-direction: column;
	    gap: 20px;
	    width: 100%;
	    box-sizing: border-box;
	}

	/* Individual Scene/Event Window */
	.syrup-window {
	    background-color: rgba(50,30,0,0.8);
	    border: 5px solid var(--c-cream);
	    border-radius: var(--radius-md);
	    color: #FFFFFF;
	    font-family: var(--font-hand);
	    display: flex;
	    flex-direction: column;
	    overflow: hidden;
	    box-shadow: 11px 11px #000A, 0 0 20px 2px #000A;
		transition: max-height 0.3s ease;
	}

	/* Sticky Headers and Footers */
	.syrup-header-upper, .syrup-footer-upper {
	    position: sticky;
	    z-index: 10;
	    background-color: rgba(50,30,0,0.8);
	    padding: 10px 15px;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}
	.syrup-header-upper { top: 0; border-bottom: 3px solid var(--c-cream); }
	.syrup-footer-upper { bottom: 0; border-top: 3px solid var(--c-cream); justify-content: center; gap: 15px; }

	/* Dynamic Content Areas */
	.syrup-header-lower {
	    background-color: rgba(255,255,255,0.1);
	    padding: 10px 15px;
	    border-bottom: 2px solid var(--c-cream);
	    display: flex;
	    flex-wrap: wrap;
	    gap: 10px;
	}
	.syrup-contents {
	    padding: 15px;
	    overflow-y: auto; /* Allows scrolling inside the buffer */
	    flex-grow: 1;
	}
	.syrup-footer-lower {
	    background-color: rgba(0,0,0,0.5);
	    padding: 5px 15px;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}

	/* Inputs and Buttons */
	.syrup-textarea {
		font-size: var(--fs-large);
	    width: 100%;
	    min-height: 200px;
	    background-color: rgba(50,30,0,0.8);
	    color: var(--c-cream);
	    border-radius: 8px;
	    border: 2px solid #509cea;
	    padding: 10px;
	    box-sizing: border-box;
	}
	.syrup-btn {
	    background-color: var(--c-cream);
	    color: #503200;
	    border: none;
	    padding: 8px 15px;
	    border-radius: 8px;
	    font-weight: bold;
	    cursor: pointer;
	    transition: 0.2s;
	}
	.syrup-btn:hover { background-color: #FFFFFF; }
	.syrup-btn-danger { background-color: #ff6b6b; color: white; }

	/* Collapse state */
	.syrup-window.collapsed .syrup-contents, 
	.syrup-window.collapsed .syrup-header-lower, 
	.syrup-window.collapsed .syrup-footer-upper {
	    display: none;
	}

	.syrup-editor-row {
	    display: flex;
	    align-items: flex-start;
	    border-bottom: 1px solid #444;
	    background: #222;
	    padding: 2px 0;
	}

	.syrup-line-number {
	    width: 30px;
	    text-align: right;
	    padding-right: 10px;
	    color: #666;
	    user-select: none;
	    font-family: monospace;
	}

	.syrup-line-input {
	    flex-grow: 1;
	    color: #eee;
	    font-family: monospace;
	    outline: none;
	    white-space: pre-wrap;
	    word-break: break-all;
	}

	.syrup-line-input:focus {
	    background: #333;
	}

	.syrup-line-req-btn {
		font-size: var(--fs-tiny);
	    opacity: 0.3;
	    transition: opacity 0.2s;
	    margin-left: 10px;
	}

	.syrup-editor-row:hover .syrup-line-req-btn {
	    opacity: 1;
	}

	.syrup-editor-container {
	    position: relative; /* Crucial so the overlay stays inside the editor */
	}

	.syrup-editor-overlay {
	    position: absolute;
	    top: 0; left: 0; right: 0; bottom: 0;
	    background: rgba(0, 0, 0, 0.6);
	    z-index: 100;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}

	.syrup-req-modal {
	    background: #2a2a2a;
	    border: 1px solid #555;
	    padding: 15px;
	    border-radius: var(--radius-sm);
	    min-width: 400px;
	    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
	    z-index: 101;
	}

	.syrup-modal-buttons {
	    display: flex;
	    justify-content: flex-end;
	    gap: 10px;
	    margin-top: 15px;
	    padding-top: 10px;
	    border-top: 1px solid #444;
	}

	.syrup-line-input {
	    position: relative;
	    white-space: pre-wrap;
	}

	.grottoBtn {
		opacity: 0.8;
	}
	.grottoBtn:hover {
		opacity: 1;
	}

	/* font-sizes for elements whose rule lives only in the other orientation */
	.titleAuthor { font-size: var(--fs-xlarge); }
	.dialogueContainer.basic { font-size: var(--fs-large); }
}

/* ===== SMALL LANDSCAPE (phones & handhelds, short height) — let popups fill more of the screen ===== */
@media (orientation: landscape) and (max-height: 520px) {
	/* Popups ran off the bottom: 94vh counts the area BEHIND the mobile browser bar, so the box exceeded the visible
	   height. Use dvh (dynamic/visible viewport) with a vh fallback, and let the popup scroll so its bottom is reachable. */
	.popup, .popup::after { width: 94vw; height: 94vh; height: 90dvh; top: 3vh; left: 3vw; }
	div.popup { overflow-y: auto; }
	/* Mobile landscape: bigger nav square than desktop's 40%, but height-capped so it never overflows the short screen. Tune the 55%. */
	.playerRoom { width: min(55%, 88vh); }

	/* --- Notable mobile-landscape fixes (short screens): shrink oversized grid content --- */
	/* Inventory/shop items were 270x140 -> too big (one row + whitespace). Shrink item + grid columns together. */
	:root { --inv-cols: repeat(auto-fill, 160px); }
	.item { width: 100%; min-height: 25vh;}
	/* Gallery: the elaborate syrup "tab" cards are unusable multi-up on a short screen -> ONE per row (full width).
	   (Do NOT shrink .thumbnailImage globally — it's the same class used full-size in normal dialogue.) */
	#galleryGrid { grid-template-columns: 1fr; }
	/* Trophies: 3 columns (vs 5 on desktop) so cards are ~2x bigger. Keep the TRUE 2:1 aspect — do NOT cap height while
	   width fills the cell (that squished them). Cards are tall, so the popup scrolls (see dvh + overflow-y above). */
	#achievements { grid-template-columns: repeat(3, 1fr); }
	/* Windows ran off-screen (couldn't see the bottom): the landscape windowTitle is line-height:2.5 (~tall), which on a
	   short popup pushed the body past the popup's overflow:hidden edge. Compact the title so the content fits. */
	.windowTitle { line-height: 1.3; }
}