* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f7ffe4; color: #161616; user-select: none; }
.screen { min-height: 100vh; width: 100vw; display: flex; align-items: center; flex-direction: column; position: absolute; top: 0; left: 0; justify-content: center; padding: 20px; }
.hidden { display: none !important; }

/* Components */
.welcome-card, .mode-card { background: #ffffff; border: 1px solid rgba(0,0,0,0.1); border-radius: 12px; padding: 48px; max-width: 600px; width: 100%; text-align: center; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); }
.welcome-card h1, .mode-card h1 { font-size: 2.5rem; font-weight: bold; margin-bottom: 16px; }
.welcome-card p { font-size: 1.2rem; margin-bottom: 24px; }
.spinner { width: 50px; height: 50px; border: 5px solid #ccc; border-top-color: #7aa951; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.mode-buttons { display: flex; flex-direction: column; gap: 24px; }
.mode-btn { width: 100%; height: 80px; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; font-size: 1.25rem; font-weight: 600; color: white; }
.mode-btn.primary { background: #7aa951; }
.mode-btn.secondary { background: #8fa17f; }
.btn-title { font-size: 1.25rem; margin-bottom: 4px; }
.btn-subtitle { font-size: 0.875rem; opacity: 0.9; }

/* Color Selection */
.color-selection-container { max-width: 1200px; width: 100%; text-align: center; }
.color-selection-container h2 { font-size: 2rem; margin-bottom: 48px; }
.color-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.color-option { border-radius: 12px; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.color-option[data-color="black"] { background-color: #161616; color: #ffffff; border: 2px solid #161616; }
img.frame-preview.black { box-shadow: 0 4px 15px #ffffff;}
.color-option[data-color="pink"] { background-color: #FFD5DF; }
.color-option[data-color="yellow"] { background-color: #fff7c5; }
.color-option[data-color="blue"] { background-color: #d5f7ff; }
.frame-preview { width: 150px; height: auto; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.color-info { width: 100%; text-align: center; }
.color-info h3 { font-size: 1.5rem; margin-bottom: 16px; }
.select-btn { width: 100%; height: 70px; border: none; border-radius: 8px; font-size: 1.25rem; font-weight: bold; cursor: pointer; background-color: #ffffff;}

/* Shooting Screen */
.shooting-container { position: relative; width: 1100px; aspect-ratio: 42.6156 / 28.9631; background: #000; }
#shootingVideo { width: 100%; height: 100%; object-fit: cover; }
.shooting-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; text-shadow: 0 0 15px black; transition: background 0.2s; }
.shooting-overlay.flash { background: rgba(255,255,255,0.9); }
#progress-container { position: absolute; top: 20px; left: 30px; width: 300px; background-color: rgba(255,255,255,0.3); border-radius: 10px; padding: 5px; z-index: 20; }
#photoCounter { font-size: 1.5rem; font-weight: bold; text-align: center; color: white; }
#progress-bar { height: 10px; background-color: #7aa951; border-radius: 5px; width: 0%; transition: width 0.5s; }
#countdown { font-size: 12rem; font-weight: bold; z-index: 10; }
#cat-overlay-container { position: absolute; width:110%; height:100%; pointer-events: none; display: flex; z-index: 5; }
#catOverlayImage { position: relative; object-fit: contain; }
.overlay-position-zeta { align-items: flex-end; justify-content: flex-end; }
.overlay-position-zeta #catOverlayImage { width: 100%; margin: 0 4.5% -0.1% 0; }
.overlay-position-oreo { align-items: flex-end; justify-content: flex-start; }
.overlay-position-oreo #catOverlayImage { width: 90%; margin: 0 0 -0.1% 5%; }
.overlay-position-siru { align-items: flex-end; justify-content: flex-end; }
.overlay-position-siru #catOverlayImage { width: 100%; margin: 0 4.5% -0.1% 0; }
.overlay-position-three { align-items: flex-end; justify-content: center; }
.overlay-position-three #catOverlayImage { width: 91%; margin: 0 0 -5.5% 0;}

/* Editing Screen */
#editingScreen { overflow: hidden; }
.edit-main-container { display: flex; align-items: stretch; height: 100%; max-height: 95vh; padding: 2vh 2vw; gap: 2vw; }
.edit-area { flex: 1; display: flex; flex-direction: column; gap: 1vh; min-height: 0; height: 750px; }
.photo-selection-zone { background: rgba(255,255,255,0.5); padding: 10px; border-radius: 8px; flex: 1; display: flex; flex-direction: column; min-height: 0; width: 490px; }
.photo-selection-zone p { font-weight: bold; margin-bottom: 5px; flex-shrink: 0; }
.source-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.source-photos img { width: 100%; object-fit: cover; border-radius: 8px; cursor: pointer; border: 5px solid transparent; transition: border 0.2s; }
.source-photos img:hover:not(.selected) { border-color: #a0c47c; }
.source-photos img.selected { border-color: #7aa951; }
.source-photos img:hover { border-color: #7aa951; }

.frame-area { width: 115%; display: flex; justify-content: center; gap: 15px; flex-direction: row; align-items: center; padding-top: 30px; }
.frame-container { position: relative; margin-inline: 70px; }
#frameImage { width: 100%; display: block; }
.drop-zone { position: absolute; display: flex; justify-content: center; align-items: center; transition: background 0.2s; overflow: hidden; font-size: 2rem; color: #aaa; font-weight: bold; left: 9.4%; width: 81%; aspect-ratio: 42.6156 / 28.9631; }
.drop-zone.has-photo { border: 2px solid #7aa951; background: transparent; }
.drop-zone:nth-of-type(1) { top: 3%; }
.drop-zone:nth-of-type(2) { top: 24%; }
.drop-zone:nth-of-type(3) { top: 44.9%; }
.drop-zone:nth-of-type(4) { top: 66%; }
.drop-zone img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.edit-controls { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.quantity-control { background: #f7ffe4; border-radius: 8px; padding: 10px; padding-inline: 40pax; text-align: center; }
.quantity-control label { font-weight: bold; display: block; margin-bottom: 8px; }
.quantity-selector { display: flex; align-items: center; justify-content: center; gap: 15px; }
.quantity-btn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #7aa951; background: white; font-size: 1.5rem; font-weight: bold; color: #7aa951; cursor: pointer; }
#quantityDisplay { font-size: 1.5rem; font-weight: bold; }

/* Retake Screen */
.retake-container { background: #f7ffe4; padding: 30px; border-radius: 12px; width: 90%; max-width: 1200px; text-align: center; }
.retake-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin: 20px 0; }
.retake-photo { position: relative; cursor: pointer; }
.retake-photo img { width: 100%; border-radius: 8px; transition: transform 0.2s; }
.retake-photo span { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.7); color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; font-weight: bold; }
.retake-photo.selected img { transform: scale(0.9); border: 4px solid #7aa951; }
.retake-controls { display: flex; justify-content: center; gap: 20px; }
#confirmRetakeBtn:disabled { background-color: #ccc; cursor: not-allowed; }

/* Modal */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-content { background: white; border-radius: 12px; max-width: 500px; width: 90%; padding: 24px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); text-align: center; }
.modal-header { display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { font-size: 1.8rem; margin-bottom: 16px; }
.modal-close-btn { background: none; border: none; font-size: 2rem; cursor: pointer; color: #888; }
.modal-body { font-size: 1.1rem; line-height: 1.6; }
.modal-downloads { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.download-link { padding: 10px 15px; border-radius: 8px; background-color: #8fa17f; color: white; text-decoration: none; font-weight: bold; }
.download-link.primary { background-color: #7aa951; }