@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";
:root{--bg-color:#f7b500;--window-bg:#fff1cc;--text-color:#4a2c00;--btn-face:#fc3;--btn-shadow:#b38600;--btn-highlight:#ffe066;--honey-border:#d4a017}*{box-sizing:border-box}html,body{min-height:100vh;color:var(--text-color);background-color:#f7b500;background-image:linear-gradient(30deg,#f0a500 12%,#0000 12.5% 87%,#f0a500 87.5%,#f0a500),linear-gradient(150deg,#f0a500 12%,#0000 12.5% 87%,#f0a500 87.5%,#f0a500),linear-gradient(30deg,#f0a500 12%,#0000 12.5% 87%,#f0a500 87.5%,#f0a500),linear-gradient(150deg,#f0a500 12%,#0000 12.5% 87%,#f0a500 87.5%,#f0a500),linear-gradient(60deg,#d48806 25%,#0000 25.5% 75%,#d48806 75%,#d48806),linear-gradient(60deg,#d48806 25%,#0000 25.5% 75%,#d48806 75%,#d48806);background-position:0 0,0 0,40px 70px,40px 70px,0 0,40px 70px;background-repeat:repeat,repeat,repeat,repeat,repeat,repeat;background-size:80px 140px;background-attachment:scroll,scroll,scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box,border-box,border-box;justify-content:center;align-items:center;margin:0;padding:0;font-family:"Press Start 2P",monospace,sans-serif;display:flex}.app-container{background-color:var(--window-bg);border:6px solid var(--honey-border);flex-direction:column;gap:24px;width:90%;max-width:420px;padding:32px 24px;display:flex;position:relative;box-shadow:12px 12px #4a2c004d}.app-container:before{content:"🐝";filter:drop-shadow(4px 4px #0003);font-size:40px;animation:3s ease-in-out infinite fly;position:absolute;top:-20px;right:-20px}@keyframes fly{0%,to{transform:translate(0)rotate(0)}50%{transform:translate(-10px,-10px)rotate(-10deg)}}.title{text-align:center;color:#4a2c00;border:4px solid var(--honey-border);background:#fc3;margin:0;padding:8px;font-size:14px;line-height:1.5}.description{text-align:center;margin:0;font-size:9px;font-weight:700;line-height:1.8}.file-input-wrapper{flex-direction:column;gap:16px;display:flex}.pixel-button{background-color:var(--btn-face);border:4px solid;border-top-color:var(--btn-highlight);border-left-color:var(--btn-highlight);border-bottom-color:var(--btn-shadow);border-right-color:var(--btn-shadow);cursor:pointer;text-align:center;text-transform:uppercase;color:var(--text-color);padding:16px;font-family:"Press Start 2P",monospace,sans-serif;font-size:12px;box-shadow:2px 2px #000}.pixel-button:active:not(:disabled){border-top-color:var(--btn-shadow);border-left-color:var(--btn-shadow);border-bottom-color:var(--btn-highlight);border-right-color:var(--btn-highlight);box-shadow:none;transform:translate(2px,2px)}.pixel-button:disabled{color:gray;cursor:not-allowed;box-shadow:none;transform:translate(2px,2px)}.hidden-input{display:none}.image-preview{border:4px solid var(--btn-shadow);width:100%;image-rendering:pixelated;object-fit:contain;background-color:#000;max-height:300px}.status-text{text-align:center;margin:0;font-size:10px;line-height:1.5}.status-text.error{color:#d32f2f}.status-text.success{color:#388e3c}.status-text a{color:#1976d2;text-decoration:underline}.guide-overlay{background-color:var(--bg-color);z-index:1000;background-image:linear-gradient(30deg,#f0a500 12%,#0000 12.5% 87%,#f0a500 87.5%,#f0a500),linear-gradient(150deg,#f0a500 12%,#0000 12.5% 87%,#f0a500 87.5%,#f0a500),linear-gradient(30deg,#f0a500 12%,#0000 12.5% 87%,#f0a500 87.5%,#f0a500),linear-gradient(150deg,#f0a500 12%,#0000 12.5% 87%,#f0a500 87.5%,#f0a500),linear-gradient(60deg,#d48806 25%,#0000 25.5% 75%,#d48806 75%,#d48806),linear-gradient(60deg,#d48806 25%,#0000 25.5% 75%,#d48806 75%,#d48806);background-position:0 0,0 0,40px 70px,40px 70px,0 0,40px 70px;background-size:80px 140px;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.pixel-frame{border:4px solid var(--honey-border);background:#fff;padding:8px;line-height:0;display:inline-block;box-shadow:6px 6px #0000001a}.guide-image{object-fit:contain;border:2px solid #eee;width:100%;max-width:450px;max-height:70vh}.progress-container{border:3px solid var(--btn-shadow);background-color:#eee;width:100%;height:24px;margin-top:16px;position:relative;overflow:hidden}.progress-bar{background-color:var(--btn-face);justify-content:center;align-items:center;width:0%;height:100%;transition:width .3s;display:flex}.progress-text{text-align:center;width:100%;color:var(--text-color);pointer-events:none;font-size:8px;font-weight:700;position:absolute}.success-modal{text-align:center;background:#fff8e1;max-width:450px!important}.success-image-preview{max-height:200px;margin:16px 0}.pixel-button.view-btn{color:#fff;background-color:#4caf50;border-color:#388e3c;margin-bottom:12px}.guide-content{flex-direction:column;align-items:center;animation:.4s ease-out slideIn;display:flex}@keyframes slideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.success-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1500;background-color:#000000b3;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.success-modal{animation:.5s cubic-bezier(.175,.885,.32,1.275) popIn}@keyframes popIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.pixel-divider{background-color:var(--honey-border);height:4px;margin:8px 0}.pixel-button.secondary{color:#666;background-color:#fff;border-color:gray;margin-top:8px;font-size:10px}.gallery-container{flex-direction:column;align-items:center;gap:20px;width:90%;max-width:600px;display:flex}.viewer-frame{border:8px solid var(--honey-border);background:#fff;justify-content:center;align-items:center;width:100%;padding:12px;display:flex;position:relative;box-shadow:15px 15px #0000001a}.viewer-image{object-fit:contain;max-width:100%;max-height:70vh}.nav-buttons{justify-content:space-between;gap:16px;width:100%;display:flex}.back-link{color:var(--text-color);background:var(--btn-face);border:4px solid var(--btn-shadow);margin-bottom:16px;padding:8px 12px;font-size:10px;text-decoration:none;display:inline-block}.image-counter{color:var(--text-color);border:2px solid var(--honey-border);background:#fff;padding:4px 8px;font-size:10px}.guide-button{width:80%;max-width:300px;margin-top:48px}.global-footer{text-align:center;width:100%;color:var(--text-color);opacity:.7;pointer-events:none;text-transform:uppercase;letter-spacing:1px;z-index:2000;font-size:8px;position:fixed;bottom:12px}