html,body{margin:0;padding:0;height:100%}body{font-family:sans-serif;background:linear-gradient(180deg,#8457dbfa,#6135bcfa) fixed;min-height:100vh}.qr-code-container{background-color:#c6dd94;border:.3vmin solid rgba(87,114,65,.51);border-radius:1vmin;display:flex;align-items:center;justify-content:center;overflow:hidden;width:96px;height:96px;flex-shrink:0;padding:2px;box-sizing:border-box}.qr-code-container>div{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.qr-code-container canvas,.qr-code-container svg{display:block;width:100%!important;height:100%!important;object-fit:contain}.bingo-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;width:100%;min-height:100vh;box-sizing:border-box}@media(orientation:landscape){.bingo-container{display:grid;grid-auto-flow:column;align-content:center;justify-content:center;align-items:start;gap:30px;padding:20px}}.bingo-card{max-width:800px;width:min(90vmin,60vh);background:#a1c84f;border:.5vmin solid rgba(219,255,190,.42);padding:clamp(10px,1.5vmin,15px);border-radius:clamp(8px,2vmin,12px);display:flex;flex-direction:column;gap:clamp(10px,1.5vmin,15px);overflow:hidden;flex-shrink:0}@media(orientation:landscape)and (max-height:1000px){.bingo-card{width:min(100vmin,68vh);max-height:95vh}}.bingo-header{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(5px,1vmin,10px);width:100%;border-bottom:.4vmin solid rgba(37,37,37,.29)}.bingo-header span{display:flex;align-items:center;justify-content:center;font-size:clamp(1.5rem,6vmin,3.5rem);font-weight:900;text-transform:uppercase;font-family:Arial Black,Impact,sans-serif;-webkit-text-stroke:clamp(4px,1.5vmin,10px) #fff;paint-order:stroke fill;letter-spacing:-.1vmin}.bingo-header span:nth-child(1){transform:rotate(-25deg);color:#5eb95d}.bingo-header span:nth-child(2){transform:rotate(6deg);color:#d2c13a}.bingo-header span:nth-child(3){transform:scale(1.1);color:#ca2650}.bingo-header span:nth-child(4){transform:rotate(15deg);color:#0bb0e6}.bingo-header span:nth-child(5){transform:rotate(-12deg);color:#7b7edd}.bingo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(5px,1vmin,10px);width:100%}.bingo-cell{aspect-ratio:1/1;border:.3vmin solid #333;display:flex;align-items:center;justify-content:center;text-align:center;padding:clamp(4px,.8vmin,1vmin);background-color:#fff;font-weight:700;border-radius:2vmin;overflow:hidden;line-height:1;transition:transform .2s ease}.bingo-cell.free-space{background-color:transparent;border-color:transparent;color:transparent;box-shadow:none;transform:rotate(-5deg)}.bingo-cell.free-space .free-space-img{width:100%;height:100%;object-fit:contain}.bingo-footer{margin-top:5px;display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:#25252599;font-weight:700;border-top:1px solid rgba(37,37,37,.1);padding-top:5px}.bingo-footer code{color:#333;background:#fff6;padding:2px 6px;border-radius:4px;font-family:monospace}.footer-left{display:flex;align-items:center;gap:8px}.footer-left .copy-button{background:#fff6;border:none;border-radius:4px;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#333;transition:background .2s;position:relative;line-height:0}.footer-left .copy-button:hover{background:#ffffffb3}.footer-left .copy-button:active{transform:scale(.95)}.footer-left .copied-toast{position:absolute;top:-35px;left:50%;transform:translate(-50%);color:#ffffffb3;padding:4px 8px;border-radius:4px;font-size:.7rem;animation:fadeInOut 2s ease-in-out forwards;white-space:nowrap;pointer-events:none}.footer-right{display:flex;visibility:hidden;height:0;width:0;overflow:hidden;align-items:center;position:absolute;left:-9999px;flex-shrink:0}.actions{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}@media(orientation:landscape){.actions{flex-direction:column;margin-top:0;gap:15px}}.download-button-main,.generate-button{padding:10px 16px;font-size:.9rem;font-weight:700;color:#fff;border:none;border-radius:8px;cursor:pointer;box-shadow:0 4px 6px #0000001a;transition:background-color .2s ease,transform .1s ease}.download-button-main:active,.generate-button:active{transform:translateY(2px);box-shadow:0 2px 4px #0000001a}.download-button-main:disabled,.generate-button:disabled{background-color:#ccc;cursor:not-allowed}.download-button-main{background-color:#0a7ab1e6}.download-button-main:hover{background-color:#1b73e8}.download-modal{text-align:left}.download-modal h3,.download-modal p{text-align:center}.download-options{margin:20px 0;display:flex;flex-direction:column;gap:20px}.options-section{display:flex;flex-direction:column;gap:12px;padding:15px;background:#f9f9f9;border-radius:8px;border:1px solid #eee;text-align:left}.options-section h4{margin:0 0 5px;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px;color:#666;border-bottom:1px solid #eee;padding-bottom:5px}.option-field{display:flex;flex-direction:column;gap:8px}.option-field label{font-weight:700;color:#333}.modal-select{padding:10px;border-radius:6px;border:1px solid #ccc;font-size:1rem;background-color:#fff}.ink-saver-checkbox,.auto-load-checkbox{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;cursor:pointer}.ink-saver-checkbox input,.auto-load-checkbox input{width:20px;height:20px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}.cancel-modal,.confirm-download{padding:10px 20px;border-radius:6px;font-weight:700;cursor:pointer;border:none}.cancel-modal{background:#eee;color:#333}.cancel-modal:hover{background:#ddd}.confirm-download{background:#450ab1;color:#fff}.confirm-download:hover{background:#36088d}.confirm-download:disabled{background:#ccc;cursor:not-allowed}.generate-button{background-color:#ca2650;min-width:140px}.generate-button:hover{background-color:#ca2650d6}h1{text-align:center;margin:5px 0 10px;font-size:1.2rem}@media(min-width:800px){.actions{margin-top:20px;gap:10px;flex-wrap:nowrap}}@media(min-width:800px)and (orientation:landscape){.actions{margin-top:0;gap:15px}}@media(min-width:800px){.download-button-main,.generate-button{padding:12px 24px;font-size:1rem;min-width:180px}h1{font-size:1.5rem;margin:10px 0}.bingo-card{border-width:3px}.bingo-header{border-bottom-width:3px}.bingo-header span{letter-spacing:-1px}.bingo-footer{margin-top:10px;padding-top:10px;font-size:1rem}.footer-right{visibility:visible;height:96px;width:96px;position:static;display:flex}.bingo-cell{border:2px solid #333;border-radius:15px;box-shadow:2px 2px 5px #0000001a;overflow:hidden}.bingo-cell.free-space{background-color:transparent;border-color:transparent;color:transparent;box-shadow:none}.qr-code-container{border:2px solid rgba(87,114,65,.51)}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;box-sizing:border-box}.modal-content{background:#fff;padding:25px;border-radius:12px;max-width:500px;width:100%;text-align:center;position:relative;box-shadow:0 10px 25px #0003}.modal-content h3{margin-top:0;color:#450ab1;font-size:1.5rem}.modal-content p{font-size:1.1rem;line-height:1.5;color:#333;margin-bottom:20px}.code-display{background:#f4f4f4;padding:15px;border-radius:8px;border:2px dashed #ccc;font-family:monospace;font-size:1.4rem;font-weight:700;margin:20px 0;cursor:pointer;transition:background .2s ease;display:flex;align-items:center;justify-content:center;gap:10px}.code-display:hover{background:#e9e9e9}.close-modal{margin-top:10px;padding:10px 20px;background:#450ab1;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:700}.close-modal:hover{background:#36088d}.loading-container,.error-container{display:flex;align-items:center;justify-content:center;min-height:80vh;width:100%}.loading-card,.error-card{color:#fff;font-size:1.8rem;font-weight:900;text-align:center;max-width:90%;text-shadow:0 2px 10px rgba(0,0,0,.3)}.loading-card{animation:pulse 2s infinite ease-in-out}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%,5px)}15%{opacity:1;transform:translate(-50%)}85%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-5px)}}
