/* --- Reset y utilities --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  touch-action: manipulation; /* Prevents default touch actions like double-tap zoom */
}
/* MODIFIED: Change .hidden to use opacity/visibility for transitions */
.hidden {
  /* display: none !important; /* REMOVED */
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* Prevent interaction when hidden */
  /* Transition opacity and visibility. Visibility changes *after* opacity fades out */
  transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
}


/* --- Layout general --- */
html, body {
  width: 100%;
  height: 100%;
  background: #111; /* Default dark background */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* ADDED: Apply the new font */
  font-family: 'Outfit', sans-serif;
  font-weight: 400; /* Default font weight */

  /* ADDED: Disable text selection, copy, and paste */
  user-select: none; /* Standard property */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ */
  user-drag: none; /* Standard property */
  -webkit-user-drag: none; /* Safari */
  -webkit-tap-highlight-color: transparent; /* Prevent tap highlighting on mobile */
}

/* ADDED: Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');


:root {
  --vh: 1vh;
  --check-vh-size: 1.5vh; /* Define checker size using vh */
}
/* REMOVED: font-family from body */
/* body {
  font-family: sans-serif;
} */

.app-container {
  height: min(calc(var(--vh) * 100), 900px);
  aspect-ratio: 9 / 16;
  max-width: 100vw;
  background: #111; /* Should match body */
  position: relative;
  overflow: hidden;
  margin: auto;
}

/* ADDED: Base transition for screen containers when the .hidden class is removed */
#app-root,
#race-screen,
#scoreboard-screen,
#operation-screen {
    position: absolute; /* Keep screens layered */
    inset: 0; /* Cover the app-container */
    background: #111; /* Ensure dark background */
    overflow: hidden; /* Hide overflowing content (like race meeples briefly) */
    /* The display property is set specifically for each screen below */
    /* Add transition for opacity when hidden class is removed */
    transition: opacity 0.3s ease-out; /* Fade-in transition */
    /* visibility and pointer-events are controlled by the .hidden class */
}


/* --- Cabecera compartida --- */
.screen-header {
  position: absolute; /* Default absolute for race/operation, overridden for selection/scoreboard */
  top: 0;
  left: 0;
  width: 100%;
  height: 3rem;
  background: #000;
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  /* justify-content: center; -- Default for titles, overridden for specific headers */
  align-items: center;
  z-index: 20; /* Above track and finish line */
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  padding: 0 1rem; /* Default padding, adjusted below for specific headers */
}
.screen-header .btn-ok,
.screen-header .info-btn {
  position: absolute; /* Default absolute positioning for buttons in race/operation headers */
  background: none;
  border: none;
  color: #0af;
  cursor: pointer;
  font-size: 1rem;
  padding: 0; /* Reset padding here, will be set by specific button rules */
  height: 100%;
  display: flex;
  align-items: center;
  font-family: 'Outfit', sans-serif; /* Ensure buttons also use the font */
}
/* Specific positioning for default absolute buttons */
.screen-header .info-btn {
  left: 0;
}
.screen-header .btn-ok {
  right: 0;
}

/* Generic style for disabled buttons */
.screen-header .btn-ok:disabled,
.screen-header .info-btn:disabled { /* ADDED .info-btn:disabled */
  opacity: 0.4; /* Reduced opacity for disabled state */
  cursor: default; /* Change cursor to default */
}

/* Style for the title span within headers */
.screen-header span {
    /* Default style for title spans */
    flex-grow: 1; /* Allow titles to take space in flex headers */
    text-align: center; /* Center text in flex headers */
}


/* --- Player selection screen --- */
#app-root {
    /* Uses common absolute positioning and transition from the new rule above */
    display: flex; /* Ensure flex column layout for header and grid */
    flex-direction: column;
}
/* MODIFIED: Selection Header Specific Layout */
#app-root .screen-header {
    position: static; /* Revert to static for flex column layout */
    flex-shrink: 0; /* Prevent shrinking */
    justify-content: space-between; /* Distribute space between items (buttons & title) */
    padding: 0 0.5rem; /* Adjust horizontal padding */
}

/* MODIFIED: Override button positioning specifically for the selection header */
#app-root .screen-header .info-btn,   /* Left button */
#app-root .screen-header .btn-ok {     /* Right button */
    position: static; /* Remove absolute positioning */
    left: auto; /* Remove absolute positioning */
    right: auto; /* Remove absolute positioning */
    padding: 0 0.5rem; /* Add padding back to the buttons within the header */
    height: 100%; /* Make button height match header height */
    /* z-index is not strictly necessary for static, but kept for safety if needed later */
    z-index: 21;
}
/* Keep the title span centered with flex */
#app-root .screen-header .title {
    /* flex-grow: 1 and text-align: center are inherited from generic span rule */
     margin: 0 0.5rem; /* Add horizontal margin to prevent collision */
}


.player-grid {
  position: static; /* Grid is static in this flex column layout */
  flex-grow: 1; /* Allow grid to take remaining space */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
}
.player-cell {
  position: relative;
  display: flex; /* Use flexbox or grid for centering content if needed, but background-image is simpler */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.1s ease-out;

  /* Add background image properties */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40%; /* Adjust size as needed */
}
.player-cell:active {
  transform: scale(0.95);
}
.player-cell.selected::after {
  /* content: '✔'; /* REMOVED: Removed the checkmark character */
  content: ''; /* ADDED: Set content to empty */
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* color: #080; /* REMOVED: No longer text content */
  /* font-size: 1rem; /* REMOVED: No longer text content */
  z-index: 1; /* Ensure checkmark is above meeple image if using background-image */

  /* ADDED: Background image properties for the tick SVG */
  background-image: url('images/ok-btn.svg');
  background-size: 100%; /* Make the SVG fill the pseudo-element */
  background-repeat: no-repeat;
  background-position: center;
}
/* Update color classes to set background-color and background-image */
.color-red    { background-color: #ff4c4c; background-image: url('images/01-red-meeple.svg');    }
.color-orange { background-color: #ffad3c; background-image: url('images/02-yellow-meeple.svg'); }
.color-green  { background-color: #5cd65c; background-image: url('images/03-green-meeple.svg');  }
.color-teal   { background-color: #2bb3b3; background-image: url('images/04-blue-meeple.svg');   }
.color-purple { background-color: #d278ec; background-image: url('images/05-purple-meeple.svg'); }
.color-pink   { background-color: #ff6fb3; background-image: url('images/06-pink-meeple.svg');   }
.color-gray   { background-color: #aaa;   background-image: url('images/07-gray-meeple.svg');   }
.color-black  { background-color: #333;   background-image: url('images/08-black-meeple.svg');  }


/* --- Race screen --- */
#race-screen {
  /* Uses common absolute positioning and transition from the new rule above */
  display: block; /* Keep display block for the elements inside */
}
/* Play button positioning and style */
#btn-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6rem; /* Size of the image button */
  height: 6rem;
  background-image: url('images/play-btn.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  background-color: transparent; /* Important for SVG transparency */
  cursor: pointer;
  z-index: 25; /* Ensure it's above everything else when visible */
  transition: opacity 0.5s ease; /* Add transition for fade */
}
/* Fade out effect */
#btn-play.fade-out {
    opacity: 0;
    pointer-events: none; /* Prevent clicks during fade */
}


/* MODIFIED: Race end message and buttons container layout */
#race-end-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 25; /* Ensure it's above everything else when visible */
    display: flex; /* Arrange popup and buttons vertically */
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; /* Space between the white popup and the circular buttons below */
    max-width: 90%; /* Prevent overflow on narrow screens */
    /* Remove background, padding, border-radius from this container itself */
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none; /* Remove shadow from the container */
    color: #fff; /* Default text color (not visible on white popup) */
}

/* ADDED: Style for the white popup wrapper */
/* MODIFIED: Adjust padding-top to make space for the meeple */
.race-end-popup {
    background: #fff; /* White background */
    color: #000; /* Text color for the popup content */
    border-radius: 1rem; /* Rounded corners */
    /* Padding: top needs extra space for the meeple */
    padding: 1.5rem 1.5rem 1.5rem 1.5rem; /* Default padding (top will be overridden by margin-top on content) */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Add shadow to the popup */
    width: 100%; /* Make popup fill the container width */
    display: flex; /* Layout inside the popup */
    flex-direction: column; /* Stack elements inside popup vertically */
    align-items: center; /* Center items inside popup */
    position: relative; /* Needed for positioning the meeple sticking out */
    /* Removed padding-top calculation from here */
    font-size: 1.3em;
    font-weight: 500;

}

/* ADDED: Style for the content section below the meeple */
/* MODIFIED: Added margin-top to push content below the meeple */
.popup-content-section {
    display: flex;
    align-items: center; /* Align items vertically */
    gap: 1rem; /* Space between elements */
    width: 100%; /* Ensure this flex container takes full width */
    justify-content: center; /* Center the content horizontally */
    /* Add margin-top to create space for the meeple positioned above */
    /* Meeple is 5rem height, half is 2.5rem. Add some space below it */
    margin-top: calc(2rem / 2); /* Push down by half meeple height + buffer */
    box-sizing: border-box; /* Include padding in width calculation */
    /* Remove position/transform from previous .popup-top-section plan */
    position: static;
    transform: none;
}


/* ADDED: Style for confetti images */
.confetti-left,
.confetti-right {
    width: 2.5rem; /* Size of confetti image */
    height: 2.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0; /* Prevent shrinking */
}
.confetti-left {
    background-image: url('images/confeti-L-btn.svg');
}
.confetti-right {
    background-image: url('images/confeti-R-btn.svg');
}


/* MODIFIED: Style for the meeple circle within the popup */
/* Positioned absolutely relative to .race-end-popup */
#race-end-meeple.player-indicator.popup-meeple {
    /* Inherits border-radius from .player-indicator */
    /* Add specific styles for the popup version */
    position: absolute; /* Position absolutely relative to parent .race-end-popup */
    top: 0; /* Align top edge to parent's top edge */
    left: 50%; /* Align left edge to parent's horizontal center */
    transform: translate(-50%, -50%); /* Move up and left by half its own size to center its *middle* on the top edge */
    z-index: 2; /* Ensure it's above the popup background */

    /* Size and border as per user's last adjustment */
    width: 5rem;
    height: 5rem;
    border: 6px solid #fff; /* White border as per mockup */
    /* background-color and background-image set by JS via color classes */
    background-size: 60%; /* Size of the meeple image *inside* the circle */
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%; /* Ensure it's round */

    /* REMOVED: Box-shadow */
    /* box-shadow: 0 0 0 3px; */
    flex-shrink: 0; /* Prevent shrinking */
}
/* REMOVED: Box-shadow color rules (not needed now) */


/* MODIFIED: End message style (now inside popup-content-section) */
.race-end-container .end-message {
    color: #000; /* Black color for text inside white popup */
    font-size: 1.5rem; /* Slightly smaller than before */
    font-weight: bold;
    margin-bottom: 0; /* Remove margin below message as it's now flex item */
    flex-grow: 0; /* Prevent message from growing too much */
    text-align: center; /* Ensure text centering */
}

/* ADDED: Container for the circular buttons below the popup */
/* MODIFIED: Adjusted gap */
.race-end-buttons {
    display: flex;
    justify-content: center; /* Center the buttons horizontally */
    gap: 2rem; /* Space between the two buttons (User confirmed 2rem gap from screenshot) */
    width: 100%; /* Allow the container to take full width */
}

/* ADDED: Base style for the new circular buttons */
/* MODIFIED: Adjusted size and background-size, removed border */
.circular-btn {
    width: 5rem; /* Size of the circular button (User confirmed 5rem) */
    height: 5rem;
    border-radius: 50%; /* Make it round */
    cursor: pointer;
    background-color: white; /* Default background (will be overridden) */
    background-size: 100%; /* Size of the icon inside (User commented out, re-added for correct icon size vs button size) */
    background-repeat: no-repeat;
    background-position: center;
    /* MODIFIED: Remove border (User confirmed no border) */
    border: none;
    flex-shrink: 0; /* Prevent shrinking */
    /* ADDED: Initial state and transition for fade-in */
    opacity: 0; /* Start invisible */
    pointer-events: none; /* Prevent clicks when invisible */
    transition: opacity 0.5s ease; /* Fade transition */
    transform: scale(1); /* Ensure scale is 1 by default for active state */
}
.circular-btn:active {
    transform: scale(0.95);
}

/* ADDED: Style to show the buttons */
.race-end-buttons.show-buttons .circular-btn {
    opacity: 1; /* Fade in */
    pointer-events: auto; /* Allow clicks */
}


/* ADDED: Specific styles for Restart button */
.restart-btn {
    background-image: url('images/restart-race-btn.svg');
    /* REMOVED: Red border (User confirmed no border) */
    /* border: 3px solid #ff4c4c; */
    background-color: #fff; /* White background */
}

/* ADDED: Specific styles for OK button */
.ok-btn {
    background-image: url('images/ok-btn.svg');
    background-color: #5cd65c; /* Green background */
    /* REMOVED: No border (User confirmed no border) */
    /* border: none; */
}


/* Race screen header - keep absolute */
#race-screen .screen-header {
    position: absolute;
    justify-content: space-between; /* Keep space between info and skip */
    padding: 0 0.5rem; /* Adjust padding */
}
/* MODIFIED: Override button positioning specifically for the race header */
#race-screen .screen-header .info-btn,
#race-screen .screen-header .btn-ok {
    position: static; /* Make buttons participate in flex layout */
    left: auto; /* Override generic absolute positioning */
    right: auto; /* Override generic absolute positioning */
    padding: 0 0.5rem; /* Add padding back to the buttons */
    height: 100%; /* Ensure button height matches header */
    z-index: 21; /* Ensure buttons are clickable */
}


.finish-line {
  position: absolute; /* Restore absolute positioning */
  top: 3rem; /* Below header */
  left: 0;
  right: 0;
  height: calc(var(--check-vh-size) * 2); /* Height is two checks tall */
  z-index: 5; /* z-index 5 */
}
.finish-line::before,
.finish-line::after {
  content: '';
  position: absolute; /* Keep absolute relative to .finish-line */
  left: 0;
  right: 0;
  height: var(--check-vh-size); /* Each pseudo-element is one check tall */
  background-size: calc(var(--check-vh-size) * 2) var(--check-vh-size); /* Pattern unit is 2x1 checks */
  background-repeat: repeat-x;
}
.finish-line::before {
  top: 0;
  background-image: repeating-linear-gradient(90deg, #fff 0 var(--check-vh-size), #000 var(--check-vh-size) calc(var(--check-vh-size)*2));
}
.finish-line::after {
  top: var(--check-vh-size); /* Positioned one check height down */
   background-image: repeating-linear-gradient(90deg, #000 0 var(--check-vh-size), #fff var(--check-vh-size) calc(var(--check-vh-size)*2));
}

#race-track {
  position: absolute; /* Restore absolute positioning */
  top: calc(3rem + var(--check-vh-size) * 2); /* Below header and scalable finish line */
  bottom: 0;
  left: 0;
  right: 0;
  display: flex; /* Keep internal flex layout for lanes */
  z-index: 10; /* Above finish-line (5) */
  overflow: visible; /* Allow meeples to render outside its top boundary */
}
.track-line {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative; /* Needed for absolute meeple positioning */
  overflow: visible; /* Remove clipping on the lane, use visible */
}
.track-line:nth-child(odd)  { background: #4caf50; }
.track-line:nth-child(even) { background: #388e3c; }
.meeple {
  width: 80%;
  aspect-ratio: 1 / 1;
  border-radius: 8px; /* Kept rounded corners */
  margin: 0;
  transition: transform 0.1s ease; /* Keep transition for smooth movement */
  z-index: 10; /* Relative to #race-track */
  position: absolute;
  bottom: 0;
  /* Use background-color and background-image for race meeples too for consistency */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 66%; /* Meeple fills its container here */
}

/* Update race meeple colors */
/* Keep background-image, set background-color back to the solid color */
#race-track .meeple.color-red    { background-color: #ff4c4c; background-image: url('images/01-red-meeple.svg');    }
#race-track .meeple.color-orange { background-color: #ffad3c; background-image: url('images/02-yellow-meeple.svg'); }
#race-track .meeple.color-green  { background-color: #5cd65c; background-image: url('images/03-green-meeple.svg');  }
#race-track .meeple.color-teal   { background-color: #2bb3b3; background-image: url('images/04-blue-meeple.svg');   }
#race-track .meeple.color-purple { background-color: #d278ec; background-image: url('images/05-purple-meeple.svg'); }
#race-track .meeple.color-pink   { background-color: #ff6fb3; background-image: url('images/06-pink-meeple.svg');   }
#race-track .meeple.color-gray   { background-color: #aaa;   background-image: url('images/07-gray-meeple.svg');   }
#race-track .meeple.color-black  { background-color: #333;   background-image: url('images/08-black-meeple.svg');  }


/* --- Scoreboard screen --- */
#scoreboard-screen {
  /* Uses common absolute positioning and transition from the new rule above */
  display: flex; /* Keep flex column layout */
  flex-direction: column;
}
/* Scoreboard Header Specific Layout */
#scoreboard-screen .screen-header {
  position: static; /* Revert to static for flex column layout */
  flex-shrink: 0; /* Prevent shrinking */
  justify-content: space-between; /* Distribute space between items */
  padding: 0 0.5rem; /* Add horizontal padding to the header itself */
  z-index: 20; /* Ensure header is above the list */
}

/* Style for the title span specifically in scoreboard header */
#scoreboard-screen .screen-header .header-title {
    /* flex-grow: 1 and text-align: center are handled by generic span rule now */
    margin: 0 0.5rem; /* Add horizontal margin to prevent collision */
}


/* Override button positioning specifically for the scoreboard header */
#scoreboard-screen .screen-header .info-btn, /* Left button (e.g., Back button if added later) */
#scoreboard-screen .screen-header .btn-ok {   /* Right button */
    position: static; /* Remove absolute positioning */
    left: auto; /* Remove absolute positioning */
    right: auto; /* Remove absolute positioning */
    padding: 0 0.5rem; /* Adjust padding inside the header flex container */
    height: 100%; /* Make button height match header height */
    /* Ensure border, background are handled by generic .btn-ok/.info-btn or specifically here if needed */
     z-index: 21; /* Ensure buttons are clickable even if header overlaps slightly */
}


#scoreboard-list {
  position: static;
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 1; /* Explicitly place list items above default z-index (0) but below header (20) */
}
.scoreboard-row {
  flex-shrink: 0;
  flex-grow: 1;
  min-height: 4rem;
  display: grid;
  grid-template-columns: 1.5rem 3rem auto 1.5rem;
  align-items: center;
  padding: 0 1rem;
  gap: 0.5rem;
  border-top: 1px solid #333;
  cursor: pointer;
  /* No z-index needed here, inherited from parent #scoreboard-list */
}
.scoreboard-row:nth-child(odd)  { background: #222; }
.scoreboard-row:nth-child(even) { background: #1a1a1a; }
.scoreboard-row .position {
  color: #fff;
  font-size: 1rem;
  text-align: center;
}
.player-indicator { /* This class is used for both scoreboard and operation meeple display */
  width: 3rem; /* Same size as before */
  height: 3rem;
  border-radius: 50%; /* Restored circle shape */
  /* Update player indicator to use background image */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 66%; /* Adjust size as needed */
}
/* Update scoreboard player indicator colors */
/* Set background-color and background-image */
#scoreboard-screen .player-indicator.color-red    { background-color: #ff4c4c; background-image: url('images/01-red-meeple.svg');    }
#scoreboard-screen .player-indicator.color-orange { background-color: #ffad3c; background-image: url('images/02-yellow-meeple.svg'); }
#scoreboard-screen .player-indicator.color-green  { background-color: #5cd65c; background-image: url('images/03-green-meeple.svg');  }
#scoreboard-screen .player-indicator.color-teal   { background-color: #2bb3b3; background-image: url('images/04-blue-meeple.svg');   }
#scoreboard-screen .player-indicator.color-purple { background-color: #d278ec; background-image: url('images/05-purple-meeple.svg'); }
#scoreboard-screen .player-indicator.color-pink   { background-color: #ff6fb3; background-image: url('images/06-pink-meeple.svg');   }
#scoreboard-screen .player-indicator.color-gray   { background-color: #aaa;   background-image: url('images/07-gray-meeple.svg');   }
#scoreboard-screen .player-indicator.color-black  { background-color: #333;   background-image: url('images/08-black-meeple.svg');  }


.scoreboard-row .score {
  text-align: right;
  margin-right: 20px;
  color: #fff;
  font-size: 2.5rem;
  font-weight: bold;
  flex-grow: 1;
}
.arrow {
  font-size: 1.5rem;
}
/* Text colors match the meeple colors */
.text-red    { color: #ff4c4c; }
.text-orange { color: #ffad3c; }
.text-green  { color: #5cd65c; }
.text-teal   { color: #2bb3b3; }
.text-purple { color: #d278ec; } /* Color morado ajustado */
.text-pink   { color: #ff6fb3; }
.text-gray   { color: #aaa;   }
.text-black  { color: #333;   }

.app-footer {
  width: 100%;
  height: 2rem;
  background: #000;
  color: #555;
  font-size: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  position: static;
}


/* --- Operaciones screen --- */
#operation-screen {
  /* Uses common absolute positioning and transition from the new rule above */
  display: flex; /* Use flexbox for main layout */
  flex-direction: column; /* Stack elements vertically */
  align-items: center; /* Center contents horizontally */
  padding-top: 3rem; /* Space for the header */
}

/* Operation screen header - keep absolute */
#operation-screen .screen-header {
    position: absolute;
    justify-content: space-between; /* Use space-between for back button and title */
    padding: 0 0.5rem; /* Adjust padding */
}

/* ADDED: Override button positioning specifically for the operation header */
#operation-screen .screen-header .info-btn, /* Left button (Back) */
#operation-screen .screen-header .btn-ok {   /* Right button (None exists currently, but good practice) */
    position: static; /* Make buttons participate in flex layout */
    left: auto; /* Override generic absolute positioning */
    right: auto; /* Override generic absolute positioning */
    padding: 0 0.5rem; /* Add padding back to the buttons */
    height: 100%; /* Ensure button height matches header */
    z-index: 21; /* Ensure buttons are clickable */
}
/* Style for the title span specifically in operation header to center it */
#operation-screen .screen-header .title {
    /* flex-grow: 1 and text-align: center are inherited from generic span rule */
    margin: 0 0.5rem; /* Add horizontal margin to prevent collision */
}


/* Meeple del jugador actual (posicionado absolutamente) */
#op-meeple.player-indicator {
    position: absolute; /* Position absolutely */
    top: 4rem; /* Below the header */
    left: 1rem; /* Left padding */
    width: 3rem; /* Smaller size for top-left corner */
    height: 3rem; /* Smaller size for top-left corner */
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 66%;
    z-index: 15; /* Above other main content */
    /* Color and image classes are added by JS */
}
/* Specific color styles for operation screen meeple */
/* These rules override the generic .player-indicator rules for background-color */
#operation-screen #op-meeple.color-red    { background-color: #ff4c4c; }
#operation-screen #op-meeple.color-orange { background-color: #ffad3c; }
#operation-screen #op-meeple.color-green  { background-color: #5cd65c; }
#operation-screen #op-meeple.color-teal   { background-color: #2bb3b3; }
#operation-screen #op-meeple.color-purple { background-color: #d278ec; }
#operation-screen #op-meeple.color-pink   { background-color: #ff6fb3; }
#operation-screen #op-meeple.color-gray   { background-color: #aaa;   }
#operation-screen #op-meeple.color-black  { background-color: #333;   }


/* Toggle "Volver automáticamente" (posicionado absolutamente) */
.op-toggle {
    position: absolute; /* Position absolutely */
    top: 4rem; /* Below the header */
    right: 1rem; /* Right padding */
    z-index: 15; /* Above other main content */
    font-size: 0.8rem; /* Smaller font size for label */
    color: #fff;
    display: flex;
    flex-direction: column; /* Stack switch and label vertically */
    align-items: center; /* Center content vertically */
    gap: 0.2rem; /* Reduced gap */
}
/* Style for the toggle switch */
.op-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 2.5rem;
    height: 1.5rem;
    background: #8e8e93;
    border-radius: 1rem;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex-shrink: 0; /* Prevent shrinking */
}
.op-toggle input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 0.1rem;
    left: 0.1rem;
    width: 1.3rem;
    height: 1.3rem;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s ease;
}
.op-toggle input[type="checkbox"]:checked {
    background: #34c759;
}
.op-toggle input[type="checkbox"]:checked::before {
    transform: translateX(1rem);
}
.op-toggle label {
    text-align: center; /* Center the label text */
}


/* Area principal de display (Score, History) */
/* Ahora ocupa el espacio restante entre header/top-elements y input/numpad */
.op-main-display {
    flex-grow: 1; /* Allow to grow and fill available space */
    flex-shrink: 1; /* Allow to shrink if necessary */
    width: 100%;
    display: flex;
    flex-direction: column; /* Stack score and history */
    align-items: center; /* Center score and history horizontally */
    justify-content: center; /* Center score and history vertically within this flexible area */
    padding: 1rem 1rem 0.5rem 1rem; /* Top, Right, Bottom, Left */
     overflow: hidden; /* Prevent internal scroll unless needed */
}

#op-current-score {
    font-size: 5.5rem; /* Large score */
    font-weight: bold;
    color: #fff; /* White color */
    margin-bottom: 0.5rem; /* Space below score for history */
}

#op-history {
    width: 100%; /* Take full width to center text easily */
    text-align: center; /* Center history lines */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem; /* Espacio vertical entre elementos del historial */
    margin-top: -0.5rem; /* Espacio encima del historial */
}
/* Define basic colors for history items based on operation type */
#op-history span.history-add {
    color: #5cd65c; /* Green color */
}
#op-history span.history-subtract {
    color: #ff4c4c; /* Red color */
}
/* Styles for the history entries (applied based on their position from the TOP after reverse appending) */
/* These rules set font-size and opacity, and override the color set by the classes above */
#op-history span:first-child { /* Latest operation (appears first in DOM) */
    font-size: 3rem; /* Slightly smaller than before */
    /* color: rgba(255, 255, 255, 0.9); REMOVED - handled by .history-add/subtract */
    opacity: 0.9; /* Slightly more opaque */
}
#op-history span:nth-child(2) { /* Second latest (Middle) */
    font-size: 2rem; /* Smaller than before (2.0) */
    /* color: rgba(255, 255, 255, 0.5); REMOVED - handled by .history-add/subtract */
    opacity: 0.5; /* Less opaque */
}
#op-history span:nth-child(3) { /* Third latest (Oldest) */
    font-size: 1.5rem; /* Smaller than before (1.2) */
    /* color: rgba(255, 255, 255, 0.2); REMOVED - handled by .history-add/subtract */
    opacity: 0.2; /* Much darker tone */
}
/* Hide older entries if more than 3 somehow */
#op-history span:nth-child(n+4) {
    display: none;
}


/* Sección central de entrada de valor (+, Input, -) */
.op-input-section {
    width: 100%;
    padding: 0 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-shrink: 0; /* Prevent shrinking */
}
.op-input-section .op-round-btn {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: none;
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.1s ease;
    font-family: 'Outfit', sans-serif; /* Ensure buttons use the font */
}
.op-input-section .op-round-btn:active {
    opacity: 0.8;
}
/* Specific colors for + and - buttons */
#btn-subtract-apply {
    background: #ff4c4c;
    color: #fff;
}
#btn-add-apply {
    background: #5cd65c;
    color: #000;
}

.op-value-display {
    flex-grow: 1; /* Allow to grow to fit space */
    max-width: 8rem; /* Limit max width */
    height: 4.5rem; /* Aumentar altura */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    color: #fff;
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: clip;
    font-family: 'Outfit', sans-serif; /* Ensure display uses the font */
}


/* Teclado numérico */
.numpad-container {
    width: 100%;
    flex-shrink: 0; /* Do not allow numpad to shrink */
    padding: 0 0.5rem 0.5rem 0.5rem;
}
/* Grid layout matching the sketch (3x4 implicitly) */
.numpad-grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr); /* Explicitly 4 rows */
  gap: 0.5rem;
}
.numpad-grid-layout .num-btn {
  font-size: 1.5rem;
  padding: 0.8rem; /* Reducido de 1rem */
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: none;
  border-radius: 0.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.1s ease;
  font-family: 'Outfit', sans-serif; /* Ensure numpad buttons use the font */
}
.numpad-grid-layout .num-btn:active {
    background: rgba(255, 255, 255, 0.2);
}
/* Button positions in the new grid */
/* 1-9 are in rows 1-3, cols 1-3 (default order) */
/* 0 is in row 4, col 2 */
.numpad-grid-layout [data-value="0"] {
    grid-row: 4;
    grid-column: 2;
}
/* Delete button is in row 4, col 3 */
.numpad-grid-layout .delete-btn {
    grid-row: 4;
    grid-column: 3;
    background: rgba(255, 255, 255, 0.1); /* Ensure gray background */
}
.numpad-grid-layout .delete-btn:active {
    background: rgba(255, 255, 255, 0.2);
}
/* Placeholder is in row 4, col 1 */
.numpad-grid-layout .numpad-placeholder-bottom-left {
    grid-row: 4;
    grid-column: 1;
    background: transparent;
    cursor: default;
    pointer-events: none;
}


/* --- Responsive adjustments for small screens by height --- */
@media (max-height: 600px) {
    #operation-screen {
        /* Reduce padding-top slightly if needed, keeping header space */
        padding-top: 3rem; /* Keep consistent with header height */
    }

    /* Adjust position of meeple and toggle */
    #op-meeple.player-indicator,
    .op-toggle {
        top: 3.5rem; /* Move slightly down from header */
    }


    .op-main-display {
        /* Further reduce padding around the main display area */
        padding: 0.5rem 1rem 0.2rem 1rem; /* Reduce top, keep sides, reduce bottom */
        justify-content: flex-start; /* Align score/history to top to save space below */
    }
    

    #op-current-score {
        /* Make the score font size smaller */
        font-size: 4.5rem; /* Reduced from 5.5rem */
        margin-bottom: 0.2rem; /* Reduce space below score */
    }

    #op-history {
        /* Reduce gap and possibly overall margin */
        gap: 0.1rem; /* Reduced from 0.2rem */
        margin-top: -0.6rem; /* Reduced from 0.5rem */
    }

    /* Positional styles for history items within the media query */
    #op-history span:first-child {
        font-size: 2.5rem; /* Reduced from 3rem */
    }
    #op-history span:nth-child(2) {
        font-size: 1.5rem; /* Reduced from 1.8rem */
    }
    #op-history span:nth-child(3) {
        font-size: 0.8rem; /* Reduced from 1rem */
    }

    .op-input-section {
        /* Reduce button size and input display height */
        margin-bottom: 0.5rem; /* Reduce space below input section */
        gap: 0.4rem; /* Slightly reduce gap */
    }

    .op-input-section .op-round-btn {
        width: 3.5rem; /* Reduced from 4rem */
        height: 3.5rem; /* Reduced from 4rem */
        font-size: 1.8rem; /* Slightly reduced */
    }

    .op-value-display {
         height: 3.0rem; /* Reduced from 4.5rem */
         font-size: 2rem; /* Reduced from 2.5rem */
         max-width: 7rem; /* Optionally reduce max width */
    }

    .numpad-container {
        padding: 0 0.4rem 0.4rem 0.4rem; /* Slightly reduced padding */
    }

    .numpad-grid-layout {
        gap: 0.4rem; /* Slightly reduced gap */
    }

    .numpad-grid-layout .num-btn {
        padding: 0.6rem; /* Reduced from 0.8rem */
        font-size: 1.2rem; /* Reduced from 1.5rem */
    }
}

/* --- Blink animation --- */
@keyframes blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0; }
}
/* MODIFIED: Apply blink to race track meeples */
#race-track .meeple.blink {
  animation: blink 1s ease-in-out infinite;
}
/* ADDED: Ensure popup meeple does NOT blink by default */
#race-end-meeple.player-indicator.popup-meeple {
    animation: none;
}