/* ============================================
    Variables for Theme
   ============================================ */

:root {
  --back-color:      #fff9f0; 	/* Light background color */
  --text-color:      #333333; 	/* Dark gray for text */
  --primary-color:   #aa0a12;  	/* Blood red */
  --secondary-color: #cd1017;	/* Lighter Blood red */
  --third-color:     #cd9710;	/* Orangy */
  --fourth-color:    #cda410;	/* Goldy */
  --gold-color:		 #d4af37;
  --black-color:	 #000;

  --font-header:  'Cinzel',   	'Nordic Chance',	'Lodeh',	sans-serif;
  --font-text:    'IM Fell DW Pica', 'IM Fell English', 'Pirata One',  serif, 'Lodeh';
  --font-fancy:   'kings and pirates', 'Pirata One', 	'Cinzel';
  --font-impact:  'JSL Ancient', 'MiddleSaxonyText', 'Kanzlei';
}

/* ============================================
   Global Styles
   ============================================ */
body, html {
  	color: 				var(--text-color);
  	font-family: 		var(--font-text);
  	background-color: 	var(--back-color);
	margin: 0;
    padding: 0;
  	text-align: center; /* Centers text horizontally */
 	height: 	100%;
	font-size: 19px;
	}




/* ============================================
   Layout and Containers
   ============================================ */
.container {
   width: 80%; /* Adjust width as needed */
   margin: auto; /* This centers the .container div horizontally */
   min-width: 300px; /* Prevent compression */
   }

.centered-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center; /* Center align text and inline elements like buttons */
   }

#npc-container {
   width: 100%; /* Full width of the container */
   max-width: 100%; /* Ensures that the container does not exceed the width of its parent */
   overflow-x: auto; /* Horizontal scrollbar if content is too wide */
   }

/* ============================================
  Header and Navigation
  ============================================ */
.ads-banner {
    max-width: 728px;
    /* or whatever size your slot supports */
    margin: 0.5rem auto 1rem;
    text-align: center;
    }
header {
	background-color: var(--black-color);
	color: var(--primary-color);
	padding: 10px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	font-family: var(--font-header);
	font-size:	1.6em;
	}

header h1 {
	font-family: "Cinzel Decorative", var(--font-header);
    color: var(--secondary-fancy);
    text-decoration: none;
	margin-left: 30px; /* Adjust as necessary */
	text-decoration: none;
	}

header h1 a {
    text-decoration: none;
	color: inherit;
	}


nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
	}

nav ul li {
    margin-right: 20px; /* Space between links */
	}

nav ul li a {
    color: var(--primary-color); /* Link color */
    text-decoration: none;
	}

header .fantasy-button{
    border: none;
    padding: 10px 20px;
    font-size: 1.0em;
    font-family: "Cinzel Decorative", var(--font-header);
    cursor: pointer;
	}

header .fantasy-button:hover{
    font-size: 1.1em;
	}
/* Dropdown menu styling */
.dropdown-menu {
	display: none; /* Hidden by default */
	position: absolute;
	top: 100%; /* Position right below the button */
	right: 0; /* Align to the right of the header */
	background-color: var(--black-color);
	list-style: none;
	margin: 0;
	padding: 10px 0;
	z-index: 1000;
	color: var(--gold-color); /* gold text */
	border: 2px solid var(--gold-color); /* gold border */
	font-family: var(--font-fancy);
	text-shadow: 0px 0px 8px var(--fourth-color);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	border-radius: 8px;
	transition: all 0.5s ease;
	}

.dropdown-menu li {
	margin: 0;
	padding: 0;
	}

.dropdown-menu li a {
	display: block;
	color: var(--gold-color);
	padding: 10px 20px;
	text-decoration: none;
	font-family: var(--font-fancy);
	font-size: 16px;
	transition: background-color 0.5s ease;
	}

.dropdown-menu li a:hover {
	background-color: var(--secondary-color);
	color: var(--back-color);
	}

/* Show dropdown menu when button is active */
nav.active .dropdown-menu {
	display: block; /* Reveal the menu */
	}


/* ============================================
   Typography
   ============================================ */

h1 {
	font-family: var(--font-fancy);
	color: var(--primary-color);
	font-size: 1.5em;
   }

h2 {
	font-family: var(--font-header);
	color: var(--primary-color);
	margin-bottom: -10px;
	font-size: 1.3em;
	}

h3, h4 {
	font-family: "Cinzel Decorative", var(--font-header);
	font-size: 0.8em;
	font-weight: bold;
	/*font-style: italic;*/
	line-height: 1.2em; /* Improving readability */
	}

h5  {
	color: var(--secondary-color);
	font-size: 1em;
	}


h1, h2, h3, h4, h5 {
	margin-top: 0px; /* Increase space above the text */
	margin-bottom: 0px; /* Increase space below the text */
	}


p, h1, h2, .btn {
	word-wrap: break-word; /* Ensures text doesn't overflow */
	}

h5 {
	font-family: var(--font-fancy);
	color: var(--secondary-color);
	line-height:	1em;
	}
h6 {
  	color: 				var(--text-color);
	font-family: 		var(--font-header);
  	margin: 	10;
  	padding: 	10;
  	text-align: center; /* Centers text horizontally */
 	height: 	100%;
    margin: 0;
	font-weight: bold;
	font-size:1.1em;
	}

b {
	color: var(--primary-color);
	font-family: var(--font-impact);
	font-size: 1.2em;
	}

i {
	color: var(--text-color);
	font-family: var(--font-impact);
	font-size: 1.1em;
	}

u {
	color: var(--primary-color);
	font-family: var(--font-fancy);
	text-decoration: underline dotted var(--text-color);
	font-size:0.8em;
	}

/* ============================================
   Form Styles
   ============================================ */

#story-form .form-group {
   text-align: center;
   }

#story-form input[type=text] {
   border: 1px solid var(--secondary-color);
   border-radius: 4px;
   padding: 10px;
   width: 100%;
   max-width: 500px; /* To prevent the input from becoming too wide */
   margin-bottom: 10px;
   }

/* ============================================
  Interactive Elements
  ============================================ */
.fantasy-button {
	background-color: var(--black-color); /* black background */
	color: var(--gold-color); /* gold text */
	border: 2px solid var(--gold-color); /* gold border */
	padding: 10px 20px;
	font-family: var(--font-fancy);
	text-shadow: 0px 0px 8px var(--fourth-color);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	border-radius: 8px;
	transition: all 0.5s ease;
	}

.fantasy-button:hover {
	background-color: var(--primary-color);
	color: var(--black-color);
	cursor: pointer;
	border-color: var(--black-color);
	font-size:	0.9em;
	}


/* ============================================
   Media Queries & Backstory Elements
   ============================================ */
/* Ensure the form and story container are not too narrow on smaller screens */
@media (max-width: 750px) {
   .book-style, #story-form input[type=text] {
       width: 90%;
       margin-left: auto;
       margin-right: auto;
	   }
	}
.scroll-section {
   background: rgba(255,255,255,0.8); /* Semi-transparent white for a parchment look */
   border-radius: 10px; /* Rounded corners */
   padding: 20px; /* Space inside the borders */
   margin: 20px auto; /* Vertical spacing and horizontal centering */
   box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow for depth */
	}
.portrait-container {
    max-width: 	100%; 		/* Ensures the portrait fits within the story container */
    margin: 	10px auto; 	/* Centers the portrait and adds some spacing */
    text-align: center; 	/* Centers the image */
	}

.portrait-container img {
    float: 	right; /* This will align the image to the right */
    margin: 0 0 10px 10px; /* This adds some space around the image */
    width: 	auto; /* It will maintain the original image width */
    max-width: 250px; /* It ensures the image is no wider than 150px */
    height: auto; /* It will maintain the aspect ratio of the image */
	}

/* ============================================
   Custom Classes
   ============================================ */



/* Link styling for the API key help text */
#api-key-help a {
    color: var(--primary-color); /* Match the button color for consistency */
    text-decoration: underline;
	}


#api-key-help a:hover {
    color: var(--secondary-color);
	}




































/* Styling for the story section to look like a page from a magical tome */
.book-style {
    color: #301b09; /* Dark brown text color for better readability on parchment */
    font-family: var(--font-impact), 'Dancing Script', cursive; /* A cursive font that feels whimsical */
    padding: 20px;
    margin-top: 10px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Soft shadow for depth */
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}


.story-output {

    white-space: pre-wrap;
    text-align: left;
    padding: 15px;
    margin-top: 20px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.8); /* Translucent white to show some parchment texture */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); /* Inner shadow for an inset effect */
    overflow: auto;
    font-size: 18px; /* Larger font size for easy reading */
    position: relative; /* For positioning the image within the story */
}
























.ability-scores {
    margin: auto; /* Center the table on the page */
    border-collapse: collapse; /* Optional: collapse the border */
    background-color: var(--back-color); /* Background color for the table */
    color: var(--text-color); /* Color of the text */
    border-radius: 2px; /* Rounded corners for the table */
    overflow: hidden; /* Ensures the border-radius clips the content */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for depth */
}

.ability-scores th, .ability-scores td {
    border: 2px solid var(--primary-color); /* Border color for the cells */
    padding: 3px; /* Padding inside the cells */
    text-align: center; /* Center the text in the cells */
}

.ability-scores th {
    background-color: var(--primary-color); /* Darker background for the header */
    color: var(--back-color); /* Light text color for the header */
  	font-family: var(--font-fancy);
}





.bc4 {
    font-weight: italic;
    color: var(--third-color);
	font-size:0.7em;

}


.fantasy-select {
    background-color: var(--black-color); /* black background */
    color: var(--gold-color); /* gold text */
    border: 2px solid var(--gold-color); /* gold border */
    padding: 10px;
    font-family: var(--font-fancy);
    border-radius: 8px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    appearance: none; /* Remove default style of select */
    width: 100%; /* You might adjust this based on your layout */
    cursor: pointer;
	text-shadow: 0px 0px 8px var(--gold-color);
	transition: all 3s ease;
}

.fantasy-select:hover {
    /*/background-color: var(--fourth-color);/*/
	text-shadow: 0px 0px 10px var(--black-color);
	transition: all 1s ease;
	color: var(--primary-color);
	cursor: pointer;
	border-color: var(--primary-color);
	/*/font-size: 1.1em/*/
	}

.fantasy-select:focus {
    outline: none; /* Removes the default focus outline */
    border-color: var(--gold-color); /* Brighter gold for focus */
}

.fantasy-option {
    background-color: var(--black-color); /* black background for options */
    color: var(--gold-color); /* gold text for options */
}

/* Styling for the dropdown arrow - using a custom arrow image */
.fantasy-select {
    background-position: right 10px center; /* Positioning the arrow image */
    background-repeat: no-repeat;
	text-align: center; /* Centers text horizontally */
}

.level {
	width: 50%;
	}

.btn-main {
		  background-color: #007bff;
		  color: #fff;
		  padding: 12px 24px;
		  font-size: 18px;
		  border: none;
		  border-radius: 4px;
		  cursor: pointer;
		}

.btn-main:hover {
		  background-color: #0056b3;
		}

		/* Style for the number input field */
input[type="number"].fantasy-input {
		    background-color: var(--black-color); /* Black background */
		    color: var(--gold-color); /* Gold text */
		    border: 2px solid var(--gold-color); /* Gold border */
		    padding: 10px;
		    font-family: var(--font-header); /* Matching font */
		    border-radius: 8px;
		    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
		    appearance: textfield; /* Removes the default styling */
		    width: 50%; /* Adjust width to fit layout */
			text-align: center; /* Centers text horizontally */
		}

		/* Hover effect for the number input */
		input[type="number"].fantasy-input:hover {
			color: var(--primary-color); /* Gold text */
			text-shadow: 0px 0px 10px var(--black-color);
			transition: all 1s ease;
			color: var(--primary-color);
			cursor: pointer;
			border-color: var(--primary-color);
		}

		/* Focus effect for the number input */
		input[type="number"].fantasy-input:focus {
		    outline: none; /* Removes default focus outline */
		    border-color: #ffd700; /* Brighter gold for focus */
		}

		/* Customizing the arrows for number input */
		input[type="number"].fantasy-input::-webkit-inner-spin-button,
		input[type="number"].fantasy-input::-webkit-outer-spin-button {
		    -webkit-appearance: none; /* Removes default arrow styling */
		    appearance: none; /* Ensures cross-browser consistency */
		    margin: 0; /* Removes extra margin added by browsers */
		}

		input[type="number"].fantasy-input::after {
		    content: '+'; /* You can add a custom arrow here using an image or character */
		}

.container {
    min-width: 200px; /* Prevent it from compressing too short */
	}

.npc-container {
    max-width: 794px;  /* A4 width at 96 DPI */
    margin: 20px auto;
    padding: 20px;
    background-color: #fdfdfd;
    border: 1px solid #ccc;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
    font-family: 'Garamond', serif;
}

.npc-header {
    text-align: center;
    margin-bottom: 30px;
    grid-column: 1 / -1;
}

.npc-header h2, h1 {
    margin: 5px 0;
}


/* Each page is the size of A4 for print */
.npc-page {
    width: 794px;  /* A4 width at 96dpi */
    height: 1122px; /* A4 height at 96dpi */
    margin: 20px auto;
    padding: 10px;
    box-sizing: border-box;
    page-break-after: always;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
	}


.npc-box, .npc-textbox, .npc-scores{
    border: 2px solid #333; /* Styling for each box */
    border-radius: 4px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1); /* Adds depth to boxes */
    background-color: #fff; /* White background for readability */
    transition: all 0.3s ease;
    word-wrap: break-word; /* Breaks long words to fit within the box */
	align-self: start;
	gap: 0px;
	flex-grow: 1;
	z-index: 1; /* Place it behind text */

}
.npc-box {
    padding: 5px;
	position: relative; /* Enable positioning for the pseudo-element */
    transition: all 0.3s ease;
	z-index: 2;

}

.npc-scores {
    flex-direction: column; /* Stack children vertically */
    gap: 2px; /* Add spacing between boxes */
    align-items: stretch; /* Ensure all boxes align to the container width */
}



.symbol{
    position: absolute;
    top: 5px;
    left: 5px;
    width: 30px; /* Circle size */
    height: 30px; /* Circle size */
    border-radius: 50%; /* Make it circular */
    background-color: rgba(0, 0, 0, 0.2); /* Semi-transparent background */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px; /* Adjust symbol size */
    color: rgba(0, 0, 0, 0.5); /* Symbol color */
    pointer-events: none; /* Prevent interaction blocking */
	z-index: -1; /* Place it behind text */
}

/* Print-specific styles */



.class-feature {
  margin-bottom: 1em;
  padding: 0.5em;
  border-left: 4px solid #888;
  background-color: #f8f8f8;
  font-size: 0.95em;
}
.class-feature h4 {
  margin: 0;
  font-size: 1.1em;
  color: #333;
}

.class-feature .level {
  font-size: 0.9em;
  color: #666;
  margin-left: 0.5em;
}

strong {
  	font-family: 'Pirata One', 'IM Fell English',;
	}




#p5-holder {
  /* Center the canvas and prevent accidental scrolling */
  display: flex;
  justify-content: center;
  align-items: center;
}

#spinner {
  font-size: 4.2rem;
  color: #ffd700cc; /* golden and slightly transparent */
  margin-bottom: 12px;
  filter: drop-shadow(0 0 12px #ffd70099);
  text-shadow: 0 0 7px #fff8, 0 0 22px #ffd700cc;
  user-select: none;
}

canvas {
	display: block;
	margin: 0 auto; }


/*-----------------------------------------------------
Loader
_____________________________________________*/


   #loader {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.95);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
	display: none;        /* ➊ HIDDEN until JS says otherwise */
	opacity: 0;           /* smooth fade-in/out */
	transition: opacity 0.25s ease;
	pointer-events: none;
    }
#loader.show {          /* ➋ visible state */
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

    .sol-layer {
      position: absolute;
      font-size: 8rem;
      color: gold;
      text-shadow: 0 0 6px #fff, 0 0 22px #ffd700;
      animation: rotate 14s linear infinite;
      pointer-events: none;
    }

    .orbit-layer {
      position: absolute;
      border: 1px dashed rgba(212, 175, 55, 0.3);
      border-radius: 50%;
      animation: rotate linear infinite;
      pointer-events: none;
    }

    .orbit1 {
      width: 160px; height: 140px;
      animation-duration: 10s;
    }

    .orbit2 {
      width: 230px; height: 200px;
	  animation: rotateReverse linear infinite;
      animation-duration: 15s;
    }

    .orbit3 {
      width: 300px; height: 260px;
      animation-duration: 20s;
    }

    .planet {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 2.0rem;
      color: gold;
      transform-origin: 0 0;
      pointer-events: none;
    }

    @keyframes rotate {
      to { transform: rotate(360deg); }
    }
	@keyframes rotateReverse {
		to { transform: rotate(-360deg); }
		}


/* Tablet carousel */
.tablet-wrapper {
    position: relative;
    margin: 2.0rem auto;
    padding: 2.5rem 3rem 3.25rem;
    max-width: 820px;
    background: rgba(255, 249, 240, 0.92);
    border: 4px solid var(--gold-color);
    border-radius: 28px;
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.25);
    overflow: visible;
    animation: tabletFloat 8s ease-in-out infinite;
}

@keyframes tabletFloat {

    0%,
    100% {
        transform: translateY(0px) rotate(0.2deg);
    }

    50% {
        transform: translateY(-12px) rotate(-0.2deg);
    }
}

.tablet-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tablet-title {
    flex: 1;
    margin: 0;
    text-align: center;
    font-family: var(--font-header);
    font-size: 1.5rem;
    color: var(--primary-color);
}

.tablet-nav {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 2px solid var(--gold-color);
    background: rgba(0, 0, 0, 0.99);
    color: var(--gold-color);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tablet-nav:hover {
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(205, 151, 16, 0.6);
}

.tablet-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.tablet-rotator {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.generator-panel {
    flex: 0 0 100%;
    padding: 0 1rem;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box; 
}

.generator-panel.is-active {
    opacity: 1;
    transform: translateY(0);
}

.generator-panel h3 {
    margin-top: 0.5rem;
    font-size: 1.4rem;
}

.tablet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.tablet-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.tablet-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid var(--primary-color);
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.tablet-dot.is-active {
    background: var(--primary-color);
    transform: scale(1.25);
}

.tablet-wrapper .fantasy-select,
.tablet-wrapper .number-input {
    width: 100%;
}

.tablet-wrapper .fantasy-button {
        width:min(100%; 220px);
        margin-inline: auto;
        }
   
.generator-panel form {
    width: min(100%, 440px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    }   


.tablet-wrapper .number-input {
    display: inline-flex;
    align-items: stretch;
    overflow: visible;
    border-radius: 10px;
    border: 2px solid rgba(170, 10, 18, 0.35);
    }
    
.tablet-wrapper .number-input .fantasy-button {
    width: auto;
    flex: 0 0 3rem;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1;
    display: grid;
    place-items: center;

    }
    
.tablet-wrapper .number-input input[type="number"] {
    flex: 1 1 auto;
    border: none;
    text-align: center;
    padding: 0.65rem;
    background: black;
    }
    
.tablet-wrapper .number-input input[type="number"]:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(205, 151, 16, 0.45);
    }
    






.npc-grid {
    display: grid;
    /* Enable grid layout */
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    /* Flexible */
    /*grid-template-rows: repeat(auto-fit, minmax(100px, 1fr)); /* Flexible */
    width: 100%;
    /* Ensures grid spans the full container */
    /*max-width: 800px;
    /* A4 paper width for printing */
    margin: 0 auto;
    /* Centers the grid */
    background-color: var(--back-color);
    /* Background for the grid */
    gap: 1px;
    transition: all 0.3s ease;
    /* Smooth animations when repositioning */
    align-items: start;
    /* Align items to the top */
    overflow: visible;
}

.npc-textbox {
    padding: 5px;
    border: 2px solid #AAA;
    /* Styling for each box */
    transition: all 0.3s ease;
    position: relative;
    /* Enable positioning for the pseudo-element */

}

.npc-textbox h2 {
    font-size: 1.5em;
}

  .npc-textbox--full {
      grid-column: 1 / -1;
  }



  @page {
      margin: 1px;
  }

  @media print {
    .npc-page {
        width: auto;
        height: auto;
        margin: 0 auto;
        padding: 0;
        page-break-after: always;
        }

          /* let the browser create as many columns as fit */
    .npc-grid {
        display: block;
        column-width: 6cm;
        /* portrait → 3 columns, landscape → 4+ */
        column-gap: 0.6cm;
        column-fill: balance;
        background: none;
        }

    .npc-box,
    .npc-textbox,
    .npc-scores {
        display: inline-block;
        width: calc(100% - 0.2cm);
        box-sizing: border-box;
        margin: 0 0 1px;
        padding: 1px;
        break-inside: avoid;
        page-break-inside: avoid;
        }

    .npc-textbox--full,
    .npc-header {
        column-span: all;
        display: block;
        }

    .note-background {
        display: block;
         }
  }

  /* dotted note background */
  /* note lines overlay */
  .note-lines::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: repeating-linear-gradient(to bottom,
              rgba(0, 0, 0, 0.15) 0,
              rgba(0, 0, 0, 0.15) 1px,
              transparent 1px,
              transparent 14px);
      z-index: -1;
  }

  @media print {
      .note-lines::before {
          display: block;
      }
  }

  @media screen {
      .note-lines::before {
          display: none;
      }
  }