@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 */
  /* Equal to .score-button's own existing natural auto-height: its
     line-height (2.2rem) plus its border (2px top + 2px bottom, from the
     shared .button class -- padding is already 0 vertically on
     .score-button itself). Used as the one shared height reference across
     all three score-cell states (Score button / value+Undo / value alone),
     so none of them can ever render taller than the Score-button state
     already did -- rather than an independently-guessed new size. */
  --score-cell-height: calc(2.2rem + 4px);
}

html {
  /* Reserves space for the vertical scrollbar permanently, whether or not
     it's actually needed at any given moment. Without this, a small change
     in page content height (exactly what happens when a scorecard row
     toggles between its Score-button/Undo/value-only states) can cross the
     threshold that makes the scrollbar appear or disappear -- and since the
     scrollbar eats into the available content width when present, that
     alone shifts everything on the page horizontally, independent of
     whether any specific element actually changed size. */
  scrollbar-gutter: stable;
}

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;
}

.line-label {
  font-weight: 600;
}
.line-value {
  font-weight: 400;
}

.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;
  justify-content: center;
  gap: 0;
  height: 5.4rem;
flex-grow: 1; 
  min-width: 0;
}
/* Applied via JS when the game-message line hasn't wrapped to a second line,
   so the 3 visible lines get a bit more breathing room between them. Not
   applied when the message wraps (4 lines), so that case still fits the
   fixed-height box exactly with no shift. */
.messages-container.messages-compact {
  gap: 0.35rem;
}
.messages-container.messages-compact .player-info-line {
  margin-top: -0.2rem;
}
.message-center-wrapper p {
  margin: 0;
  font-size: 0.9rem;
  color: #1a202c;
}
.player-info-line {
  display: flex;
  gap: .4rem;
  align-items: flex-start;
  margin-bottom: 0;
flex-wrap: nowrap;
}
.player-info-line span {
  white-space: nowrap;
}
.turn-info-line {
  display: flex;
  gap: .4rem;
  align-items: flex-start;
  margin-bottom: 0;
  flex-wrap: nowrap;
  min-height: 1.2rem;
}
.turn-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; 
  line-height: 1.2rem;
}

#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 {
  height: var(--score-cell-height);
  box-sizing: border-box;
  padding: 0 1rem;
  font-size: 1.3rem;
  line-height: 2.2rem;
  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, #high-scores-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: 2rem; /* 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: 0.5rem;
    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;
}

.rc-guest-cta {
    background-color: #faf2c3;
    border: 2px solid #be0201;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 12px 0;
    text-align: center;
}
.rc-guest-cta p {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    color: #374151;
}
.rc-guest-cta .button {
    text-decoration: none;
    display: inline-block;
}

#high-scores-button {
    text-decoration: none;
}

/* 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: 0.75rem 1.5rem;
  margin: 0.75rem 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.25rem;
    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.85rem;
}

.rc-leaderboard-message li {
    line-height: 1.3;
    margin-bottom: 0.1rem;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

.rc-leaderboard-message li:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .rc-leaderboard-message ul {
        column-count: 2;
        column-gap: 1.5rem;
    }
}

/* Ensure close button uses your existing button styles */
#rc-close-btn {
    padding: 0 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: 0.5rem;             /* Creates space between the icon row and the Close button */
    margin-top: 0.75rem;       /* 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;
}

/* Applied directly to the cell itself (not just its inner containers),
   since the "not yet rolled this turn" state -- category not scored, no
   Score button shown yet because there's no roll to evaluate against --
   has little or no child content at all. That state was the real source of
   the reported shift: at the start of every turn, up to 11 other
   categories' cells go completely empty simultaneously, then all their
   Score buttons reappear at once the moment dice get rolled, growing the
   whole table in one jump. Neither of the two more targeted fixes below
   this one touch that empty state at all, since neither of their target
   divs exists in the DOM when a cell has nothing in it. */
td[id^="score-"] {
    height: var(--score-cell-height);
    box-sizing: content-box;
}

/* 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%;
    height: 100%;
    box-sizing: border-box;
}

/* The "Score X" (and, for Chance with the Chance-Chance rule available,
   "Score X" + "CC") button container. These class names look like Tailwind
   utilities but aren't backed by any utility framework on this site, so
   without this rule the div had no layout/height control of its own at all
   -- its height was just whatever .score-button naturally rendered at,
   which is exactly the reference size every other state now matches too. */
.flex.justify-center.items-center.gap-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    height: 100%;
    box-sizing: border-box;
}

/* Scoped to this one wrapper (the scorecard's per-category button slot) so
   that the "fill the cell exactly" fix doesn't leak onto .score-button's many
   other unrelated uses site-wide (Login, Analysis, High Scores, New Game,
   Register Free, the report card's Download/Close buttons, etc.), which all
   rely on .score-button's own fixed height above instead. */
.flex.justify-center.items-center.gap-1 > .score-button {
    height: 100%;
    min-height: 0;
}

/* 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;
}

.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 h2 {
font-family: '1942 report', sans-serif;
font-size: 52px;
line-height: 80%;
text-align: center;
color: #f6d93a;
word-spacing: -16px;
letter-spacing: -2px;
text-shadow: 1px 1px 3px #000;
  margin: 0;
  padding: 0;
}

#modal-header h3 {
font-size: 1.1rem;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  margin: 0;
  padding: 0;
  font-family: 'Oswald', sans-serif;
}