/* --- Styles from Original Stripe UI --- */
html {
    height: 100%;
    overflow: hidden; /* Prevent scrolling */
}
body {
    margin: 0;
    padding: 0;
    background-color: #000; /* Dark background */
    color: #ffd700; /* Gold text */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Consistent font */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Ensure full viewport height */
    height: 100%;
    text-align: center;
    overflow: hidden; /* Prevent body scrolling */
    -webkit-text-size-adjust: 100%; /* Prevent text size adjustments on rotation */
    box-sizing: border-box;
    transition: padding-bottom 0.3s ease-out;
}
body.keypad-visible {
    padding-bottom: 300px; /* Pushes content up */
}

/* Main container for the tipping interface */
#container {
    background-color: #1a1a1a; /* Slightly lighter dark background */
    padding: 4vh 5vw; /* Adjusted padding slightly */
    border-radius: 20px; /* Rounded corners */
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.4); /* Gold glow effect */
    width: 85%; /* Use more width */
    max-width: 800px; /* Set a max width for very large screens */
    margin: auto; /* Center container */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative; /* Needed for positioning overlay elements */
    transition: margin-bottom 0.3s ease-out; /* Smooth transition if needed */
}
/* Main title */
h1 {
    font-size: calc(2.8em + 2vw); /* Responsive font size */
    margin-bottom: 3vh; /* Adjusted margin */
    margin-top: 0;
    color: #ffd700;
    line-height: 1.1;
    text-align: center;
}
/* Status message display area */
#status-message {
    margin-bottom: 3vh;
    min-height: 1.5em; /* Prevent layout shifts */
    line-height: 1.4;
    font-size: calc(1.2em + 0.5vw); /* Responsive font size */
    color: #ccc; /* Light grey for standard messages */
    white-space: pre-wrap; /* Allow line breaks */
    word-break: break-word; /* Prevent long words overflowing */
    transition: color 0.3s ease;
}
#status-message.error { color: #ff4d4d; font-weight: bold; } /* Red for errors */
#status-message.ready { color: #55dd55; font-style: italic; } /* Green for ready */

/* Connect Reader button */
#connect-reader-button {
     background-color: #555;
     color: #fff;
     border: 1px solid #888;
     font-size: 1.1em;
     padding: 12px 22px;
     border-radius: 10px;
     cursor: pointer;
     transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.3s ease, visibility 0.3s ease;
     margin-bottom: 3vh; /* Adjusted margin */
     opacity: 1;
     visibility: visible;
}
/* Style for hiding the connect button */
#connect-reader-button.hidden {
    opacity: 0;
    visibility: hidden;
    height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border: none;
}
#connect-reader-button:hover:not(.hidden) { background-color: #777; transform: scale(1.03); }
#connect-reader-button:disabled:not(.hidden) { background-color: #444; cursor: not-allowed; opacity: 0.6; }

/* General style for all tip buttons ($3, $5, $10, Custom) */
.tip-button {
    background-color: #ffd700; /* Gold background */
    color: #000; /* Black text */
    border: none;
    font-size: calc(1.8em + 1vw); /* Responsive font size */
    padding: 20px 35px;
    border-radius: 15px;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.3s ease;
    margin: 10px;
    min-width: 120px; /* Minimum button width */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4); /* Subtle shadow */
    position: relative; /* For emoji burst positioning */
    overflow: visible; /* Allow emoji burst to overflow */
    flex-grow: 1; /* Allow buttons to grow/shrink in flex container */
}
.tip-button:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 0 20px #ffd700; } /* Hover effect */
.tip-button:disabled { background-color: #a38d00; cursor: not-allowed; opacity: 0.7; box-shadow: none; transform: none; } /* Disabled state */

/* Grid layout for preset tip buttons */
.buttons-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
    gap: 20px; /* Space between buttons */
    margin-bottom: 3vh; /* Adjusted margin */
    width: 100%; /* Ensure grid uses container width */
}

/* Section for custom amount input and button */
.custom-amount-section {
    margin-bottom: 3vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    width: 100%; /* Ensure section uses container width */
}

/* Custom amount input field - READONLY */
input[type="text"]#custom-amount-input {
    font-size: calc(1.4em + 0.5vw);
    padding: 15px;
    border: 3px solid #ffd700; /* Gold border */
    border-radius: 10px;
    width: 140px; /* Fixed width */
    text-align: center;
    background: #111; /* Dark background */
    color: #ffd700; /* Gold text */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4); /* Inner shadow */
    cursor: pointer; /* Indicate it's clickable */
}
/* Style when input has focus (for visual feedback when keypad is shown) */
input[type="text"]#custom-amount-input:focus {
     outline: none; /* Remove default outline */
     border-color: #fff; /* Optional: change border color */
     box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 0 10px #ffd700; /* Add glow */
}


/* Custom tip submit button (inherits .tip-button styles) */
#custom-tip-submit-button {
    font-size: calc(1.4em + 0.5vw); /* Slightly smaller than preset buttons */
    padding: 15px 25px;
}

/* Cancel Payment button */
#cancel-payment-button {
    background-color: #dc3545; /* Red background */
    color: #fff;
    border: 1px solid #a02732; /* Darker red border */
    font-size: 1.1em;
    padding: 12px 22px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.3s ease, visibility 0.3s ease, height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
    margin-top: 20px;
    /* Start hidden */
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    border-width: 0;
    padding-top: 0;
    padding-bottom: 0;
}
/* Style for showing the cancel button */
#cancel-payment-button.visible {
    opacity: 1;
    visibility: visible;
    height: auto; /* Auto height when visible */
    padding: 12px 22px;
    border-width: 1px;
}
#cancel-payment-button:hover:not(:disabled) { background-color: #c82333; transform: scale(1.03); }
#cancel-payment-button:disabled { background-color: #a02732; cursor: not-allowed; opacity: 0.6; }

/* Emoji burst animation */
.emoji-burst {
    position: absolute;
    font-size: 2em;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* Don't interfere with clicks */
    opacity: 1;
    animation: burst 0.6s ease-out forwards;
    z-index: 5; /* Appear above button */
}
@keyframes burst {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
    100% { opacity: 0; transform: translate(var(--tx, -50%), var(--ty, -50%)) scale(1.8); } /* Uses CSS variables set by JS */
}

/* Thank You message overlay (Used for final success) */
#thank-you {
    font-size: calc(3.5em + 2vw);
    font-weight: bold;
    color: #ffd700;
    position: fixed; /* Overlay */
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0); /* Start scaled down */
    opacity: 0; /* Start hidden */
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Bouncy transition */
    z-index: 100; /* Appear above container */
    text-shadow: 0 0 15px #000; /* Shadow for readability */
    pointer-events: none;
}
#thank-you.show { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* Visible state */

/* Star animation for success */
.star {
    position: absolute;
    width: 10px; height: 10px;
    background: #ffd700;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99; /* Below thank you message */
    animation: flyUp 1.2s linear forwards;
    box-shadow: 0 0 8px #ffd700; /* Glow effect */
}
@keyframes flyUp {
    0% { opacity: 1; transform: translateY(0) scale(1.2); }
    100% { opacity: 0; transform: translateY(-300px) scale(0.6); } /* Fly up and fade */
}

/* Main tip interface container (for fade out effect) */
#tip-interface {
    transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease, display 0.3s;
    width: 100%; /* Ensure it takes up container width */
    display: flex; /* Use flex for centering content */
    flex-direction: column;
    align-items: center;
}
#tip-interface.fade-out { /* Used by triggerSuccessAnimation */
    opacity: 0.2;
    pointer-events: none;
    filter: blur(4px);
    transform: scale(0.97);
}

/* Pop-up message box (bottom right) - Less used now */
#message-box {
    position: fixed;
    bottom: 20px; right: 20px;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    color: #fff;
    opacity: 0; /* Start hidden */
    transition: opacity 0.5s ease-in-out;
    max-width: 300px;
    z-index: 110; /* Above thank you message */
    font-size: 0.9em;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
}
#message-box.bg-success { background-color: #28a745; } /* Green for success */
#message-box.bg-error { background-color: #dc3545; } /* Red for error */
#message-box.bg-info { background-color: #17a2b8; } /* Blue for info */

/* Shake animation for container on error */
 @keyframes shake {
     0%, 100% { transform: translateX(0); }
     25% { transform: translateX(-5px); }
     50% { transform: translateX(5px); }
     75% { transform: translateX(-5px); }
}
 #container.shake { animation: shake 0.5s ease-in-out; }

/* --- Styles Added for Spin Functionality --- */
/* Spin the Wheel button */
.spin-button {
    font-size: 1.6em; /* Increased font size */
    margin-top: 25px; /* Slightly reduced margin */
    padding: 18px 40px; /* Adjusted padding */
    border: none;
    border-radius: 15px;
    background: linear-gradient(45deg, #ffcc00, #ff6600); /* Orange/Gold gradient */
    color: #111;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 20px #ffd700;
    animation: pulse 2s infinite; /* Pulsing animation */
    transition: transform 0.2s ease-out;
    width: 90%; /* Allow button to use more width */
    max-width: 700px; /* Increase max width significantly */
    white-space: nowrap; /* Try to prevent wrapping */
}
.spin-button:hover:not(:disabled) {
    transform: scale(1.05); /* Grow on hover */
}
.spin-button:disabled { /* Disabled state for spin button */
     background: #888; /* Grey out */
     cursor: not-allowed;
     opacity: 0.6;
     animation: none; /* Stop pulsing */
     box-shadow: none;
}

/* Pulsing animation for spin button */
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 20px #ffd700; }
    50% { transform: scale(1.03); box-shadow: 0 0 30px #ffaa00; } /* Slightly larger scale/shadow */
    100% { transform: scale(1); box-shadow: 0 0 20px #ffd700; }
}

/* Reel display shown during spin */
.reel-display {
    position: fixed; /* Fixed position to overlay everything */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4em; /* Large font size */
    font-weight: bold;
    z-index: 1000; /* High z-index to be on top */
    background: #111; /* Match body background */
    padding: 30px 50px;
    border-radius: 20px;
    border: 4px solid #ffd700; /* Gold border */
    box-shadow: 0 0 40px #ffd700; /* Strong glow */
    text-align: center;
    color: #ffd700;
    display: none; /* Start hidden */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.reel-display.visible {
    display: block; /* Show when visible */
    opacity: 1;
}

/* Fullscreen message container (Used for spin results AND tip feedback) */
.fullscreen-message {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    display: flex;
    flex-direction: column; /* Allow multiple lines if needed */
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    z-index: 2000; /* High z-index */
    background-color: #000; /* Default background */
    padding: 20px;
    box-sizing: border-box;
    opacity: 0; /* Start hidden */
    visibility: hidden;
    /* Default transition is fade */
    transition: background-color 0.5s ease, opacity 0.3s ease-in-out, visibility 0.3s;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Match body font */
    color: #ffd700; /* Default gold color */
    pointer-events: none;
}
.fullscreen-message.visible {
    opacity: 1;
    visibility: visible;
    transition: background-color 0.5s ease, opacity 0.3s ease-in-out, visibility 0s; /* Adjust transition for fade in */
}

/* Class to trigger exit animation (Used for spin message) */
.fullscreen-message.exiting {
    animation: shrinkOut 0.5s ease-in forwards; /* Apply shrinkOut animation */
    transition: none !important;
}

/* Specific style for "AWESOME TIPPER" text */
.confetti-text-style {
    color: #00ffcc; /* Teal color */
    text-shadow: 0 0 25px #00ffcc; /* Teal glow */
    font-size: clamp(3rem, 10vw, 7rem); /* Responsive font size */
    animation: pop 0.6s ease-out forwards; /* Pop animation */
}

/* Specific style for "JUST KIDDING" text */
.laughing-text-style {
    font-size: clamp(2.5rem, 9vw, 6rem); /* Responsive font size */
    color: #ff4d4d; /* Reddish color */
    text-shadow: 0 0 15px #ff4d4d; /* Reddish glow */
}

/* Style for the third spin message */
.now-for-real-text-style {
     font-size: clamp(2.5rem, 8vw, 5.5rem); /* Large, responsive font size */
     color: #ffd700; /* Default gold color */
}

/* Style for rotating tip feedback messages */
.tip-feedback-text-style {
    font-size: clamp(2.5rem, 8vw, 6rem); /* Large, responsive font size */
    color: #ffd700; /* Default gold color */
    animation: pop 0.6s ease-out forwards;
}

/* --- NEW: Style for $0 / $4.04 fullscreen messages --- */
 .zero-tip-text-style {
     font-size: clamp(2rem, 7vw, 5rem); /* Slightly smaller */
     color: #ff9900; /* Orange warning color */
     text-shadow: 0 0 10px #ff9900;
     animation: pop 0.6s ease-out forwards;
}
 .not-found-text-style {
     font-size: clamp(2rem, 7vw, 5rem);
     color: #66ccff; /* Light blue info color */
     text-shadow: 0 0 10px #66ccff;
     animation: pop 0.6s ease-out forwards;
}

/* Style for 1337 Easter Egg */
.fullscreen-message.easter-egg-1337 {
    font-family: 'Courier New', monospace; /* Monospace font */
    color: #00ff00; /* Green text */
    align-items: flex-start; /* Align content top */
    padding-top: 20vh; /* Adjust padding */
    background-color: #000; /* Ensure black background */
}
.elite-msg {
     font-size: clamp(2rem, 8vw, 5rem); /* Responsive */
     text-shadow: 0 0 8px #00ff00;
     animation: flicker 2s linear infinite;
     text-align: center;
     margin-bottom: 20px;
     width: 90%; /* Prevent overflow */
}
.sub-msg {
     font-size: clamp(1rem, 4vw, 1.5rem); /* Responsive */
     opacity: 0.8;
     text-align: center;
}
.terminal-cursor::after {
     content: ' _';
     animation: blink 1s steps(2, start) infinite;
}
@keyframes flicker {
     0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
     20%, 22%, 24%, 55% { opacity: 0.4; }
}
@keyframes blink { to { visibility: hidden; } }
/* --- End 1337 Easter Egg --- */

/* --- NEW: Style for 420 Easter Egg --- */
.fullscreen-message.easter-egg-420 {
    /* Cloudy/Smoky background using gray gradients */
    background:
        radial-gradient(ellipse at center, rgba(180,180,180,0.4) 0%, rgba(180,180,180,0) 70%), /* Light gray center cloud */
        radial-gradient(ellipse at top left, rgba(120,120,120,0.5) 0%, rgba(120,120,120,0) 60%), /* Darker gray top-left */
        radial-gradient(ellipse at bottom right, rgba(140,140,140,0.6) 0%, rgba(140,140,140,0) 65%), /* Mid gray bottom-right */
        linear-gradient(to bottom, rgba(80,80,80,0.7) 0%, rgba(40,40,40,0.8) 100%), /* Dark base gradient */
        #222; /* Fallback background */
}
/* Specific text style for 420 message for better contrast */
.chill-text-style {
    font-size: clamp(2.5rem, 8vw, 6rem); /* Match other feedback styles */
    color: #ffffff; /* White text for contrast */
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8); /* Stronger dark shadow */
    animation: pop 0.6s ease-out forwards;
}
/* --- End 420 Easter Egg --- */


/* Pop animation for text */
@keyframes pop {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Dramatic Exit Animation (Used for spin message) */
@keyframes shrinkOut {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.1); /* Shrink down */
        opacity: 0; /* Fade out */
    }
}

/* --- Styles for Custom Keypad --- */
#custom-keypad {
    position: fixed; /* Position relative to viewport */
    bottom: 0; /* Stick to bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Fine-tune centering */
    width: 100%; /* Use full width initially */
    max-width: 400px; /* Limit max width for compactness */
    background-color: #111; /* Dark background */
    border-top: 2px solid #ffd700; /* Gold top border */
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.5); /* Top shadow */
    padding: 10px; /* Reduced padding */
    box-sizing: border-box;
    z-index: 2500; /* Above fullscreen message and overlay */
    display: none; /* Hidden by default */
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 8px; /* Reduced gap */
    border-top-left-radius: 15px; /* Match container corners */
    border-top-right-radius: 15px;
    /* Prevent selection */
    user-select: none;
    -webkit-user-select: none;
}
#custom-keypad.visible {
    display: grid; /* Use grid when visible */
}

/* Keypad Overlay Style */
#keypad-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
    z-index: 2400; /* Sit just below the keypad */
    display: none; /* Hidden by default */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
#keypad-overlay.visible {
    display: block; /* Show when active */
    opacity: 1;
}

.keypad-button {
    background-color: #333; /* Darker grey buttons */
    color: #ffd700; /* Gold text */
    border: 1px solid #555;
    font-size: 1.6em; /* Adjusted font size */
    height: 55px; /* Adjusted height */
    width: 100%; /* Fill grid cell */
    border-radius: 8px; /* Slightly less rounded */
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}
.keypad-button:active {
    background-color: #555; /* Darken on press */
    transform: scale(0.96); /* Slightly more noticeable press */
}
.keypad-button.decimal {
     /* Style for decimal */
     font-weight: bold;
}
.keypad-button.backspace {
     /* Style for backspace */
     font-size: 1.4em; /* Adjust symbol size */
}
.keypad-button.done {
    background-color: #ffd700; /* Gold background */
    color: #000; /* Black text */
    border: none;
    font-weight: bold;
    grid-column: span 3; /* Make Done button span full width */
    width: 100%; /* Fill the spanned columns */
    margin-top: 5px; /* Space above done button */
    height: 50px; /* Slightly shorter Done button */
}

/* Emoji Shower Styles */
.falling-emoji {
    position: fixed;
    z-index: 2100; /* Above fullscreen message, below keypad maybe? */
    font-size: 2em; /* Adjust size as needed */
    pointer-events: none;
    animation-name: fall-and-fade-emoji;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    top: -10vh; /* Start above screen */
    transform: rotate(0deg);
}
@keyframes fall-and-fade-emoji {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(110vh) rotate(720deg); /* Fall off screen + rotate */
    }
}

/* --- NEW: Enhanced Glitch Effect --- */
@keyframes glitch-shake { /* More intense shake */
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-8px) rotate(-1deg); }
    20% { transform: translateX(8px) rotate(1deg); }
    30% { transform: translateX(-8px) rotate(-1deg); }
    40% { transform: translateX(8px) rotate(1deg); }
    50% { transform: translateX(-8px) rotate(-1deg); }
    60% { transform: translateX(8px) rotate(1deg); }
    70% { transform: translateX(-8px) rotate(-1deg); }
    80% { transform: translateX(8px) rotate(1deg); }
    90% { transform: translateX(-8px) rotate(-1deg); }
}

body.glitch-active {
    animation: glitch-shake 0.3s linear 1; /* Quick, intense shake */
    filter: invert(1) hue-rotate(180deg); /* Flash invert/hue shift */
}
/* --- End of Added Styles --- */