* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Press Start 2P', cursive;
    background: #111;
    color: #00ff88;
    overflow: hidden;
    height: 100vh;
}

.game-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}

.score-panel {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
    background: transparent;
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    z-index: 10;
}

.score-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.score-item:first-child {
    justify-content: flex-start; /* High score on left */
}

.score-item:nth-child(2) {
    justify-content: flex-end; /* Current score on right */
}

.score-item:last-child {
    justify-content: center; /* Contact button in center */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.score-value {
    font-size: 26px !important;
    font-weight: bold;
    color: #00ff88;
    line-height: 1.2;
    font-family: 'Press Start 2P', cursive;
}

#highScore, #score {
    font-size: 26px !important;
    font-weight: bold;
    color: #00ff88;
    line-height: 1.2;
    font-family: 'Press Start 2P', cursive;
}

.contact-btn {
    background: none;
    border: none;
    padding: 0;
    color: #333333; /* HSB(0, 0, 20, 100) - solid gray when disabled */
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    height: fit-content;
}

.contact-btn:not(.disabled) {
    color: #00ff88; /* Green when enabled */
}

.contact-btn.disabled {
    /* No opacity - solid color */
}

.lock-icon {
    width: var(--grid-size, 20px);
    height: var(--grid-size, 20px);
    filter: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* #333333 gray - matches disabled contact text */
}

.contact-btn:not(.disabled) .lock-icon {
    filter: none; /* Remove all filters to show SVG's natural #75FB94 color */
    opacity: 1; /* Ensure full opacity */
}

.contact-text {
    font-size: 16px;
    transform: translateY(2px);
}

/* Contact Popup Dialog */
.contact-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.popup-content {
    background: #1a1a1a;
    border: var(--grid-size, 20px) solid #ff0032; /* Same red as flash */
    padding: 30px 40px;
    text-align: center;
    max-width: 300px;
    margin: 20px;
}

.contact-form-content {
    border-color: #00ff88 !important; /* Green border for contact form */
}

.popup-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    line-height: 1.4;
}

/* Contact Form Styles */
.contact-form-content {
    max-width: 600px !important;
    padding: 30px 40px !important;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    color: #ffffff;
    text-align: left;
}

.form-input, .form-textarea {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: 300;
    background: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
    padding: 10px;
    border-radius: 0;
    transition: border-color 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    text-transform: none;
    letter-spacing: 0.5px;
}

.form-input:focus, .form-textarea:focus {
    outline: none;
    border: 2px solid #00ff88;
}

.form-textarea {
    resize: none;
    min-height: 80px;
}

.form-buttons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.form-submit-btn {
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    background: none;
    border: none;
    color: #00ff88;
    cursor: pointer;
    transition: color 0.2s ease;
}

.form-submit-btn:hover {
    color: #00cc6a;
}

/* Game Area */
.game-area {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    height: 100%;
}

#gameCanvas {
    background: #111;
    width: 100vw;
    height: 100vh;
    display: block;
    z-index: 1;
}

/* Speed Controls */
.speed-controls {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 10;
}

/* Hide mobile contact button on desktop */
.mobile-contact-btn {
    display: none;
}

.speed-btn {
    background: none;
    border: none;
    color: #00ff88;
    font-size: 26px;
    font-weight: bold;
    font-family: 'Press Start 2P', cursive;
    cursor: pointer;
    padding: 10px;
    transition: all 0.2s ease;
}

.speed-btn:hover {
    color: #00cc6a;
    transform: scale(1.1);
}

.speed-btn:active {
    transform: scale(0.95);
}



/* Responsive Design */
@media (max-width: 768px) {
    .score-panel {
        padding: 0 15px;
        height: 50px;
    }
    
    .score-value, #highScore, #score {
        font-size: 26px !important;
    }
    
    /* Hide desktop contact button on mobile */
    .score-item:last-child {
        display: none;
    }
    
    /* Show mobile contact button */
    .mobile-contact-btn {
        display: flex !important;
        font-size: 16px;
        padding: 10px;
        align-items: center;
        justify-content: center;
        margin-top: -10px;
    }
    
    .speed-controls {
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .speed-btn {
        font-size: 26px;
    }
    
    .contact-btn {
        font-size: 16px;
    }
    
    .lock-icon {
        width: 16px;
        height: 16px;
    }
    
    .contact-text {
        font-size: 16px;
        transform: translateY(2px);
    }
}

@media (max-width: 480px) {
    .score-panel {
        padding: 0 10px;
        height: 40px;
    }
    
    .score-value, #highScore, #score {
        font-size: 26px !important;
    }
    
    /* Hide desktop contact button on mobile */
    .score-item:last-child {
        display: none;
    }
    
    /* Show mobile contact button */
    .mobile-contact-btn {
        display: flex !important;
        font-size: 16px;
        padding: 10px;
        align-items: center;
        justify-content: center;
        margin-top: -10px;
    }
    
    .speed-controls {
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .speed-btn {
        font-size: 26px;
    }
    
    .contact-btn {
        font-size: 16px;
    }
    
    .lock-icon {
        width: 14px;
        height: 14px;
    }
    
    .contact-text {
        font-size: 16px;
        transform: translateY(2px);
    }
}

/* Authentic After Dark Flying Toaster CSS */
.toaster {
    position: fixed;
    width: 64px;
    height: 64px;
    background-image: url("data:image/gif;base64,R0lGODlhAAFAAOMFAMDAwDMzAGZmM2YzAMwzAP///+7u7szMzLq6upmZmYeHh2ZmZlRUVBEREQAAAP///yH5BAEKAA8ALAAAAAAAAUAAAAT+8MlJazXY2M27/2AojmRpnmiqflnhZmssz3Rt37jUuvzh58CgcEgc7ly+Q2KZKDqf0CgUw0Mye9KsdssdUavKauHXpRQymrJ6jTOIe0my+ghj2+8n99vHbE76gH5GX2B8f4FMd4iJdotLQoQ9SzwOS3GXl4JtkUkJBZUJmKJKXJajmaWhp3GaNXpvPKZxAbS1taybsC6ySba+uFC8Pr62wE/CB8S3nTavb8LEA9LTAQ0NrALZMpGxqr2+09TW2NpA0ODhA9XXndkCQee26erj7eUp3LuX6AT9/WgGMCWgdQ+FM32z5EnzRwCgQILvbHgbpnDhPzQPAxScMTFZxQH+/hxmgojv4MQGtSxexIDJgcuRGvGJOZlSJcZLLh3AjCiDJq1wKwPifMmKIA2fAYA2zNCSaCejeaogBRlSaByX1rI2yMkKJU8vUuOg/El1aVOt1rh28rpialmWQ9FudaqErQq3VOFedSBXLR+7I84g9DE2adW9WOVqJTomAeAQX6YeTpKTr+KsjOvGPOH2ImLLl+f6aPyYRGezlHOGTqvzAOnNItxIRu1DNVqlSw++0ROwg2yxNWkfsK113oAjsUqD6Kx3eOLi85DvUv6BuVXnoKGHk17AMWwQBrxZ+xkyNV/QZVfqWn+G6YbwScYnzWt+a1aVuXXPpM5B/FiLVqn+hp5N3O33XXXxFbZQgFhlN01Q7HXHXwUJCCWfYagRp1J7+UR4UxIWVEiYgp5hdx+B3Hx4QAbWfNWBiAdcuKBQGj6YnxgqstiAi/1ZqCBIcBHXAFBo4MhUEjryGKKP5GX43FvIFbiiikr0QSGT8zk5IIQ8ABQeEwqEKaZ3SlIAo3wz1vZkXlEC1IeYY04owZn/AUnjc0PaGYmXb8KpAJke+Nckg9YQaKRQ6wl0xQsUJjhoaoUCeNCRS8C5wAIMZJrpn94F6miWhOY546F8JGApppoywClKno5IVkOQRmonqVWemqqqS7Da34oxemWnmpFWxRtGk0QIC0Zm8jqeAL/+OierehyyBGaYl1ZrLaZ/WvOisr46KaueLxBbKbXXWourtrsGtGyza4IbbUDTKlCuudk20MGUMZIXKpQiVWmqflW44eUlFOD7H6zA5hnUkf76eamfYl567r0sHbzvjP3GSy7E5E7MgcH6xvqgl1ZpLO8CHJ/s8ZJwZYOEs4UuDFcfBygA8JQMd2LlnEe6PAbMCpNcqqkpF01ttj22LMDLa+ZH6bhGc2wAyo4lLZTPCQc9cMNRS021vRsggAAVSfz8pMylhqmKzYkqWuwZFIhN9mhZs3kT1F0XvcQCHMjtRtl1o11r3kej7DDYFvj9s2t16/m02n9GnjLKhivgg7z+iFPAgNhj/13fkAR0OTOcptYM8LFbC7K54ojFLLpQRJNOuJ9M8G3B6p0vbiLor/Mxu8PyilnzAplPgPvcaloGUu9KyG5q7JYGT3mYSRC/AQMJcI7Ay8Auz2ESwUNec4Ww4Ix8Jppgrz33znrPcPiSq+2I3gnYXoH6nLOPlft6wR/787Srn/SCVyHMXS97+dPd/kL3vctVDoAAjN70pscr691uCdrDhAF2JLD+PfBPSjidKBBxQQSKTYMcbODwxsQpJojNERrb2wFNiAAUCqCDVvFf5CAoP0BM709TQ9f9MMg5G+IQfB/kIfQG+MOKFU8CDLAGEU9olWEJRV7/A6H+6Yy1G5ZcT4o05JUPrOjALLpQe2hMI9T29sQoNmCKNaxiuK64ADPuMHIIcMT0KkS8Jz7AjXAU44rmWEYWKhF4EwwetzYwljdOcZA48gEDKnfHLZaPZNeJESNp4UgTQjJgkqTk81SRRvbk8XAWaOQZ47ibUDrvjqbKYx4D8UM2+lGVj9SNUCb5ykNKcIAg7OMGbAFGBLoGlAF4GCwtFyYRus0xuqoAMTt5wkgm03A8TEINuagLC1Jgmmc8ZpeSocxDxlIBsszemxJpqvEMsxbFrCYyy7lMHv4ykXWJ5jd9AUYqnmEYSdyhJdmjogK40wLE6CcrhZJMQ0YOfNw8nQv+pMlPR/qToQHlYTo3KsBEUuugFAWnMQUGUIeaM36JpJra+hiAdybUomMrKadgWTO2ERReYLrUWFxaUSJiVH40HWiEzKcfMihjHT6VaaUOyTl1yhKRltopQpWh0J/O9KQQ7CgBl7oqWrg0TPwkIjl7aE+bioGocYiqV6caALASU6wNbSEEy1Y+XYxiYA+ohVvhCVdsgimbL9woxyiJubWGdK+c7CtZ6wnLWc7vo4bdpwKyoYCwZi+ubwKg6W6Wth/Kiy+RnQAtJiuAyr71sn7launCYNcelA8ZPxgtZS2LAMz+9Y6Wa+pTIebZBYC2pVMlrWn5itrFnpRTjoWhqX7++86clHa41RiIquSaWaEGDC6TK0xzXfLctwZgujBk7VDN155uBCKvAXAuYt/4XbJmVovayx7hiFeL7Tqgu3xtL3VvC0GOKrewoZUALSpD2eFmimqI2CEnmlNT3jrAFva9L36/y8vw1qy1Z9UgDgXmhwE7d8IH3m91faC92fkWwlMlMIgrnGAlcjS5i3hwfVNcmftCN7WBYOakhrZES8k4wOitsY1tgeNAXHg9AJEEL6p4ANGmt8alJbJ7R3yAEpv4x8ClqJCjXIsiv/d5L1buErDsUiEb2MtLDSGtjHZiFIfUzLXgpYj/Ol7yvoAJVSpzjc885UCg8XdtnvGb9xz+ZzS72KmIht6bsJzlfXo4J7aQ8/wqpAecpU121GJ0o538aJdE2tCLAkMXOxEHaQHZFjX+dJ8rVeW0Ri12gRa0o58M6UKvur/x3S2mP0sMntKa0Q9chFkXt8QIZrrXbO20L4K9iEsmeWamuJCvK7PsMQn7FLSLH6+RPetfV/vWeJRbj3F7bF/4WgCaFkAdEZxjT/SOsUSLtaw5TZB0r3vObztICFlhCpa6udvoJoa6BShsSr8CE8vcdi0s0YRE+CLgD793wYGIhl5KzreaPre9CS5sQo6PsQo3d7I1snF2B+IF5Utrg6t1oVPbAuIvl3iLi/qliVCrSjinmcNfXnL+fFOcUtmOd63/TW+SCzyZHE8wseOXVYULgOhFh3ktni5zRAiGfQ0+Wph+/PR5Rz3dSDf5m6QzxjHWHNoiCsWXQPRwsFcdEVSYWfM+Dj1Nb1rAPD/6vX2O1Zme+Old9zrep+52AeI7E0z3+4MBL/KRS50gYb+1vs9aaSQh6hJrRy/h9W54YR9cjDgFn7w8wm2Ap5vqnRdzDE31d424HsiDr7fAUQ9qneGtUq1nPOw1L/uH0/7W5DPWGH8GF4aloe2zj/ycv0BUXqyWCY03ffIvhQBQA4J2l1q86wPvAeT7/prVB36fxpT97b/+7tL/PvWtH3fhk+3gr4i90dW/gPD+75fiY3hB2aVFaX/RrMmWIH+PpxHZkEzhwWw5Rjp7M3UFyH3dl3e+R3UHaG0JpoD1w4C6h37p93IFuAATCHwtIFEvU2m88XWzJ4GGR13DhgTtZ3D/VAl8UCquEQoPUBjzx4Ed2B3K9Gp7swAEyHhdFwI2OIDuQHU6SFgpUzs+6A7mp4EVMISnl4P1g4S0k2RcNCWMMgFQeIJGOIUQswST1wPOEINKsCKWAB9NdiFEWITfNTbVNy89dCkYeH5O+ISFsYZMuDkG8IblEoc+CBEZWIcUoIZRWIB6yIfXQlZewk3tMYh3WIhPd4jzEnwYRnxpN4Nq5w01WA29B09FaIj+maJccviDTSiIT8iJN8hJnxiJoQhDo8iEGUgCKDEWj7cjn0hh2OOKdQSGJENQqYSKtbiKuOgIHUJ5VvAba8crNTiLqVgNqxh4t3IrGAiEu9cB4+EVjGaLt0gL0Zgq09iEJnCNzaiNbMiN3ZgpGMgEmPQFGMAB4hiMwmiO5yiC+TcGlWeGg0QG4piNz8iER/WD1Ph0KbCP/NSPBfiPbEiNA8mM/GiQ/wiQ5qeOACEmH0CQxGSQgacMBdJF+Qd63dFkEsCMhTGLOwKQGHmL1GiKFcmJI7kOgHeSz2h+QagCIglPLmmSMNmA4Dgn5wUCNclJN5mTq9h+icIbI/iRaRD+kuJYky95kjJpfjOQFSw5lU2JkU/JeFG5lFSJkzEZkK6XlTXJjFXpkEC4kcZoj8SXSlopH2Opk145kzQglSJJi1x5lTsZl2tJl11pl3AJllPJlnX5lhrBNiIoTq/gBoy0lGrIl3QoeDIgl+twh4yZkY4ZA5AplZAnmJRZjTSpmJKpmUfVTIx4mB6gGC9nl6UHBKY5dagZfaopF6fplamZA6uZmU+ZmjdEj/UINxWJFg/XmFAnBLAZm/8IBcPJmptZmbTpm8R5VB1gM7oZLiOAmQ+pksLZcsXJBdT5kF2wndm5HGYpOingnHhAnndgnnaAniKAf76IB+75nvC5noQjqQvtGJ/2eZ/4CZ1dhJ/82Z/vqTY4cwYK4J8EWqBrADEdEAEAOw==");
    z-index: 9999;
    pointer-events: none;
}

.toast {
    position: fixed;
    width: 64px;
    height: 64px;
    background-image: url("data:image/gif;base64,R0lGODlhQABAAKIGAP/MZsyZM5lmAGYzAMxmAP//mTMzMwAAACH5BAEAAAYALAAAAABAAEAAAAP/aLrc/jDKSau9OOvNu/9gKI5kaZ5oqq5s675wLM/0Atx1de97/hQFXgAw7PkMu6GSeCviZknmctk0voJVZWC7lfKsKSCWqBVwzVym92kCfsncLTpdpIJB4qQ2bu4H5nRTdxtuX3tnf38CfnFdVE4dY2RSe4t+l2iAdoMWklN8mH2iiY5eTmydQqZyioqWr4mapW8YWHVwpK+6urmOs18XnpSIoruLsY1rbwAWA7aryMXGx42Cp6gSBM6qjdJyltHWk8sFFQPaz5+xsMfg1ePLN+UU2uhjh6zhyMrxOwUCFQjUO3dvUjVWstL0IwJkAEB6As8RVLOnCSlEv24xCVJguYDDhxPORdQ2kWIWPoHUkOvo0SPIkPUGSjI1zJeTUxxbflyEQSJJAoWiwBnGT15DnQI+ZhDpc1sXbjTfHNW58+UFpjJVQb0GYCpSSx4EDiQZdKFRllRfhcCKtaxJeVQduuQ5QmTEpkGdTE36cScKu2OdSTqatHDVFR7FNgUqxrDcwnRdAL77ky/kyDBaih2ZlMAivz7s+jSMObRikkqPNEg8cIDqCDpfy55Nu7bt27hz697Nu7fvBwkAADs=");
    z-index: 9999;
    pointer-events: none;
}

/* Simple fallback animations for better web hosting compatibility */
.toaster-fallback {
    animation: fly-simple 20s linear infinite;
}

.toast-fallback {
    animation: fly-simple 25s linear infinite;
}

@keyframes fly-simple {
    from {
        transform: translate(100vw, -100px);
    }
    to {
        transform: translate(-100px, 100vh);
    }
}

/* Toaster Animations - varied travel speeds, flap timing unchanged */
.t1 {
    animation: flap .2s steps(4) infinite alternate, fly 18s linear infinite;
}

.t2 {
    animation: flap .2s steps(4) infinite alternate-reverse, fly 22s linear infinite;
}

.t3 {
    animation: flap .2s steps(4) infinite alternate, fly 26s linear infinite;
}

.t4 {
    animation: flap .2s steps(4) infinite alternate, fly 30s 5s linear infinite;
}

.t5 {
    animation: flap .2s steps(4) infinite alternate-reverse, fly 34s 4s linear infinite;
}

.t6 {
    animation: flap .2s steps(4) infinite alternate, fly 38s 8s linear infinite;
}

.t7 {
    animation: flap .2s steps(4) infinite alternate-reverse, fly 42s 12s linear infinite;
}

.t8 {
    animation: flap .2s steps(4) infinite alternate, fly 46s 16s linear infinite;
}

.t9 {
    animation: flap .2s steps(4) infinite alternate-reverse, fly 50s 20s linear infinite;
}

/* Toast Animations - varied travel speeds */
.tst1 {
    animation: fly 19s linear infinite;
}

.tst2 {
    animation: fly 23s linear infinite;
}

.tst3 {
    animation: fly 27s linear infinite;
}

.tst4 {
    animation: fly 31s 12s linear infinite;
}



/* Flapping animation */
@keyframes flap {
    from { background-position: 0px; }
    to { background-position: -256px; }
}

/* Gliding animation using translate - slowed down by 50% */
@keyframes fly {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(-1600px, 1600px);
    }
}

/* Starting positions of objects (both toast & toasters).
 *  - There is a different position for each object to prevent overlapping.
 *  - We use percentages in order to accommodate for all window dimensions.
 *  - Use -6% as the smallest amount for remaining off-screen.
 *  - Organized into reverse "L" shaped batches to keep a constant flow.
 */
/* Batch 1 (-10% to -20%) */
/* Top edge, from right to left */
.p6 { right: -2%; top: -17%; }
.p7 { right: 10%; top: -19%; }
.p8 { right: 20%; top: -18%; }
.p9 { right: 30%; top: -20%; }
.p10 { right: 40%; top: -21%; }
.p11 { right: 50%; top: -18%; }
.p12 { right: 60%; top: -20%; }
/* Right side, from top to bottom */
.p13 { right: -17%; top: 10%; }
.p14 { right: -19%; top: 20%; }
.p15 { right: -21%; top: 30%; }
.p16 { right: -23%; top: 50%; }
.p17 { right: -25%; top: 70%; }

/* Batch 2 (-20% to -40%) */
/* Top edge, from right to left */
.p18 { right: 0%; top: -26%; }
.p19 { right: 10%; top: -20%; }
.p20 { right: 20%; top: -36%; }
.p21 { right: 30%; top: -24%; }
.p22 { right: 40%; top: -33%; }
.p23 { right: 60%; top: -40%; }
/* Right side, from top to bottom */
.p24 { right: -26%; top: 10%; }
.p25 { right: -36%; top: 30%; }
.p26 { right: -29%; top: 50%; }

/* Batch 3 (-40% to -60%)*/
/* Top edge, from right to left */
.p27 { right: 0; top: -46%; }
.p28 { right: 10%; top: -56%; }
.p29 { right: 20%; top: -49%; }
.p30 { right: 30%; top: -60%; }
/* Right side, from top to bottom */
.p31 { right: -46%; top: 10%; }
.p32 { right: -56%; top: 20%; }
.p33 { right: -49%; top: 30%; }