@font-face {
    font-family: '1942 report';
    src: url('/fonts/1942-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
  --std-die-face-color: #ffffff;
  --std-die-pips-color: #333333;
  --std-die-border-color: #333333;
  --std-die-held-face-color: #f6d93a; /* Fallback held face color */
  --std-die-held-border-color: #be0201; /* Fallback held border color */
}

body {
  font-family: 'Inter', sans-serif;
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: repeat, no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 98vh;
  margin: 0;
  overflow-x: hidden;
}

h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #be0201;
  margin-bottom: 0.3rem;
}

.game-container {
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: repeat, no-repeat;
  border-radius: 1.2rem;
  max-width: 900px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin: 0 auto;
}
#game-content {
  max-width: 800px;
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: repeat, no-repeat;
  padding: 0 0 15px 0;
  font-size: 15px;
  margin: 0 auto;
}
.top-section-columns {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.3rem;
}
.app-header {
  width: 100%;
  background-color: #1a202c;
  padding: 0.2rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 5px;
}
.header-left-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-left: .5rem;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.header-logo {
  height: 36px;
  width: auto;
}
.header-title a {
  font-family: '1942 report', sans-serif;
  color: #f6d93a;
  font-size: 1.6rem;
  white-space: nowrap;
  letter-spacing: -0.18em;
  word-spacing: -0.3em;
  text-decoration: none;
}
.header-title a:hover {
  color: #be0201;
}
.header-links {
  display: none; /* Hidden on mobile */
}
.header-nav-link {
  font-family: 'Oswald', sans-serif;
  padding: 0;
  border-radius: 0;
  font-size: 1.2rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
  background-image: none;
  background-color: transparent;
  color: #f6d93a;
  text-decoration: none;
}
.header-nav-link:hover {
  color: #be0201;
}
.hamburger-icon {
  width: 25px;
  height: 20px;
  position: relative;
  cursor: pointer;
  z-index: 1001;
  background-color: transparent;
  border: none;
}
.hamburger-icon span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #f6d93a;
  border-radius: 2px;
  transition: all 0.3s ease;
  position: absolute;
  left: 0;
}
.hamburger-icon span:first-child {
  top: 0;
}
.hamburger-icon span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.hamburger-icon span:last-child {
  bottom: 0;
}
.hamburger-icon:hover span {
  background-color: #be0201;
}
.mobile-nav-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateX(-100%);
  transition: transform 0.3s ease-out;
  padding: 1.5rem;
  gap: 1rem;
}
.mobile-nav-menu.menu-open {
  transform: translateX(0);
}
.mobile-nav-menu .header-nav-link {
  font-size: 2.5rem;
  padding: 0.5rem 1rem;
  color: #f6d93a;
  text-decoration: none;
  width: 100%;
  text-align: center;
}
.mobile-nav-menu .header-nav-link:hover {
  color: #be0201;
}

.welcome-message {
  font-weight: 600;
  font-size: 0.9rem;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

.header-right-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 10px;
}

.login-dropdown {
  position: absolute;
  top: 55px;
  right: 0;
  background-color: #1a202c;
  border: 1px solid #718096;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 200px;
}

.login-dropdown.show {
  display: flex;
}
.login-dropdown input[type="text"], .login-dropdown input[type="password"] {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border: 1px solid #4a5568;
  border-radius: 0.3rem;
  background-color: #2d3748;
  color: #e2e8f0;
	box-sizing: border-box;
}
.login-dropdown input::placeholder {
  color: #a0aec0;
}
.login-dropdown .button {
  width: 100%;
  margin-top: 0.5rem;
}

.login-dropdown .signup-link {
  display: block;
  text-align: center;
  margin-top: 0.75rem;
  color: #f6d93a;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
}

.login-dropdown .signup-link:hover {
  color: #be0201;
}
#login-button {
  text-decoration: none;
}
.dice-column {
  background: radial-gradient(circle at center, rgba(26,109,26, 0.4) 0%, rgba(12,56,12, 0.7) 100%), url('/game/assets/images/velvet-bg.jpg') repeat;
  border: 4px solid #f6d93a;
  border-radius: 0.8rem;
  padding: 0.8rem;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dice-column.transparent-background {
    background: transparent;
    border: none;
    box-shadow: none;
}

#dice-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.die {
  width: 18%; /* Set a flexible width (100% / 5 dice = 20% per die, minus a bit for gaps) */
  aspect-ratio: 1 / 1; 
  max-width: 115px;
  min-width: 40px;
   border-color: #333;
  border-width: 2px;
  border-style: solid;
  border-radius: 0.7rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  place-items: center;
  cursor: pointer;
box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.25), 
				inset 0 0 3px 1px rgba(0, 0, 0, 0.25),
				0 3px 5px rgba(0, 0, 0, 0.1); 
  /* MODIFIED LINE: Added width and max-width */
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, width 0.3s ease-in-out, max-width 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}

/* NEW/MODIFIED RULES FOR DYNAMIC STANDARD DICE */
body.dice-set-standard .die {
  background-color: var(--std-die-face-color);
  border-color: var(--std-die-border-color);
}

body.dice-set-standard .die .dot {
  background-color: var(--std-die-pips-color);
box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.4);
}
/* END OF NEW/MODIFIED RULES */

body:not(.dice-set-standard) .die[data-value="1"]::before, 
body:not(.dice-set-standard) .die[data-value="0"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/game/assets/images/star-dice.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* This rule now only styles the pips for the Manifesto default dice */
.die .dot {
  width: 85%; /* Use a percentage for responsive width */
  aspect-ratio: 1 / 1;
  border-radius: 50%; /* This will keep it a perfect circle */
  z-index: 1;
  position: relative;
}

/* This rule sets the dark pip color for the default Manifesto dice */
body:not(.dice-set-standard) .die .dot {
  background-color: #333;
  box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.3);
}

/* This MORE SPECIFIC rule correctly applies the custom pip color for Standard Dice */
body.dice-set-standard .die .dot {
  background-color: var(--std-die-pips-color);
}



.dot-pos-1 {
  grid-area: 1 / 1;
}
.dot-pos-2 {
  grid-area: 1 / 3;
}
.dot-pos-3 {
  grid-area: 2 / 1;
}
.dot-pos-4 {
  grid-area: 2 / 3;
}
.dot-pos-5 {
  grid-area: 3 / 1;
}
.dot-pos-6 {
  grid-area: 3 / 3;
}
.dot-center {
  grid-area: 2 / 2;
}
/* General "held" transform, applies to all dice sets */
.die.held {
  transform: translateY(-12px);
}

/* Sets the held colors ONLY for the default Manifesto dice */
body:not(.dice-set-standard) .die.held {
    background-color: #f6d93a;
    border-color: #be0201;
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.25), /* Add this line */
                inset 0 0 3px 1px rgba(0, 0, 0, 0.3), 
                0 3px 5px rgba(0, 0, 0, 0.1);
}

/* Sets the dynamic held colors for Standard Dice */
body.dice-set-standard .die.held {
  background-color: var(--std-die-held-face-color);
  border-color: var(--std-die-held-border-color);
  box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.1);
}
body.dice-set-standard .die.held .dot {
  background-color: var(--std-die-held-pips-color);
    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.4);
}
.die:hover:not(.held) {
  transform: translateY(-2px);
  border-color: #be0201;
}
.star-die-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  transform: scale(1.06);
}

.message-center-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fdfdfa;
  background-image: url('/game/assets/images/paper-texture.webp');
  border: 2px solid #ccc;
  border-radius: 1rem;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1);
  padding: 0.2rem 0.8rem;
  min-height: 60px;
}
.messages-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  min-height: 2.6rem;
flex-grow: 1; 
  min-width: 0;
}
.message-center-wrapper p {
  margin: 0;
  font-size: 0.9rem;
  color: #1a202c;
}
.player-info-line {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 0;
flex-wrap: nowrap;
}
.player-info-line span {
  white-space: nowrap;
}
.game-info-line {
  display: block;
  margin-top: 0;
  text-align: left;
}
.game-info-line p {
  display: block;
  text-align: left;
}
.game-messages {
  font-weight: bold;
  color: #be0201;
  flex-grow: 1;
  text-align: left;
overflow-wrap: break-word
}

#game-message {
  font-size: .9rem;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
white-space: pre-wrap; 
}

#player-turn, #rolls-left {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

#final-score {
  font-weight: 600;
  color: #be0201;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
#game-message:not(:empty), #final-score:not(.hidden) {
  display: block;
}
.message-center-wrapper #final-score.hidden {
  display: none;
}
.button {
  padding: 0.5rem 1rem;
  border-radius: 0.7rem;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  font-weight: 700;
  border: 2px solid #f6d93a;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(to bottom, #be0201, #a30101);
  color: #f6d93a;
    text-shadow: 1px 1px 3px black;
}
.button:active {
  transform: translateY(1px);
  box-shadow: none;
}
.primary-button:hover,
#start-new-game-from-modal:hover {
  background-image: linear-gradient(to bottom, #f6d93a, #e0c834);
  color: #be0201;
  border-color: #be0201;
      text-shadow: 1px 1px 2px black;
}
#start-new-game-from-modal {
	 padding: 0.2rem 1rem;
    font-size: 26px;
    margin-top: 5px;
}

.header-button {
  padding: 0.3rem 0.25rem;
  border-radius: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid #718096;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(to bottom, #4a5568, #2d3748);
  color: #e2e8f0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
    text-shadow: 1px 1px 3px black;
}
.header-button:hover {
  background-image: linear-gradient(to bottom, #718096, #5c6b7d);
  color: #ffffff;
  border-color: #4a5568;
}

.score-button {
  padding: 0 1rem;
  font-size: 1.3rem;
  border-radius: 0.5rem;
  background-image: linear-gradient(to bottom, #be0201, #a30101);
  color: #f6d93a;
  border-color: #f6d93a;
  white-space: nowrap;
}
.score-button:hover,
.keyboard-highlight {
  background-image: linear-gradient(to bottom, #f6d93a, #e0c834);
  color: #be0201;
  border-color: #be0201;
}

.score-button:disabled {
  background-image: none;
  background-color: #9ca3af;
  cursor: not-allowed;
  box-shadow: none;
  color: #e0e0e0;
  border-color: #b0b0b0;
}
#analysis-button, #new-game-button {
  font-size: 1.2em;
  padding: 0.3em .8em;
  width: auto;
  height: auto;
  display: inline-block;
  text-align: center;
}
.w-full-button {
  min-width: 120px;
}
.custom-checkbox-visual {
  width: 22px;
  height: 22px;
  border: 2px solid #000;
  border-radius: 4px;
background-color: #ffffff;
  transition: all 0.2s ease-in-out;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#chance-chance-toggle:checked + label .custom-checkbox-visual,
#daily-challenge-toggle:checked + label .custom-checkbox-visual {
  background-image: url('/game/assets/images/star-dice.webp');
  background-color: transparent;
}
.scorecard-sections {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  align-items: stretch;
}
.scorecard-section {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
}
.scorecard-section .scorecard-table {
  flex-grow: 1;
}
.scorecard-table {
  width: 100%;
  table-layout: fixed;
  max-width: 800px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  background-color: #fdfdfa;
  background-image: url('/game/assets/images/paper-texture.webp');
  border-radius: 1rem;
  border: 3px solid #8B0000;
  overflow: hidden;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
}
.scorecard-table tbody tr {
    background-color: transparent;
}
.scorecard-table th, .scorecard-table td {
  border-right: 1px solid #a0aec0;
  text-align: center;
  word-wrap: break-word;
  padding: 0 0.3rem;
  border-bottom: 1px solid #a0aec0;
  font-size: 1.3rem;
  font-family: 'Oswald', sans-serif;
  height: 35px;
  line-height: 1;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.scorecard-table th {
  background-color: transparent;
  font-weight: 700;
  color: #000;
}
.scorecard-table tbody tr:last-child td {
  border-bottom: none;
}

/* Category Column (40%) */
.scorecard-table td:first-child {
  text-align: left;
  padding-left: 0.8rem;
  width: 40% !important;
}
.scorecard-table th:first-child {
  text-align: center;
  width: 40%;
}

/* Score Column (60%) */
.scorecard-table th:last-child,
.scorecard-table td:last-child {
  width: 60% !important;
}

.score-category-header {
  background-color: #f7fafc;
  color: #be0201;
  font-weight: 700;
  text-align: center;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid #d1d5db;
}
.scorecard-table tbody tr.total-row {
  font-weight: 700;
  text-decoration: none !important;
  background-color: rgba(0, 0, 0, 0.025); 
}

.total-row.not-bold td {
  font-weight: normal;
}

#tab-upper {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  margin-left: 10px;
}

#tab-lower {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  margin-right: 10px;
}

#ad-modal-overlay, #report-card-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
   height: 100vh;
  background-color: rgba(0,0,0,0.7);
  z-index: 3000;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* Rule to HIDE the modals when they have the .hidden class */
#ad-modal-overlay.hidden, #report-card-modal-overlay.hidden {
  display: none;
}

/* Content style for BOTH modals */
#ad-modal-content {
max-height: 90vh;
  overflow-y: auto;  
  background-color: transparent;
  padding: 0 15px 0 15px;
  border-radius: 10px;
  position: relative;
  max-width: 440px;
  width: 90%;
  text-align: center;
}

#report-card-modal-content {
	max-height: 90vh;
  overflow-y: auto;  
  background-color: #fefefe;
  padding: 0 15px 5px 15px;
  border-radius: 10px;
  position: relative;
  max-width: 740px;
  width: 90%;
  text-align: center;
  border: 3px solid #ac2316;
}

#ad-modal-content h1 {
  margin-top: 10px;
  margin-bottom: 0; 
}

#ad-modal-content h2 {
color: #4e4e4e;
  font-family: 'Oswald', sans-serif;
  margin-top: 5px;
  margin-bottom: 10px; 
  font-weight: bold;
  font-size: 20px;
}

#ad-modal-content h3 {
color: #4e4e4e;
  font-family: 'Oswald', sans-serif;
  margin-top: 5px;
  margin-bottom: 10px; 
  font-weight: bold;
  font-size: 16px;
}

.content-container {
  max-width: 100%;
  margin: 0 auto;
}
.content-fallback {
  display: flex;
  justify-content: center;
}
.content-fallback img {
  max-width: 100%;
  height: auto;
}

.start-game {
  margin-bottom: 5px;
  border-radius: 0.7rem;
  background-image: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
  color: #333333; 
  border: 3px solid #a9a9a9;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

@keyframes spin-once {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rollAnimation {
  0% {
    transform: translateY(-60%) rotate(0deg) scale(0.9);
    opacity: 0.6;
  }
  25% {
    transform: translate(15px, -30px) rotate(90deg) scale(1.1);
  }
  50% {
    transform: translate(-20px, 10px) rotate(180deg) scale(0.85);
  }
  75% {
    transform: translate(10px, 5px) rotate(270deg) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) rotate(360deg) scale(1);
    opacity: 1;
  }
}
.die.rolling {
  animation: rollAnimation 0.5s ease-out forwards;
}
@keyframes golden-flash-anim {
  0% {
    background-color: rgba(255, 215, 0, 0);
  }
  50% {
    background-color: rgba(255, 215, 0, 0.7);
  }
  100% {
    background-color: rgba(255, 215, 0, 0);
  }
}
@keyframes zoom-in-out-anim {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
.yahtzee-flash-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 2000;
  animation: golden-flash-anim 1.5s ease-out;
}
.yahtzee-zoom-text {
  font-family: 'Oswald', sans-serif;
  font-size: 8rem;
  font-weight: 700;
  color: #be0201;
  text-shadow: 3px 3px 0 #f6d93a, -1px -1px 0 #f6d93a, 1px -1px 0 #f6d93a, -1px 1px 0 #f6d93a, 1px 1px 0 #f6d93a;
  animation: zoom-in-out-anim 1.5s ease-out forwards;
}
@keyframes flash-success {
  from {
    background-color: #d1fae5;
  }
  to {
    background-color: transparent;
  }
}
.score-flash {
  animation: flash-success 1.5s ease-out;
}

@keyframes flash-fail {
  from {
    background-color: #fecaca; /* A light red color */
  }
  to {
    background-color: transparent;
  }
}

.score-flash-fail {
  animation: flash-fail 1.5s ease-out;
}

.mobile-tabs {
  display: flex;
  justify-content: space-between;
  padding: 0 1rem 0 1rem;
  width: 100%;
  box-sizing: border-box;
}

/* --- Full Screen Shimmer Effect for Upper Bonus --- */
.shimmer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2500; /* Below modals but above other content */
  pointer-events: none;
  overflow: hidden;
}

.shimmer-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 240, 200, 0.7) 50%,
    rgba(255, 255, 255, 0) 80%
  );
  transform: skewX(-25deg);
  animation: shimmer 2s ease-in-out;
}

@keyframes shimmer {
  to {
    left: 150%;
  }
}

/* --- Game End Fire Effect (Responsive) --- */
#fire-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 2900;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

/* In style12.css, find the fire effect section and apply these changes */

.fire-element {
  width: 100%;
  height: 100%;
  background-image: url('/game/assets/images/fuego.gif');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
  /* Use the new animation and set its duration to 20 seconds */
  animation: fire-rise-and-fall 20s ease-out forwards;
  opacity: 0; 
}

/* Replace the old @keyframes rise-fire with this new one */
@keyframes fire-rise-and-fall {
  0% {
    opacity: 0;
    transform: translateY(200px);
  }
  10% {
    /* Rises up over the first 2 seconds */
    opacity: 1;
    transform: translateY(0);
  }
  80% {
    /* Stays visible */
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    /* Fades and "dies back down" over the last 4 seconds */
    opacity: 0;
    transform: translateY(200px);
  }
}

/* --- Spotlight Effect for Mid-Tier Scores --- */
.spotlight-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2800; /* Below other modals but above game content */
  pointer-events: none; /* Allows clicks to pass through */
background: radial-gradient(
  circle at 50% 40%,
  transparent 20%,
  rgba(0, 0, 0, 0.4) 40%,
  rgba(0, 0, 0, 0.75) 60%
);

  animation: spotlight-fade 4.5s ease-out forwards;
}

@keyframes spotlight-fade {
  0% { opacity: 0; }
  25% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}

/* --- Fireworks Effect --- */
#fireworks-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

.rocket {
    position: absolute;
    bottom: 0;
    width: 5px;
    height: 5px;
    background: #fefae0; /* A bright, almost white core */
    border-radius: 50%;
    /* The tail is a series of layered, offset shadows */
    box-shadow: 0 0 5px #fefae0, 
                0 0 10px #fefae0, 
                0 0 15px #f6d93a, 
                0 0 20px #f6d93a;
}

.particle {
    position: absolute;
    width: 15px;
    height: 15px;
    opacity: 0; 
    will-change: transform, opacity;
}
    
/* Assign colors using pseudo-classes to avoid inline styles and get variety */
.particle:nth-child(4n) { background-color: #f6d93a; } /* Gold */
.particle:nth-child(4n+1) { background-color: #be0201; } /* Red */
.particle:nth-child(4n+2) { background-color: #ffffff; } /* White */
.particle:nth-child(4n+3) { background-color: #ec7114; } /* Orange */

@keyframes ascend {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(var(--end-y));
        opacity: 0;
    }
}

@keyframes explode {
    0% {
        transform: translate(0, 0);
        opacity: 1;
        /* UPDATE: Matched initial particle size */
        width: 15px;
        height: 15px;
        border-radius: 50%;
    }
    50% {
        /* Start shrinking the trail */
        width: 1px; 
        height: 1px;
        border-radius: 50%;
    }
    100% {
        /* The final position is determined by the angle and distance */
        transform: rotate(var(--angle)) translateY(var(--distance)) rotate(calc(-1 * var(--angle)));
        opacity: 0;
        width: 1px;
        height: 1px;
        border-radius: 50%;
    }
}

/* --- Ice Effect for Low Scores (Final Image Overlay Version) --- */
@keyframes frost-spread {
  from { opacity: 0; }
  to { opacity: .95; 
    border-color: #5c95c4;
    } 
}

@keyframes ice-image-fade-in {
  from { opacity: 0; }
  to { opacity: 0.45; }
}

@keyframes ice-shadow-border-anim {
  to {
    box-shadow: inset 0 0 0 3px #5c95c4;
  }
}

/* Prepares the die for the overlays */
.frozen-die {
  cursor: default;
  border: none;
}

/* NEW: The top layer - The ice-cube.webp image */
.frozen-die::before {
  content: '';
  position: absolute;
  top: -3px; left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  z-index: 3;
    border: 3px solid #fff;
  border-radius: 0.8rem;
  background-image: url('/game/assets/images/ice-cube.webp');
  background-size: cover;
  background-position: center; 
  opacity: 0;
box-shadow: inset 0 0 0 3px #333;
  animation: ice-image-fade-in 1.5s 0.2s ease-out forwards, 
             ice-shadow-border-anim 1.5s ease-out forwards;

}

/* The gradient and crack layer, now sits underneath the image */
.frozen-die::after {
  content: '';
  position: absolute;
  top: -3px; left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  z-index: 2; /* Sits below the image overlay */

  background-color: #dbeffc; 
  border: 3px solid #7fb9e3;
  border-radius: 0.8rem; 

  background-image:
    linear-gradient(135deg, white 0%, transparent 25%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.25) 0, rgba(255,255,255,0.25) 1px, transparent 1px, transparent 5px),
    linear-gradient(65deg, transparent 49%, rgba(190, 215, 250, 0.5) 50%, transparent 51%),
    linear-gradient(195deg, transparent 48%, rgba(190, 215, 250, 0.4) 50%, transparent 52%),
    linear-gradient(15deg, transparent 48%, rgba(200, 220, 255, 0.6) 50%, transparent 52%),
    linear-gradient(105deg, transparent 47%, rgba(200, 220, 255, 0.5) 50%, transparent 53%),
    radial-gradient(circle at center, rgba(160, 210, 240, 0.6), transparent 70%);

  box-shadow: 0 0 30px rgba(173, 216, 230, 1), inset 0 3px 5px 1px rgba(255, 255, 255, 1);

  opacity: 0; /* Start invisible */
  animation: frost-spread 1.5s ease-out forwards; /* Fade in at the same time as the image */
}

/* Disable hover transform on the parent die */
.frozen-die:hover {
    transform: none;
}



/* Styles for large screens (768px and up) */
@media (min-width: 768px) {
  .mobile-tabs {
    display: none;
  }
  .scorecard-sections {
    flex-direction: row;
  }
  #upper-section, #lower-section {
    display: flex;
  }  
}

@media (max-width: 768px) {
  .section-inactive,
  .scorecard-section h2,
  .score-category-header,
  .scorecard-table thead {
    display: none;
  }
}

@media (max-width: 610px) {
 
.score-category-header {
    display: none;
} 
  
 .section-inactive {
        display: none;
    }

}
@media (max-width: 482px) {
  .header-logo {
    display: none;
  }
  #dice-container {
    gap: .5rem;
  }
   .section-inactive {
        display: none;
    }
    
  .scorecard-section h2 {
    display: none;
  }
  
  .score-category-header {
    display: none;
} 
 a.header-button[href*="user-registration.php"] {
    display: none;
  }
  
  #ad-modal-content h1 {
  font-size: 42px;
}
}

@media (max-width: 420px) {
.star-die-image {
transform: scale(1.16);
}
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-pan-x {
  syntax: "*";
  inherits: false;
}
@property --tw-pan-y {
  syntax: "*";
  inherits: false;
}
@property --tw-pinch-zoom {
  syntax: "*";
  inherits: false;
}
@property --tw-scroll-snap-strictness {
  syntax: "*";
  inherits: false;
  initial-value: proximity;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-contain-size {
  syntax: "*";
  inherits: false;
}
@property --tw-contain-layout {
  syntax: "*";
  inherits: false;
}
@property --tw-contain-paint {
  syntax: "*";
  inherits: false;
}
@property --tw-contain-style {
  syntax: "*";
  inherits: false;
}
@property --tw-text-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-text-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-pan-x: initial;
      --tw-pan-y: initial;
      --tw-pinch-zoom: initial;
      --tw-scroll-snap-strictness: proximity;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-divide-x-reverse: 0;
      --tw-border-style: solid;
      --tw-divide-y-reverse: 0;
      --tw-leading: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-contain-size: initial;
      --tw-contain-layout: initial;
      --tw-contain-paint: initial;
      --tw-contain-style: initial;
      --tw-text-shadow-color: initial;
      --tw-text-shadow-alpha: 100%;
    }
  }
}

#login-message {
    color: #ef4444;
    margin-bottom: 0.5rem;
}

#chance-chance-selector {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0.4rem;
}
#chance-chance-selector.hidden {
  display: none;
}

.chance-chance-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.custom-checkbox-visual {
    margin-right: 0.5rem;
    background-color: #ffffff;
}

.chance-chance-text {
    font-size: .95rem;
    color: #4a5568;
    font-weight: 600;ter
}

/* === Yahtzee Tab Style Modifications === */

.tab-button {
    width: 9rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    white-space: nowrap;
    border-radius: 0.75rem;
    border-style: solid;
    border-width: 1px;
    outline: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Adds a drop shadow */
    transition: background-color 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.2s;
cursor: pointer;
}

/* Inactive Tab State: Darker background tint and more readable text */
.tab-button:not(.active) {
    background-color: #d1d5db; /* Darker Gray */
    border-color: #737373;     /* Lighter Gray */
    color: #737373;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    text-shadow: 0 0 0.5px rgba(55, 65, 81, 0.5); 
}

/* Active Tab State: Lighter tint with an "inset" shadow to look pressed */
.tab-button.active {
    background-color: #f3f4f6; /* Lighter Gray tint */
    border-color: #6b7280;     /* Darker Gray border */
    color: #374151;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); /* Inset shadow */
}

/* Removes the default blue outline on focus */
.tab-button:focus {
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); /* Maintain active shadow on focus */
}

/* Enhances the "pressed" feel when the button is clicked */
.tab-button:active {
    transform: translateY(1px);
    background-color: #4b5563; /* Darkens tint on click */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); /* Stronger inset shadow */
}

#scorecard-lower-body tr.total-row.text-red-700 td {
  color: #8B0000; /* Deep Red */
}

    .proper {
    font-family: '1942 report', sans-serif;
font-size: 52px;
line-height: 80%;
 text-align: center;
color: #be0201;
word-spacing: -16px;
letter-spacing: -2px;
text-shadow: 1px 1px 3px #000;
}     

/* --- Styles for Statistics Section (Non-Tailwind) --- */

.statistics-section {
    background-color: #fdfdfa; /* Fallback color */
    background-image: url('/game/assets/images/paper-texture.webp');
    border: 3px solid #8B0000;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
    border-radius: 1rem;
    width: 100%;
    text-align: left;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.statistics-header {
    display: flex;
    padding: 0.5rem 1rem;
    background: transparent; /* Changed from #f9fafb */
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
    align-items: center;
    border-bottom: 1px solid #a0aec0; /* Darker border color */
}

.statistics-header:hover {
    background: rgba(0, 0, 0, 0.05); /* Subtle transparent overlay on hover */
}

.statistics-header .triangle-icon {
    margin-right: 0.5rem;
    font-size: 0.875rem;
    transition: transform 0.2s;
    color: #6b7280;
}

.statistics-header .triangle-icon.rotated {
    transform: rotate(90deg);
}

.statistics-title-main {
    font-weight: 600;
    color: #374151;
    flex-grow: 1;
}

/* === START: MODIFIED CODE FOR SMOOTH COLLAPSE === */

.statistics-content, .stat-details {
    max-height: 1000px; /* A large value that the content will not exceed */
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out, margin 0.4s ease-in-out;
}

.statistics-content.hidden,
.stat-details.hidden {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    /* Hide border when collapsed to prevent a stray line from appearing */
    border-bottom-width: 0;
}

/* Reset the border for the main content area when it's open */
.statistics-content {
    padding: 0;
    border-bottom-width: 1px;
      overflow-y: auto;
    overflow-x: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out, margin 0.4s ease-in-out;
    contain: paint;
}

/* Restore padding for the detail sections when they are open */
.stat-details {
    padding: 0 1.5rem 1rem 2.5rem; 
    border-bottom: 1px solid #e5e7eb;
}

/* === END: MODIFIED CODE === */


.statistics-header.nested {
    background-color: #f9fafb;
    border-top: none;
    border-bottom: none;
    padding: 0.5rem 1.5rem; 
}

.statistics-header.nested:hover {
    background-color: #f3f4f6;
}

.statistics-content > .stat-details:last-of-type,
.statistics-content > .statistics-header.nested + .stat-details:last-of-type {
    border-bottom: none;
}

.stat-value {
    font-weight: bold;
    color: #22c55e;
    font-size: 1rem; 
}

.stat-sub-item {
    margin-top: 0.25rem;
     margin-bottom: 0.5rem;
    font-size: 0.9rem;
    line-height: 12px;
    color: #4b5563;
}

.sub-stat-value {
    font-weight: 600;
    color: #22c55e;
}

.stat-description {
    margin: 0;
    line-height: 1.4;
    color: #4b5563;
}

.stat-description p {
    margin: 0;
}

.stat-flex-container {
    display: flex;
    align-items: center;
    margin-top: 1rem;
}

.stat-flex-container .flex-grow {
    flex-grow: 1;
}

.stat-flex-container .statistics-title {
    font-weight: 600;
    color: #374151;
}

.bottom-margin {
    margin-bottom: 1rem;
}

.equation {
  background: #f3f4f6;
  padding: 0.75rem;
  border-radius: 4px;
  font-family: 'Oswald', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center; /* Equation remains centered */
  margin: .5rem 0;
  border: 1px solid #d1d5db;
}

.equation-explanation {
  background: #fef3c7;
  padding: .5rem 1rem;
  border-radius: 4px;
  border-left: 4px solid #f59e0b;
  margin-top: .25rem;
}

.equation-explanation h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #92400e;
  font-weight: 600;
}

.equation-explanation ul {
  margin: 0;
  padding-left: 1.25rem;
}

.equation-explanation li {
  margin-bottom: 0.15rem;
  color: #78350f;
}

.equation-explanation strong {
  color: #92400e;
}

/* New styles for Report Card Content */
#report-card-modal-content h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem; /* Adjusted for a cleaner look */
    color: #1f2937; /* A more neutral, professional color */
    font-weight: 600;
    text-shadow: none; /* Removed for a flat, modern style */
    line-height: 1.2;
    margin-top: 10px;
    margin-bottom: 5px;
}

.report-card-main-score {
    margin-top: .75rem;
    margin-bottom: 0.25rem;
}

#score-chart-container {
    padding: 0 1rem;
}

#score-chart-container svg {
    width: 100%;
    height: auto;
}

.chart-bar {
    fill: #9ca3af; /* A neutral gray for standard bars */
    transition: fill 0.2s ease-in-out;
}
.chart-bar:hover {
    fill: #6b7280;
}

.chart-bar-highlight {
    fill: #22c55e; /* A standout green to highlight the current score */
}

.chart-axis {
    stroke: #d1d5db;
    stroke-width: 2;
}

.chart-label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    fill: #4b5563;
    text-anchor: middle;
}

.report-card-main-score p {
    font-family: 'Oswald', sans-serif;
    margin: 0;
    font-size: 1.2rem;
    color: #374151;
}

.report-card-main-score h3 {
    font-family: 'Oswald', sans-serif;
    margin: 0;
    font-size: 4rem;
    color: #be0201;
    line-height: 1;
}

/* Default styles for smaller screens (e.g., 2 columns) */
.report-card-stats {
  display: grid; /* Use grid instead of inline-grid for better centering/layout control */
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1.5rem auto;
  text-align: left;
  font-family: 'Inter', sans-serif;
  max-width: 1200px; /* Optional: Constrain the max width on very large screens */
  padding: 0 1rem; /* Optional: Add some padding for smaller viewports */
}

/* Styles for large screens (4 columns) */
@media (min-width: 992px) {
  .report-card-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.rc-stat-item span {
    display: block;
}

.rc-stat-item span:first-child {
    font-weight: 700;
    color: #1f2937;
    font-size: 0.9rem;
}

.rc-stat-item span:last-child {
    font-size: 1.25rem;
    font-weight: 600;
    color: #4b5563;
}

.rc-leaderboard-message {
    margin-top: 0.5rem;
    text-align: left;
    font-family: 'Inter', sans-serif;
}

.rc-leaderboard-message h4 {
    margin-bottom: 0.5rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
}

.rc-leaderboard-message ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.report-card-actions {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Ensure close button uses your existing button styles */
#rc-close-btn {
    padding: 0.5rem 2rem;
}



#control-panel-modal-overlay, #dice-creator-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
}

#control-panel-modal-overlay.hidden, #dice-creator-modal-overlay.hidden {
    display: none;
}

#control-panel-modal-content, #dice-creator-modal-content {
	max-height: 90vh;
  overflow-y: auto;  
  background-color: #fefefe;
  padding: 0 15px 15px 15px;
  border-radius: 10px;
  position: relative;
  max-width: 700px;
  width: 90%;
  text-align: center;
  border: 3px solid #ac2316;
}

#control-panel-modal-content h2, #dice-creator-modal-content h2 {
    margin: 10px 0;
    font-family: 'Oswald', sans-serif;
    color: #1f2937;
}

#dice-preview {
    width: 100px;
    height: 100px;
    margin: 1rem auto 1.5rem;
    cursor: default;
    /* The colors are applied via the existing .die and .dot rules using CSS variables */
}


.control-panel-row {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 10px;
    margin-top: 0;
}

.control-panel-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin: 10px 0 0 0;
    font-size: 1.3rem;
    font-weight: bold;
}

/* === New Toggle Switch Design === */

.sound-toggle-button {
    /* 1. Make the circle larger */
    width: 55px;
    height: 55px;
    border-radius: 50%;

    /* 2. Center the text */
    display: flex;
    align-items: center;
    justify-content: center;

    /* 3. Corrected 'On' state style */
    background-image: none; /* This fixes the color override */
    background-color: #22c55e; /* Green */
    border: 3px solid #16a34a;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    cursor: pointer;
    padding: 0;
}

/* 4. Adjust text size for the larger button */
.sound-toggle-button .toggle-text {
    font-size: 1.3rem;
    font-weight: bold;
    text-shadow: 1px 1px 3px black;
}

/* 5. Style for the 'Off' state */
.sound-toggle-button.toggled-off {
    background-image: none;
    background-color: #be0201; /* Red */
    border-color: #991b1b;
}

/* 6. A subtle press-down effect on click */
.sound-toggle-button:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}


#cp-close-btn {
    margin-top: 1rem;
}

#control-panel-button {
    font-size: 1.3rem;
    padding: 0.1rem 0.1rem;
     background: none !important;
    border: none !important;
}

@keyframes spin-on-start {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(720deg);
  }
}

.gear-icon {
    display: inline-block;
text-shadow: 0 0 5px #be0201;
transition: transform 1.5s ease; 
}

#control-panel-button:hover .gear-icon {
    transform: rotate(360deg);
}

.spin-animation .gear-icon {
  animation: spin-on-start 4s ease-out;
}

/* === Styles for Dice and Background Set Selectors === */

.dice-set-container,
.background-set-container {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
}

.background-set-container {
    flex-wrap: wrap;
    /* Constrain the container's width to force 4 items per row */
    max-width: 680px; 
    margin: 0 auto; /* Center the container itself */
}

.dice-set-choice,
.background-set-choice {
    cursor: pointer;
    text-align: center;
    border: 3px solid transparent;
    padding: 0.1rem;
    border-radius: 8px;
    transition: border-color 0.2s ease-in-out;
    min-width: 70px;
}

.dice-set-choice img,
.background-set-choice img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    border: 2px solid black;
    background-color: white;
    display: block;
    margin: 0.2rem auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    object-fit: cover;
}

.dice-set-choice span,
.background-set-choice span {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
}

.dice-set-choice.selected,
.background-set-choice.selected {
    border-color: #be0201;
}

#dice-set-inverse img,
#dice-set-casino img,
#dice-set-forest img,
#dice-set-ocean img,
#dice-set-royal img,
#dice-set-orange img{
    border: none;
    border-radius: 8px;
}

.dice-set-placeholder {
    cursor: pointer;
    text-align: center;
    border: 3px solid transparent;
    padding: 0.1rem;
    border-radius: 8px;
    transition: border-color 0.2s ease-in-out;
    min-width: 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.dice-set-placeholder img {
    width: 65px;
    height: 65px;
    border-radius: 10px;
    border: 2px solid black;
    background-color: white;
    display: block;
    margin: 0.2rem auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    object-fit: contain;
    padding: 3px;
    box-sizing: border-box;
}

.dice-set-placeholder a {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
}

#game-message,
#final-score-label,
#final-score-value {
    color: #8B0000;
}

/* --- Control Panel Responsiveness --- */

/* Keep the wrapping rule for the background container */
.background-set-container {
    flex-wrap: wrap;
}

/* On screens smaller than 450px, slightly reduce the size 
   of the background choice items to ensure four can fit per row. */
@media (max-width: 450px) {
    .background-set-choice {
        min-width: 70px; /* Reduce min-width from 75px */
    }

    .background-set-choice img {
        width: 50px; /* Reduce image size from 50px */
        height: 50px;
    }
}

.advisor-explainer {
    text-align: left;
    margin-top: 0;
    margin-bottom: 0.75rem;
color: #4b5563;
}

#analyze-roll-button {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#analysis-results {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-align: left;
}

#optimal-turn-value {
    display: inline-block;
    float: right;
    color: #22c55e;
    padding-right: 0.25rem;
}

.analysis-section{
margin-top: 0px;
color: #4b5563;
}

.analysis-section h4 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    color: #1f2937;
  margin-top: 0;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0.25rem;
}

.analysis-section p {
    margin-top: 5px;
}

#roll-odds-list {
    list-style: none;
    padding: 0; /* Removes all padding, including the default left space */
    margin: 0 0 15px 0; /* Sets top/sides margin to 0, keeps 10px at bottom */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

#roll-odds-list li {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    padding: 0.25rem;
    background-color: #f9fafb;
    border-radius: 4px;
}

#roll-odds-list li span:first-child {
    font-weight: 500;
    color: #1f2937;
}

#roll-odds-list li span:last-child {
    font-weight: 700;
    color: #1f2937;
    padding-right: 0.25rem;
}


#advisor-message {
    margin-top: 1rem;
    font-style: italic;
    color: #6b7280;
}

#advisor-header {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#advisor-details {
    padding-top: 0;
    padding-bottom: 10px;
    margin-top: 0;
    border-top: none;
}

#all-moves-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 230px;
    overflow-y: auto;
}

#all-moves-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    padding: 0.35rem 0.5rem;
    background-color: #f9fafb;
    border-radius: 4px;
    border-left: 4px solid #d1d5db;
}

#all-moves-list li.is-current-hold {
    border-left-color: #22c55e;
    background-color: #f0fdf4;
}

#all-moves-list li span:first-child {
    font-weight: 500;
    color: #4b5563;
    flex-shrink: 0;
    padding-right: 1rem;
}

#all-moves-list li span:last-child {
    font-weight: 700;
    color: #1f2937;
    font-size: 1rem;
    padding-right: 0.25rem;
}

/* Custom Scrollbar for Webkit Browsers (Chrome, Safari, Edge) */
body::-webkit-scrollbar {
  width: 15px;
}

body::-webkit-scrollbar-track {
  background: transparent;
}

body::-webkit-scrollbar-thumb {
  background-color: #aab;
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
}

body::-webkit-scrollbar-thumb:hover {
  background-color: #889;
}

/* Custom Scrollbar for Firefox */
@supports (scrollbar-color: auto) {
  body {
    scrollbar-color: #aab transparent;
  }
}

.info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 0.5rem;
    font-weight: normal; /* Changed from bold for better emoji rendering */
    font-size: 14px;      /* Slightly larger for clarity */
    color: #4b5563;
    background-color: #e5e7eb;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s;
}

.info-button:hover {
    background-color: #d1d5db;
}

/* --- Explainer Modal Styles --- */
#explainer-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 4000; /* Set a high z-index to appear on top */
    display: flex;
    justify-content: center;
    align-items: center;
}

#explainer-modal-overlay.hidden {
    display: none;
}

#explainer-modal-content {
    max-height: 90vh;
    overflow-y: auto;
    background-color: #fefefe;
    padding: 0 1.5rem .5rem 1.5rem;
    border-radius: 10px;
    position: relative;
    max-width: 740px;
    width: 90%;
    text-align: left;
    border: 3px solid #ac2316;
}

#explainer-modal-content h2 {
    font-family: 'Oswald', sans-serif;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: .5rem;
    color: #1f2937;
    font-size: 1.5rem;
}

.explainer-text h3 {
	    margin-bottom: .25rem;
}

.explainer-text p,
.explainer-text ul {
    margin-bottom: 1rem;
    margin-top: 0;
    line-height: 1.4;
    color: #374151;
}

.explainer-text ul {
    padding-left: 1.25rem;
}

.explainer-text li {
    margin-bottom: 0.4rem;
}

#explainer-close-btn {
    display: block;
    margin: 1rem auto 0;
}

#show-explainer-button {
    /* Creates the circular button shape */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #e5e7eb;
    border: 1px solid #d1d5db;
    
    /* General button properties */
    margin-left: 0.5rem;
    padding: 0;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color 0.2s ease;

    /* Styles the 'i' character inside the circle */
    font-family: serif;
    font-weight: bold;
    font-style: italic;
    font-size: 17px;
    line-height: 1;
    color: #374151;
}

#show-explainer-button:hover {
    background-color: #d1d5db;
}

#show-explainer-button:focus {
    outline: none;
}

.modal-close-x {
    /* Behavior */
    position: absolute; /* MODIFIED: Takes the button out of the normal flow */
    top: 5px;           /* MODIFIED: Positions from the top */
    right: 10px;          /* MODIFIED: Positions from the right */
    z-index: 10;
    
    /* Appearance */
    background: transparent;
    border: none;
    padding: 0 5px;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    color: #9ca3af; /* A light gray color */
    cursor: pointer;
    transition: color 0.2s ease;
}

.modal-close-x:hover {
    color: #000000;
}

/* Styling for the new icon-based share buttons */
.share-button {
	background: #f5f4ee;
    display: inline-flex;
    justify-content: center;
    align-items: center;
border-color: #848279;
    padding: 8px; /* Adjust padding as needed */
    width: 40px;  /* Set a fixed width */
    height: 40px; /* Set a fixed height */
    border-radius: 50%; /* Makes the buttons circular */
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.share-button:hover {
    opacity: 0.85;
    transform: scale(1.1); /* Slight zoom effect on hover */
}

.share-button img {
    width: 28px;  /* Control the size of the icon itself */
    height: 28px; /* Control the size of the icon itself */
}

.report-card-actions {
    display: flex;
    flex-direction: column; /* Stack the items vertically */
    align-items: center;    /* Center them horizontally */
    gap: 1rem;              /* Creates space between the icon row and the Close button */
    margin-top: 1.5rem;       /* Adds space above the buttons */
}

.social-icons-container {
    display: flex;
    flex-wrap: wrap;          /* Allows icons to wrap on smaller screens */
    justify-content: center;
    gap: 0.75rem;             /* Defines the space between each icon */
}

/* --- Rules Modal Styles --- */
#rules-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 4000; /* High z-index to appear on top */
    display: flex;
    justify-content: center;
    align-items: center;
}

#rules-modal-overlay.hidden {
    display: none;
}

#rules-modal-content {
    max-height: 90vh;
    overflow-y: auto;
    background-color: #fefefe;
    padding: 0 1.5rem 1rem 1.5rem;
    border-radius: 10px;
    position: relative;
    max-width: 740px;
    width: 90%;
    text-align: left;
    border: 3px solid #ac2316;
}

#rules-modal-content h2 {
    font-family: 'Oswald', sans-serif;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 0rem;
    color: #1f2937;
    font-size: 1.5rem;
}

.rules-section h3 {
	margin-bottom: .25rem;
    font-family: 'Oswald', sans-serif;
    color: #be0201;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0.25rem;
}

.rules-section h4 {
	margin-bottom: .25rem;
}

.rules-section p,
.rules-section ul {
    margin-bottom: .5rem;
    margin-top: 0;
    line-height: 1.4;
    color: #374151;
}

.rules-section ul {
    padding-left: 1.25rem;
    list-style-type: disc;
}

.rules-section li {
    margin-bottom: 0.3rem;
}

#rules-close-btn {
    display: block;
    margin: 1rem auto 0;
}


/* Centers the main "Roll Dice" button now that the Undo button is gone */
.roll-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 0.4rem;
    min-height: 50px;
}

/* Creates a container in the scorecard to group the score and the new undo button */
.score-undo-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Creates 3 columns: flexible spacer, auto-sized content, flexible spacer */
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Targets the score text (the <span>) and places it in the center column */
.score-undo-container > span {
    grid-column: 2 / span 1;
}

/* Targets the Undo button and places it in the left column */
.score-undo-container > .undo-button-inline {
    grid-column: 1 / span 1;
    justify-self: end; /* Aligns the button to the right edge of the left column */
}

/* Styles for the new, smaller, inline undo button */
.undo-button-inline {
    padding: 0.2rem 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.1;
    border-radius: 0.5rem;
    min-width: auto; 
    flex-shrink: 0;

    /* A more subtle gray gradient for the button */
    background-image: linear-gradient(to bottom, #be0201, #a30101);
    color: #f6d93a;
    border: 1px solid #f6d93a;
    text-shadow: none;
}

/* A red hover state to indicate a "revert" action */
.undo-button-inline:hover {
    background-image: linear-gradient(to bottom, #f6d93a, #e0c834);
    color: #be0201;
    border-color: #be0201;
}

body.fullscreen-active {
    /* Ensures the body is a full-height flex container */
    height: 100vh;
    display: flex;
    flex-direction: column;
}

body.fullscreen-active #game-wrapper {
    /* 1. Grow to fill all available vertical space below the header */
    flex-grow: 1;
    
    /* 2. Become a flex container to center its own content */
    display: flex;
    align-items: center;    /* Vertically centers the game */
    justify-content: center; /* Horizontally centers the game */
}

/* Rule 1: Makes OFF buttons (red) slightly LIGHTER on hover */
.sound-toggle-button.toggled-off:hover {
    background-color: #dc2626; /* Lighter Red */
    border-color: #b91c1c;     /* Lighter Red Border */
    color: white;
}

/* Rule 2: Makes ON buttons (green) slightly LIGHTER on hover */
.sound-toggle-button:not(.toggled-off):hover {
    background-color: #34d399; /* Lighter Green */
    border-color: #2ca57d;     /* Lighter Green Border */
    color: white;
}

.undo-button-inline:hover {
    background-image: linear-gradient(to bottom, #f6d93a, #e0c834);
    color: #be0201;
    border-color: #be0201;
}

/* === FINAL: Wide Screen Sidebar with Centered Game Area === */
@media (min-width: 1500px) {
    #game-layout-container.sidebar-active {
 display: grid;
        grid-template-columns: 1fr auto 1fr;
         align-items: start;
        gap: 1.5rem;
        width: 100%;
        padding: 0 1.5rem;
        box-sizing: border-box;
    }
    
body.fullscreen-active #game-layout-container.sidebar-active {
    flex-grow: 1; /* This makes the container expand vertically */
    align-items: center;
}
    
body.fullscreen-active #game-layout-container.sidebar-active > .statistics-section {
    position: static; /* Overrides the 'sticky' position to allow vertical centering */
}    
    
 #game-layout-container.sidebar-active > #game-wrapper {
        grid-column: 2;
    }

#game-layout-container.sidebar-active > .statistics-section {
    /* Sets the default grid properties for the sidebar */
    grid-column: 3;
    width: 320px;
}

body:not(.fullscreen-active) #game-layout-container.sidebar-active > .statistics-section {
    /* APPLIES STICKY POSITIONING ONLY WHEN NOT IN FULLSCREEN */
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px); /* Set max height (viewport height minus top/bottom space) */
    overflow-y: auto;               /* Make it scroll if content is too tall */
}
    .statistics-section.stats-sidebar {
        position: absolute;
        top: 40px;
    left: calc(50% + 420px + .01vw);
        width: 320px;
        display: block;
        max-height: calc(100vh - 60px); /* Set max height (viewport height minus top offset and bottom space) */
        overflow-y: auto; 
    }

    /* In sidebar mode, hide the main toggle header and force content to show */
    .statistics-section.stats-sidebar #stats-toggle {
        display: none;
    }
    .statistics-section.stats-sidebar .statistics-content,
    .statistics-section.stats-sidebar .statistics-content.hidden {
        display: block !important;
        max-height: none !important;
    }

    /* Adjust padding for a cleaner look in the sidebar */
    .statistics-section.stats-sidebar .statistics-header.nested {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .statistics-section.stats-sidebar .stat-details {
        padding: 0 0.5rem 1rem 0.75rem;
    }
    
    body.fullscreen-active .statistics-section.stats-sidebar {
    top: 50%;
    transform: translateY(-50%);
    max-height: 85vh;   /* Constrain the height to 85% of the viewport */
    overflow-y: auto;   /* Add a scrollbar if the content is too tall */
}
}

/* === Laptop Height Optimization (Full Game Scale) === */
@media (min-width: 1024px) and (max-height: 720px) {
    #game-wrapper {
        transform: scale(0.95);
        transform-origin: top;
        margin-bottom: -15vh;
    }
}

/* --- Styles for Standard Dice Customization Row --- */

#standard-dice-customization-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    width: 100%;
}

.color-presets-container {
    display: flex;
    gap: 0.5rem;
    padding: 0 1rem;
    border-left: 2px solid #e5e7eb;
    border-right: 2px solid #e5e7eb;
}

.color-preset {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid #d1d5db;
    transition: transform 0.2s, border-color 0.2s;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}

.color-preset:hover {
    transform: scale(1.1);
}

.color-preset.selected-preset {
    border-color: #be0201;
    transform: scale(1.1);
}

/* Specific colors for each preset */
#preset-default { background-color: #ffffff; }
#preset-inverse { background-color: #333333; }
#preset-casino { background-color: #aa0101; }
#preset-forest { background-color: #224a36; }
#preset-ocean { background-color: #1a3a69; }
#preset-royal { background-color: #4c1d95; }
#preset-orange { background-color: #e74e10; }


.color-pickers-container {
    display: flex;
    gap: 1rem;
}

.color-picker-wrapper {
    text-align: center;
}

.color-picker-wrapper label {
    font-weight: bold;
    font-size: 1rem;
    display: block;
}

input[type="color"] {
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 6px;
    padding: 2px;
    background-color: #f3f4f6;
    cursor: pointer;
}

/* Ensure the standard dice choice remains the same size as others */
#standard-dice-customization-row .dice-set-choice {
    min-width: 70px;
}
#standard-dice-customization-row .dice-set-choice img {
    width: 50px;
    height: 50px;
}

#rc-close-btn {
    margin-top: 1rem;
}

.dice-type-selector-container {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
}

.dice-type-button {
    flex-grow: 1;
    padding: 0.3rem;
    border: none;
    background-color: #f0f0f0;
    cursor: pointer;
    font-weight: 600;
    color: #4a5568;
    transition: background-color 0.2s;
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
}

.dice-type-button:not(:last-child) {
    border-right: 1px solid #ccc;
}

.dice-type-button.active {
    background-color: #be0201;
    color: #f6d93a;
}

.dice-type-button:not(.active):hover {
    background-color: #e2e8f0;
}

#control-panel-button {
    font-size: 1.3rem;
    padding: 0.1rem 0.1rem;
     background: none !important;
}   

#rules-button .toggle-text {
    font-size: 2.2rem; /* You can adjust this value */
    line-height: 1; /* Helps with vertical alignment */
}  
     
/* Hides the dice column when the tray is off */
.dice-column.tray-off {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Styles for the new tray toggle button's icon area */
.tray-toggle-button .tray-icon-placeholder {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    border: 2px solid black;
    background-color: #22c55e; /* Green for "On" state */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.2rem auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    color: white;
    font-size: 1rem;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
    transition: background-color 0.2s;
}

/* "Off" state for the tray toggle button */
.tray-toggle-button.toggled-off .tray-icon-placeholder {
    background-color: #be0201; /* Red for "Off" state */
}

/* "Disabled" state for when the Velvet surface is active */
.tray-toggle-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Prevents the disabled tray button from looking like it's selected */
.tray-toggle-button:disabled.selected {
    border-color: transparent;
}

/* Style for the new layout toggle button's icon */
.layout-toggle-button .layout-icon-placeholder {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    border: 2px solid black;
    background-color: #22c55e; /* MODIFIED: Green for "Dice" state */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.2rem auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    color: white;
    font-size: 1rem;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
    transition: background-color 0.2s;
}

/* NEW: Red color for the "Below" state */
.layout-toggle-button.layout-is-side .layout-icon-placeholder {
    background-color: #be0201; /* Red */
}

/* Container for the roll button in its default bottom position */
#roll-button-bottom-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 0.4rem;
    min-height: 50px;
}

/* Container for the roll button in its alternate side position */
#roll-button-side-container {
    display: flex;
    align-items: center;
    margin-left: auto; /* Push the button to the far right of its container */
    padding-left: 0.5rem; /* Maintain spacing from the dice */
     flex-shrink: 0;
}
/* Style adjustments for the roll button when moved to the side */
#roll-button-side-container > #roll-button {
    margin-top: 0;
    min-height: auto;
    font-size: 1.2rem;
    padding: 0.4rem 0.8rem;
    flex-shrink: 0; /* Prevents the button from shrinking */
}

.dice-column.layout-low-active .die {
    width: 19%; /* Changed from 32% to ensure 5 dice fit on one row */
    max-width: 140px; /* A new max-width to keep them from getting too large */
}

/* This rule now forces the dice into a single, responsive row. */
.dice-column.layout-low-active #dice-container {
    flex-wrap: nowrap; /* Prevents the dice from wrapping */
    width: auto; /* Let the container size itself based on content */
    flex-grow: 1; /* Allow the container to take up available space */
}

.dice-column.layout-low-active {
    flex-direction: row; /* Lay out items horizontally */
    align-items: center; /* Vertically align items */
    justify-content: flex-start;
}

/* NEW RULE to prevent the button container from shrinking */
.dice-column.layout-low-active #roll-button-side-container {
    flex-shrink: 0;
}

.dice-column.layout-low-active #roll-button-bottom-container {
    display: none;
}

/* --- Dark Mode Styles --- */
body.dark-mode-active {
    background-image: none !important;
    background-color: #000 !important;
    
    /* Dice Theme Variables */
    --std-die-face-color: #111;
    --std-die-pips-color: #718096;
    --std-die-border-color: #718096;
    --std-die-held-face-color: #2d3748; /* Darker Held Face */
    --std-die-held-border-color: #e5c100; /* Brighter Gold */
    --std-die-held-pips-color: #e5c100;   /* Brighter Gold */
}

body.dark-mode-active .dice-column {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.dark-mode-active .message-center-wrapper {
    background-image: none !important;
    background-color: #111 !important;
    border: 2px solid #444 !important;
}

body.dark-mode-active .message-center-wrapper p,
body.dark-mode-active .player-info-line span {
    color: #ccc;
    text-shadow: none;
}

body.dark-mode-active #game-message,
body.dark-mode-active #final-score-value,
body.dark-mode-active #final-score-label {
    color: #e5c100; /* Brighter Gold */
}

body.dark-mode-active .scorecard-table {
    background-image: none !important;
    background-color: #111 !important;
    border-color: #444 !important;
    box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode-active .scorecard-table th,
body.dark-mode-active .scorecard-table td {
    color: #ccc;
    border-color: #333;
    text-shadow: none;
}

body.dark-mode-active .scorecard-table th { color: #eee; }
body.dark-mode-active .scorecard-table tbody tr.total-row { background-color: rgba(255, 255, 255, 0.05) !important; }
body.dark-mode-active .scorecard-table td:first-child { color: #eee; }

body.dark-mode-active #scorecard-lower-body tr.total-row.text-red-700 td,
body.dark-mode-active .scorecard-table .total-row.text-red-700 td {
    color: #f87171 !important;
}

body.dark-mode-active .score-button,
body.dark-mode-active .primary-button {
    background-image: linear-gradient(to bottom, #555, #333);
    color: #e5c100; /* Brighter Gold */
    border-color: #888;
}

body.dark-mode-active .score-button:hover,
body.dark-mode-active .primary-button:hover,
body.dark-mode-active .keyboard-highlight {
    background-image: linear-gradient(to bottom, #e5c100, #d1b200); /* Brighter Gold Gradient */
    color: #000;
    border-color: #e5c100; /* Brighter Gold */
}

body.dark-mode-active .score-button:disabled,
body.dark-mode-active .primary-button:disabled {
    background-image: none;
    background-color: #444;
    color: #888;
    border-color: #666;
}

body.dark-mode-active .dice-type-button.active {
    background-color: #555;
    color: #e5c100; /* Brighter Gold */
}

body.dark-mode-active .die:hover:not(.held) {
    border-color: #f87171; /* Grand Total Red on hover */
}

/* --- More Pronounced Pip Shadow for Dark Mode --- */
body.dark-mode-active body:not(.dice-set-standard) .die .dot,
body.dark-mode-active.dice-set-standard .die .dot {
    box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.8);
}

/* Dark Mode held dice */
body.dark-mode-active .die.held {
    box-shadow: inset -3px -3px 7px rgba(0, 0, 0, 0.8),   /* dark bottom-right */
                inset  2px  2px 5px rgba(255, 255, 255, 0.05), /* light top-left */
                0 3px 5px rgba(0, 0, 0, 0.2); /* drop shadow */
}



/* --- Deeper Face Shadow for Dice in Dark Mode --- */
body.dark-mode-active .die {
    box-shadow: inset -3px -3px 7px rgba(0, 0, 0, 0.8),   /* dark bottom-right */
                inset  2px  2px 5px rgba(255, 255, 255, 0.05), /* light top-left */
                0 3px 5px rgba(0, 0, 0, 0.2); /* keep drop shadow */
}


/* Dark Mode styles for the inline Undo button */
body.dark-mode-active .undo-button-inline {
    background-image: linear-gradient(to bottom, #555, #333);
    color: #e5c100;
    border-color: #888;
}

body.dark-mode-active .undo-button-inline:hover {
    background-image: linear-gradient(to bottom, #e5c100, #d1b200);
    color: #000;
    border-color: #e5c100;
}

/* --- Dark Face for Custom Dice --- */

/* Apply the dark background and border to custom dice when dark-face is active */
body.dark-face-active:not(.dice-set-standard) .die {
    background-color: #111;
    border-color: #718096;
}

/* Remove the default background image from the custom dice to reveal the new background color */
body.dark-face-active:not(.dice-set-standard) .die[data-value="1"]::before,
body.dark-face-active:not(.dice-set-standard) .die[data-value="0"]::before {
    background-image: none !important;
}

/* Make the default black pips on custom dice visible against the new dark background */
body.dark-face-active:not(.dice-set-standard) .die .dot {
    background-color: #718096;
}

/* Change the background of the selected custom dice PREVIEW image when dark-face is active */
body.dark-face-active .dice-set-choice.selected img {
    background-color: #111; /* Dark mode face color */
    border-color: #718096; /* Dark mode border color */
}

/* Style for HELD custom dice when dark-face is active */
body.dark-face-active:not(.dice-set-standard) .die.held {
    background-color: #2d3748; /* Dark mode held face color */
    border-color: #e5c100;    /* Dark mode held border color */
}

/* Style for the PIPS of HELD custom dice when dark-face is active */
body.dark-face-active:not(.dice-set-standard) .die.held .dot {
    background-color: #e5c100; /* Dark mode held pip color */
}

/* --- Dark Mode Styles for Statistics Section --- */
body.dark-mode-active .statistics-section {
    background-image: none !important;
    background-color: #111 !important;
    border-color: #444 !important;
    box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode-active .statistics-header {
    border-bottom-color: #333;
}

body.dark-mode-active .statistics-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode-active .statistics-title-main {
    color: #eee;
}

body.dark-mode-active .stat-value {
    color: #e5c100; /* Brighter Gold for main values */
}

body.dark-mode-active .stat-sub-item,
body.dark-mode-active .stat-description,
body.dark-mode-active .stat-description p,
body.dark-mode-active .advisor-explainer,
body.dark-mode-active .analysis-section p {
    color: #ccc;
}

body.dark-mode-active .sub-stat-value {
    color: #22c55e; /* Keep the sub-values green */
}

body.dark-mode-active .statistics-header.nested {
    background-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode-active .statistics-header.nested:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode-active .stat-details {
    border-bottom-color: #333;
}

body.dark-mode-active .equation {
    background: #222;
    border-color: #444;
    color: #eee;
}

body.dark-mode-active .analysis-section h4 {
    color: #eee;
    border-bottom-color: #444;
}

body.dark-mode-active #roll-odds-list li {
    background-color: #222;
}

body.dark-mode-active #roll-odds-list li span {
    color: #eee;
}

body.dark-mode-active #all-moves-list li {
    background-color: #222;
    border-left-color: #555;
}

body.dark-mode-active #all-moves-list li span {
    color: #ccc;
}

body.dark-mode-active #all-moves-list li span:last-child {
    color: #eee;
}

body.dark-mode-active #all-moves-list li.is-current-hold {
    background-color: #383838;
    border-left-color: #22c55e;
}

body.dark-mode-active #show-explainer-button {
    background-color: #444;
    border-color: #666;
    color: #ccc;
}

body.dark-mode-active #show-explainer-button:hover {
    background-color: #555;
}

.legal-links {
padding-bottom: 6px;
}

#bottom-ad-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
  padding: 5px 0;
  text-align: center;
  z-index: 3001;
}

/* Ensure the .hidden utility class works */
#bottom-ad-container.hidden {
  display: none;
}

#modal-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3002;
  padding: 0.2rem 0;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  background-color: #a30101;
}

#modal-header .proper {
    color: #f6d93a;
    font-size: 46px;
}

#modal-header.hidden {
  display: none;
}

/* Adjust margins for the text inside the new header */
#modal-header h1 {
  margin: 0;
  padding: 0;
}

#modal-header h2 {
font-size: 1.1rem;
  color: #f5f4ee; /* Complimentary creamy off-white */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  margin: 0;
  padding: 0;
  font-family: 'Oswald', sans-serif;
}