/* Global Resets & Basic Setup */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-touch-callout: none; /* Disable callout menus on touch */
    -webkit-user-select: none;   /* Disable text selection */
    user-select: none;
    -webkit-tap-highlight-color: transparent; /* Disable tap highlight */
}
:root {
    --lighter-primary-color: color-mix(in srgb, var(--primary-color) 70%, white 30%);
    --dark-primary-color: color-mix(in srgb, var(--primary-color) 40%, black 60%);
    --lighter-secondary-color: color-mix(in srgb, var(--secondary-color) 70%, white 30%);
    --trans-secondary-color: color-mix(in srgb, var(--secondary-color) 30%, transparent 70%);

}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevent scrolling on body */
    position: fixed; /* Prevent pull-to-refresh */
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Default background, can be overridden by JS */
    background: radial-gradient(circle, var(--primary-color) 30%, #000 100%);
    background-color: #000;
    font-family: 'Arial Narrow', Arial, sans-serif; /* Default font */
    touch-action: none; /* Prevent default touch actions like pinch-zoom */
}
@media screen and (max-width: 768px) {
    .container {
        background: radial-gradient(circle, var(--primary-color) 20%, var(--dark-primary-color) 100%);
    }
}

/* Import Fonts (if needed and paths are correct) */
@font-face {
    font-family: 'Arial Narrow Bold';
    src: url('fonts/ARIALNB.woff') format('woff'); /* Adjust path if needed */
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Arial Narrow';
    src: url('fonts/ARIALN.woff') format('woff'); /* Adjust path if needed */
    font-weight: normal;
    font-style: normal;
}

/* --- Main Layout Container --- */
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 10px; /* Add some padding */
    position: relative; /* For positioning absolute children like terms link */
}


/* --- Scratch Card Wrapper --- */
.image-wrapper {
    position: relative;
    display: flex; /* Use flex to help center the image/canvas */
    justify-content: center;
    align-items: center;
    /* Responsive sizing: Use viewport units, but limit max size */
    width: 95vw;
    height: 75vh; /* Start with height constraint */
    max-width: 700px; /* Max width for desktop */
    max-height: 650px; /* Max height for desktop */
    overflow: hidden;
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.4);
    background-color: #333; /* Fallback background */
    border-radius: 5px; /* Slightly rounded corners */
    bottom: 5%;
    opacity: 0; /* Start hidden */
    visibility: hidden; /* Ensure it doesn't affect layout before ready */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; /* Optional: fade-in effect */
}
/* In your scratchoff.css */
.image-wrapper.loaded {
    opacity: 1;
    visibility: visible; /* Make it visible */
}

/* The actual image holding the bottom layer visual */
.center-image {
    display: block; /* Remove extra space below image */
    width: 100%;   /* Scale width to fit wrapper */
    height: 100%;  /* Scale height to fit wrapper */
    object-fit: contain; /* Maintain aspect ratio, fit within bounds */
    /* visibility: hidden; Initially hidden, shown by JS */
}

/* --- Scratch & Particle Canvases --- */
.scratch-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    container-type: inline-size;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Will be overridden by JS inline style */
    height: 100%; /* Will be overridden by JS inline style */
    cursor: pointer; /* Use a more indicative cursor */
    /* Improve performance on mobile */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

#topLayer {
    z-index: 4; /* Scratch layer on top */
}
#particleCanvas {
    z-index: 5; /* Particles below scratch layer */
    pointer-events: none; /* Ignore pointer events */
}
#bottomLayer {
    z-index: 1; /* Base image canvas (hidden) */
    visibility: hidden;
}


/* Holographic Effect (Optional, kept from original) */
.image-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("imgs/sparkles.gif"); /* Adjust path if needed */
    background-size: 160%;
    background-position: 50% 50%;
    background-blend-mode: overlay;
    filter: brightness(1) contrast(1);
    mix-blend-mode: color-dodge;
    opacity: 0.6; /* Slightly less intense */
    transition: opacity 0.33s ease;
    z-index: 4; /* Above scratch layer */
    pointer-events: none; /* Ignore pointer events */
    border-radius: inherit; /* Inherit wrapper rounding */
}

/* Example Text Style Class (add more as needed based on JSON) */
.textStyleArial {
    font-family: 'Arial Narrow Bold', Arial, sans-serif;
}
.textStyleCourier {
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 2px;
}

/* --- UI Elements --- */
.back-button {
    position: fixed; /* Fixed position relative to viewport */
    top: 10px;
    left: 10px;
    padding: 8px 15px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: 20px; /* Pill shape */
    z-index: 10; /* High z-index */
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: background-color 0.2s ease;
}
.back-button:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.terms {
    position: absolute; /* Position relative to container */
    bottom: 10px;
    color: #ffffff60;
    text-decoration: underline;
    font-size: .8rem;
    z-index: 5;
}

/* --- Popups --- */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Darker overlay */
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 20; /* Highest z-index */
    padding: 20px; /* Padding for smaller screens */
}

.popup-content {
    font-family: 'Arial Narrow', Arial, sans-serif;
    color: #000;
    padding: 20px 25px 25px 25px;
    width: 90%;
    max-width: 450px;
    text-align: center;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
    /* Default gradient, overridden by JS */
    background: linear-gradient(var(--primary-color, #1b1b1b) 0%, var(--dark-primary-color, #000000) 100%);
    border-radius: 8px;
    overflow-y: auto; /* Allow scrolling within popup if content overflows */
    max-height: 80vh; /* Limit popup height */
}

.popup-content h2 {
    margin-bottom: 15px;
    margin-top: 5px;
    font-size: 1.4em;
    font-family: 'Arial Narrow Bold', Arial, sans-serif;
}

.popup-content p {
    font-size: 1.05em;
    opacity: 0.9;
    margin-bottom: 15px;
    line-height: 1.4;
}
#popupSub { /* Specific styling for sub-message */
     font-size: 0.9em;
     opacity: 0.7;
     margin-top: -10px;
}

.popupMessage { /* Styling for messages containing codes */
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    margin-top: 15px;
    padding: 12px;
    font-size: 1.1em;
    border-radius: 5px;
}

.copyable-code {
    font-weight: bold;
    font-family: 'Arial Narrow Bold', Arial, Helvetica, sans-serif;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 2px 5px;
    border-radius: 3px;
    cursor: pointer;
    user-select: text; /* Allow selecting code */
}

.popup-button {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    background-color: var(--secondary-color, #19a52c); /* Use secondary color */
    color: white;
    font-size: 1em;
    font-family: 'Arial Narrow Bold', Arial, sans-serif;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.popup-button:hover {
    opacity: 0.85;
}

.copy-tooltip {
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8em;
    z-index: 30; /* Above everything */
    pointer-events: none; /* Don't interact with tooltip */
}

/* --- UPDATED: Winner Receipt Styles --- */
.receipt-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 6; /* Above game messages, below popups */
    transform: translateY(105%); /* Start hidden below the screen */
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth slide-up animation */
}

/* When visible, slide it up to be flush with the bottom of the viewport */
.receipt-container.visible {
    transform: translateY(0);
}

@font-face {
    font-family: "Receipt";
    src: url(fonts/Receipt.otf) format(opentype);
}

.receipt-paper {
    background-color: #f7f7f0; /* Off-white receipt color */
    color: #3d3d3d;
    font-family: 'Receipt', Courier, monospace;
    width: 90vw; /* Wide on mobile */
    max-width: 350px; /* Capped width on desktop */
    padding: 20px 15px 15px 15px; /* Add top padding for the tear */
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    text-align: center;
    position: relative;
    /* Remove all border-radius */
    border-radius: 0;
}

/* NEW: Torn edge at the TOP using an SVG mask for a clean cut */
.receipt-paper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px; /* Reduced height for a finer tear */
    background-color: inherit;
    /* Updated SVG with smaller dimensions for a denser pattern */
    mask-image: url("data:image/svg+xml,%3csvg width='12' height='6' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0 6 L6 0 L12 6 Z' fill='black'/%3e%3c/svg%3e");
    mask-size: 12px 6px; /* Match the new SVG dimensions */
    mask-repeat: repeat-x;
    transform: translateY(-99%);
}


.receipt-header, .receipt-footer {
    font-size: 0.8em;
    opacity: 0.8;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 2px dashed #aaa;
}
.receipt-footer {
    border-bottom: none;
    border-top: 2px dashed #aaa;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 0;
}
.receipt-header {
    display: flex;
    justify-content: space-between;
}

.receipt-title {
    font-size: 1.8em;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 10px 0;
}

.receipt-prize-line {
    font-size: 1.1em;
    line-height: 1.3em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
    font-weight: bold;
    text-align: left;
}
#receiptPrizeAmount {
    font-size: 1.3em;
}

.post-win-actions {
    /* This is now positioned relative to the .receipt-container */
    position: absolute;
    /* Anchor to the top of the container, which is where the receipt paper sits */
    top: 0;
    left: 50%;
    /* This transform pulls the buttons UP by half their own height,
       making them sit perfectly on the top edge of the receipt paper */
    transform: translate(-50%, -92%);
    /* Higher z-index to ensure it's on top of the receipt paper */
    z-index: 2;
    display: flex; /* Keeps buttons side-by-side */
    gap: 15px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Updated transition to account for the new transform property */
    transition: opacity 0.5s ease-in-out 0.6s, transform 0.5s ease-in-out 0.6s;
}

.post-win-actions.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.receipt-action-btn {
    padding: 12px 25px;
    border: solid 2px;
    border-radius: 8px;
    font-family: 'Arial Narrow Bold', Arial, sans-serif;
    font-size: 1.1rem;
    cursor: pointer;
    opacity: .95;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.receipt-action-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

#receiptPlayAgainBtn {
    background-color: var(--secondary-color, #4CAF50);
    box-shadow: var(--trans-secondary-color) 0px 0px 10px 10px;
}

#receiptHomeBtn {
    background-color: #f1f1f1;
}

/* Styles for the dismiss button/chevron */
.dismiss-receipt-btn {
    position: absolute;
    bottom: -3px;
    left: 90%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    cursor: pointer;
    transition: background-color 0.3s;
    z-index: 1;
    animation: bouncer 3s ease-in-out 3s infinite alternate;
}
@keyframes bouncer {
    0% {
        bottom: -3px;
    }
    10% {
        bottom: -6px;
    }
    20% {
        bottom: -3px;
    }
}

.dismiss-receipt-btn:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

/*
 This rule now only applies when the receipt is both visible AND dismissed,
 preventing it from conflicting with the hiding animation on replay.
*/
.receipt-container.visible.dismissed {
    transform: translateY(calc(100% - 20px));
}

/* --- Game State Messages --- */
.game-message {
    color: #e1e1e1;
    border: solid 2px #e1e1e1;
    padding: 8px 15px;
    margin-top: 20px; /* Space above message */
    font-weight: bold;
    font-family: 'Arial Narrow Bold', Arial, sans-serif;
    font-size: clamp(1.1rem, 4vw, 1.6rem); /* Responsive font size */
    opacity: 0; /* Hidden by default */
    z-index: 1; /* Below popups */
    transition: opacity 0.8s ease-in-out;
    border-radius: 5px;
    position: absolute; /* Position messages absolutely */
    bottom: 2em;      /* Adjust position as needed */
    left: 50%;
    transform: translateX(-50%);
    width: max-content; /* Adjust width to content */
    max-width: 90%; /* Limit width */
    text-align: center;
    pointer-events: none; /* Don't interfere with interactions */
}
.game-message.lose-message {
    background-color: #ff2828; /* Light grey for non-winner */
    color: #e1e1e1;
    border: solid 3px #e1e1e1;
    box-shadow: #ff28285d 0px 0px 10px 10px, #ff2828 0px 0px 0px 5px;
    animation: none; /* Maybe no bounce for non-winner */
    /* You might want to adjust padding, font size etc. if needed */
}

/* Specific styles for different message types */
.waiting {
    border-color: #d0d0d0;
    color: #d0d0d0;
    z-index: 7;
}
.proceed {
    background-color: var(--secondary-color);
    color: #000;
    border: solid 3px #000;
    box-shadow: var(--trans-secondary-color) 0px 0px 10px 10px, var(--secondary-color) 0px 0px 0px 5px;
    animation: bounce 2s ease infinite;
    z-index: 7;
}
.getout {
    font-size: clamp(1rem, 3.5vw, 1.3rem); /* Slightly smaller */
    border-style: dashed;
    z-index: 7;
}

/* Make messages visible */
.visible {
    opacity: 1;
}

/* Animation for proceed message */
@keyframes bounce {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.05); }
}

/* --- Media Queries for Desktop --- */
@media screen and (min-width: 768px) {
    .image-wrapper {
        /* Allow wrapper to take aspect ratio of content on larger screens */
         /* width: auto; Maintain max-width */
         /* height: auto; Maintain max-height */
    }


     .game-message {
         bottom: 1em; /* Adjust message position */
     }

     .back-button {
         top: 20px;
         left: 20px;
         padding: 10px 18px;
         font-size: 1rem;
     }
}

/* --- NEW: Number Display Styling --- */

/* Common styles for both display areas */
.number-display {
    position: absolute;
    z-index: 2; /* Below scratch layer, above base image */
    pointer-events: none; /* Don't interfere with scratching */
    font-family: 'Arial Narrow Bold', Arial, sans-serif;
    color: #000; /* Default black text */
    overflow: hidden; /* Prevent content spillover */
}

.number-display table {
    width: 100%;
    height: 100%;
    table-layout: fixed; /* Equal column widths */
    border-collapse: collapse; /* Remove space between cell borders */
}

.number-display td {
    text-align: center;
    vertical-align: middle;
    padding: 1% 2%; /* Small padding relative to cell size */
    /* border: 1px solid rgba(255,0,0,0.2); /* --- DEBUG: Uncomment to see cell boundaries */
}

/* Specific positioning and sizing (ADJUST THESE PERCENTAGES BASED ON YOUR IMAGE LAYOUT!) */
.winning-numbers-display {
    /* Example: Position near top-center */
    top: 29%;    /* Adjust vertical position */
    left: 25%;   /* Adjust horizontal position */
    width: 50%;  /* Adjust width */
    height: 10%; /* Adjust height */
    font-size: clamp(1.8em, 4vmin, 2.5em);
    opacity: .9;
}
.winning-numbers-display td {
    text-align: center;
    vertical-align: middle; /* Align container to middle */
    padding: 1% 1%; /* Adjust padding */
    /* border: 1px solid red; /* DEBUG */
    height: 100%;
}

.winning-numbers-display.squished-cells td {
    padding-left: 0.5% !important; /* Reduced horizontal padding for "squished" cells */
    padding-right: 0.5% !important;
}

/* Optional: If a display area has no content, you might want to ensure it truly collapses */
.number-display:empty {
    display: none; /* Or visibility: hidden; if you prefer */
}

.win-num-container {
    display: flex;
    white-space: nowrap;
    flex-direction: column; /* Stack items vertically */
    align-items: center;    /* Center items horizontally */
    justify-content: center; /* Center items vertically within the container */
    width: 100%;
    height: 100%;
    /* border: 1px solid blue; /* DEBUG */
}

.win-num-digit {
    display: block; /* Takes full width */
    font-size: clamp(1.2em, 3vmin, 1.8em);
    font-weight: bold;
    line-height: 1; /* Tight line height */
    margin: 0; /* Remove previous margin */
    padding: 0;
    color: inherit;
    font-family: inherit;
    white-space: nowrap; /* Ensure digit stays on one line */
}

.win-num-text {
    display: block; /* Takes full width */
    /* REMOVE vertical text properties */
    /* writing-mode: vertical-rl; */
    /* text-orientation: mixed; */
    /* letter-spacing: 0.15em; */
    /* height: 90%; */

    /* ADD horizontal text properties */
    white-space: nowrap; /* Keep text on one line */
    text-transform: uppercase;
    font-family: 'Arial Narrow', Arial, sans-serif; /* Or inherit? */
    font-size: 2.4cqw; /* Smaller size for text below */
    font-weight: normal;
    line-height: 1.1; /* Slightly more line height */
    color: #333; /* Darker text */
    opacity: 0.9;
    margin-top: 0.1cqw; /* Add space below the digit */
    padding: 0;
    /* border: 1px solid orange; /* DEBUG */
}

/* CSS for Grid Layout Alternative */
#playAreaDisplay_Grid { /* Use the new ID or modify existing class */
    /* Example: Position in lower-middle */
    top: 49%;    /* Adjust vertical position */
    left: 10%;   /* Adjust horizontal position */
    width: 80%;  /* Adjust width */
    height: 39%; /* Adjust height */

    /* Grid properties */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    grid-template-rows: repeat(3, 1fr);    /* 3 equal rows */
    gap: 1% 3%; /* Adjust row and column gap (e.g., 2% row gap, 3% column gap) */
    align-items: center; /* Center items vertically in grid cell */
    justify-items: center; /* Center items horizontally in grid cell */
    padding: 1%; /* Optional padding around the grid */
}

.play-spot {
    text-align: center; /* Center text within the spot div */
    width: 100%; /* Take full width of grid cell */
    height: 90%;
}

.play-number {
    font-size: clamp(1.3em, 4vmin, 2.6em); /* Use vmin, adjust preferred value */
    line-height: 1.1; /* Adjust line height */
    margin-bottom: 0; /* Space between number and prize */
    margin-top: 5%;
    opacity: .9;
}

.play-prize {
    font-size: clamp(0.6em, 4vmin, 1.1em); /* Use vmin, adjust preferred value */
    line-height: 1;
    font-weight: bold; /* Prize might not need to be bold */
    font-family: 'Arial Narrow', Arial, sans-serif; /* Use regular narrow */
    opacity: 0.9; /* Slightly less prominent */
}

.play-prize-desc {
    font-family: 'Arial Narrow', Arial, sans-serif; /* Default regular narrow */
    font-size: 2.2cqw; /* Make description noticeably smaller */
    line-height: 1;
    text-transform: uppercase; /* Make it uppercase */
    color: #333; /* Darker grey color */
    opacity: 0.85;
    margin-top: 0.1cqw; /* Small space below prize */
    white-space: nowrap;
    /* border: 1px solid orange; /* DEBUG */
}

/* Ensure text doesn't wrap unexpectedly */
.number-display td, .play-number, .play-prize {
    white-space: nowrap;
}

/* --- NEW: Bonus Spot Display Styling --- */
.bonus-spots-display {
    position: absolute;
    z-index: 2; /* Below scratch layer, above base image */
    pointer-events: none; /* Don't interfere with scratching */
    color: #000; /* Default black text */
    overflow: hidden; /* Prevent content spillover */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bonus-spot {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #000; /* Default color */
    /* border: 1px solid lime; /* --- DEBUG: Uncomment to see spot boundaries */
}

.scan-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 18px;
    background-color: var(--secondary-color, #1a8829); /* Default, will be overridden by JS if ticket has color */
    color: #ffffff; /* Default, will be overridden by JS */
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Arial Narrow Bold', Arial, sans-serif;
    font-weight: bold;
    cursor: pointer;
    z-index: 10; /* Above game messages, below popups */
    display: none; /* Initially hidden by default, JS will show it */
    opacity: 0;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 3px 8px rgba(0,0,0,0.25);
    transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.5s ease-in-out;
    letter-spacing: 0.5px;
}

.scan-button:hover {
    opacity: 0.85;
}
.scan-button:active {
    transform: scale(0.96);
}

.scan-button svg {
    vertical-align: middle; /* Better alignment with text */
    margin-right: 8px;
    /* width and height are set inline on the SVG element in HTML */
    fill: currentColor; /* Icon color will match button text color */
}