Spaces:
Sleeping
Sleeping
| @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;700;800&display=swap'); | |
| :root { | |
| --parchment: #fdf6e3; | |
| --panel: #fff8f0; | |
| --ink: #2d1b4e; | |
| --rose: #e8738a; | |
| --rose-light: #f9c0cb; | |
| --gold: #f0b429; | |
| --gold-light: #fde68a; | |
| --lavender: #c3aed6; | |
| --lavender-dk: #7c5cbf; | |
| --mint: #a8d8a8; | |
| --shadow: rgba(45, 27, 78, 0.12); | |
| --shadow-lifted: rgba(45, 27, 78, 0.25); | |
| --font: 'Baloo 2', cursive; | |
| --spring: cubic-bezier(0.34, 1.56, 0.64, 1); | |
| --bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); | |
| --ease-out: cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| *, *::before, *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html, body { | |
| height: 100%; | |
| font-family: var(--font); | |
| background: var(--parchment); | |
| color: var(--ink); | |
| -webkit-font-smoothing: antialiased; | |
| touch-action: manipulation; | |
| user-select: none; | |
| -webkit-user-select: none; | |
| -webkit-tap-highlight-color: transparent; | |
| overflow: hidden; | |
| overscroll-behavior: none; | |
| overscroll-behavior-y: none; | |
| } | |
| a { text-decoration: none; color: inherit; } | |
| /* ---- Shared components ---- */ | |
| .big-button { | |
| display: inline-block; | |
| font-family: var(--font); | |
| font-size: 1.3rem; | |
| font-weight: 700; | |
| padding: 1rem 2rem; | |
| border: 3px solid var(--ink); | |
| border-radius: 2rem; | |
| background: var(--rose); | |
| color: white; | |
| cursor: pointer; | |
| transition: transform 0.15s var(--spring), box-shadow 0.15s ease; | |
| box-shadow: 0 4px 0 var(--ink); | |
| touch-action: manipulation; | |
| text-align: center; | |
| } | |
| .big-button:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); } | |
| .big-button:disabled, .big-button[disabled] { opacity: 0.4; pointer-events: none; } | |
| h1 { font-size: 2rem; font-weight: 800; color: var(--lavender-dk); } | |
| h2 { font-size: 1.5rem; font-weight: 700; color: var(--lavender-dk); } | |
| /* ---- Empty state ---- */ | |
| .empty-state { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100dvh; | |
| padding: 2rem; | |
| text-align: center; | |
| gap: 1rem; | |
| } | |
| .empty-icon { font-size: 4rem; } | |
| /* ---- Dress-up screen ---- */ | |
| .dressup-layout { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100dvh; | |
| padding: 0.5rem; | |
| padding-bottom: env(safe-area-inset-bottom, 0.5rem); | |
| gap: 0.5rem; | |
| } | |
| .canvas-wrap { | |
| flex: 1; | |
| min-height: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .princess-canvas { | |
| position: relative; | |
| background: var(--panel); | |
| border-radius: 1rem; | |
| border: 3px solid var(--lavender); | |
| overflow: hidden; | |
| /* width/height set explicitly by fitCanvas() in dressup.js */ | |
| } | |
| .placed-layer { | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| } | |
| .placed-item { | |
| pointer-events: auto; | |
| cursor: grab; | |
| } | |
| /* ---- Bounding box overlay (desktop resize) ---- */ | |
| .bbox-overlay { | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 9999; | |
| } | |
| .bbox { | |
| position: absolute; | |
| border: 2px dashed var(--gold); | |
| pointer-events: none; | |
| } | |
| .bbox-handle { | |
| position: absolute; | |
| width: 18px; | |
| height: 18px; | |
| background: var(--gold); | |
| border: 2px solid white; | |
| border-radius: 50%; | |
| pointer-events: auto; | |
| cursor: nwse-resize; | |
| z-index: 1; | |
| } | |
| .bbox-handle-br { | |
| bottom: -9px; | |
| right: -9px; | |
| } | |
| @media (hover: none) { | |
| /* No dashed outline or resize handle on touch — the action bar | |
| below the item handles sparkle/delete, and pinch handles resize. */ | |
| .bbox-overlay { display: none; } | |
| } | |
| /* ---- Selection action bar (sparkle / delete / hue strip) ---- */ | |
| .action-bar { | |
| position: absolute; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 6px 10px; | |
| border-radius: 999px; | |
| background: var(--panel); | |
| border: 2px solid var(--lavender); | |
| box-shadow: 0 4px 12px var(--shadow-lifted); | |
| pointer-events: auto; | |
| z-index: 10000; | |
| touch-action: none; | |
| } | |
| .action-bar.hidden { | |
| display: none; | |
| } | |
| .action-btn { | |
| width: 34px; | |
| height: 34px; | |
| border-radius: 50%; | |
| border: 2px solid transparent; | |
| background: transparent; | |
| font-size: 1.1rem; | |
| line-height: 1; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0; | |
| } | |
| .action-btn.is-on { | |
| border-color: var(--gold); | |
| background: rgba(255, 215, 0, 0.15); | |
| } | |
| .action-btn:active { | |
| transform: scale(0.9); | |
| } | |
| .hue-strip { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .hue-reset { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| border: 2px solid var(--lavender); | |
| background: var(--panel); | |
| font-size: 0.95rem; | |
| line-height: 1; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0; | |
| } | |
| .hue-track { | |
| width: 150px; | |
| height: 24px; | |
| border-radius: 12px; | |
| border: 2px solid var(--lavender); | |
| background: linear-gradient(to right, | |
| hsl(0, 70%, 50%), | |
| hsl(60, 70%, 50%), | |
| hsl(120, 70%, 50%), | |
| hsl(180, 70%, 50%), | |
| hsl(240, 70%, 50%), | |
| hsl(300, 70%, 50%), | |
| hsl(360, 70%, 50%)); | |
| touch-action: none; | |
| cursor: pointer; | |
| } | |
| /* ---- Sparkle effect ---- */ | |
| .sparkle-effect { | |
| filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.7)) | |
| drop-shadow(0 0 12px rgba(255, 215, 0, 0.4)); | |
| animation: sparkle-glow 1.5s ease-in-out infinite alternate; | |
| } | |
| @keyframes sparkle-glow { | |
| 0% { filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5)) drop-shadow(0 0 8px rgba(255, 215, 0, 0.3)); } | |
| 100% { filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 16px rgba(255, 215, 0, 0.5)); } | |
| } | |
| .switcher { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 1.5rem; | |
| } | |
| .switch-btn { | |
| font-family: var(--font); | |
| font-size: 1.5rem; | |
| width: 48px; | |
| height: 48px; | |
| border: 3px solid var(--ink); | |
| border-radius: 50%; | |
| background: var(--panel); | |
| color: var(--ink); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| touch-action: manipulation; | |
| box-shadow: 0 3px 0 var(--ink); | |
| } | |
| .switch-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); } | |
| .switch-btn:disabled { opacity: 0.3; pointer-events: none; } | |
| .switch-label { font-size: 1.1rem; font-weight: 700; } | |
| /* ---- Tray tabs ---- */ | |
| .tray-tabs { | |
| display: flex; | |
| justify-content: center; | |
| gap: 0.4rem; | |
| flex-shrink: 0; | |
| } | |
| .tray-tab { | |
| font-family: var(--font); | |
| font-size: 0.9rem; | |
| font-weight: 700; | |
| padding: 0.4rem 1rem; | |
| border: 2px solid var(--lavender); | |
| border-radius: 1.5rem; | |
| background: var(--panel); | |
| color: var(--lavender-dk); | |
| cursor: pointer; | |
| transition: all 0.15s var(--spring); | |
| touch-action: manipulation; | |
| } | |
| .tray-tab.active { | |
| background: var(--lavender); | |
| color: white; | |
| border-color: var(--lavender-dk); | |
| } | |
| .clothing-tray { | |
| display: flex; | |
| gap: 0.5rem; | |
| padding: 0.4rem; | |
| overflow-x: auto; | |
| scroll-snap-type: x mandatory; | |
| -webkit-overflow-scrolling: touch; | |
| flex-shrink: 0; | |
| min-height: 96px; | |
| } | |
| .tray-empty { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 100%; | |
| font-size: 1rem; | |
| color: var(--lavender-dk); | |
| text-align: center; | |
| } | |
| .tray-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.25rem; | |
| min-width: 80px; | |
| padding: 0.4rem; | |
| border: 3px solid var(--lavender); | |
| border-radius: 1rem; | |
| background: var(--panel); | |
| cursor: pointer; | |
| scroll-snap-align: start; | |
| font-family: var(--font); | |
| font-size: inherit; | |
| touch-action: manipulation; | |
| box-shadow: none; | |
| } | |
| .tray-item:active { transform: scale(0.95); } | |
| .tray-thumb { | |
| width: 48px; | |
| height: 48px; | |
| object-fit: contain; | |
| border-radius: 0.5rem; | |
| } | |
| .tray-label { | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| text-align: center; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| max-width: 80px; | |
| } | |
| .bottom-bar { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 0.75rem; | |
| padding: 0.5rem; | |
| flex-shrink: 0; | |
| } | |
| /* ---- Screenshot flash ---- */ | |
| .screenshot-flash { | |
| animation: flash 0.4s ease-out; | |
| } | |
| @keyframes flash { | |
| 0% { filter: brightness(2); } | |
| 100% { filter: brightness(1); } | |
| } | |
| /* ---- Sticker tray items ---- */ | |
| .tray-sticker .tray-thumb { | |
| background: none; | |
| } | |
| /* ---- Manage screen ---- */ | |
| #manage-screen { | |
| height: 100dvh; | |
| overflow-y: auto; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .manage-layout { | |
| padding: 1rem; | |
| padding-bottom: max(1rem, env(safe-area-inset-bottom)); | |
| } | |
| .manage-section { | |
| margin-top: 1.5rem; | |
| } | |
| .manage-heading { | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| color: var(--lavender-dk); | |
| margin-bottom: 0.75rem; | |
| } | |
| .manage-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); | |
| gap: 0.75rem; | |
| } | |
| .manage-card { | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.3rem; | |
| padding: 0.5rem; | |
| border: 3px solid var(--lavender); | |
| border-radius: 1rem; | |
| background: var(--panel); | |
| transition: transform 0.3s var(--spring), opacity 0.3s; | |
| } | |
| .manage-card.poof { | |
| animation: poof-card 0.3s ease-out forwards; | |
| } | |
| @keyframes poof-card { | |
| to { transform: scale(0); opacity: 0; } | |
| } | |
| .manage-thumb { | |
| width: 80px; | |
| height: 80px; | |
| object-fit: contain; | |
| border-radius: 0.5rem; | |
| } | |
| .drawing-thumb { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--lavender); | |
| color: white; | |
| gap: 0.15rem; | |
| } | |
| .drawing-icon { font-size: 1.5rem; } | |
| .drawing-count { font-size: 0.65rem; } | |
| .manage-name { | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| text-align: center; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| max-width: 100%; | |
| } | |
| .manage-delete { | |
| position: absolute; | |
| top: -8px; | |
| right: -8px; | |
| width: 32px; | |
| height: 32px; | |
| border: 2px solid var(--ink); | |
| border-radius: 50%; | |
| background: var(--rose); | |
| font-size: 1rem; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| touch-action: manipulation; | |
| box-shadow: 0 2px 0 var(--ink); | |
| padding: 0; | |
| } | |
| .manage-delete:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--ink); } | |
| .manage-empty { | |
| grid-column: 1 / -1; | |
| text-align: center; | |
| font-size: 1rem; | |
| color: var(--lavender-dk); | |
| padding: 1rem; | |
| } | |
| /* ---- Upload screen ---- */ | |
| .upload-screen-inner, #upload-screen { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100dvh; | |
| padding: 1rem; | |
| padding-bottom: env(safe-area-inset-bottom, 1rem); | |
| gap: 1rem; | |
| overflow-y: auto; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .upload-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .back-btn { | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| color: var(--lavender-dk); | |
| padding: 0.5rem; | |
| } | |
| .type-toggle { | |
| display: flex; | |
| gap: 0.5rem; | |
| justify-content: center; | |
| } | |
| .pill { | |
| font-family: var(--font); | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| padding: 0.7rem 1.5rem; | |
| border: 3px solid var(--ink); | |
| border-radius: 2rem; | |
| background: var(--panel); | |
| color: var(--ink); | |
| cursor: pointer; | |
| transition: all 0.2s var(--spring); | |
| box-shadow: 0 3px 0 var(--ink); | |
| touch-action: manipulation; | |
| } | |
| .pill.active { | |
| background: var(--lavender); | |
| color: white; | |
| transform: translateY(1px); | |
| box-shadow: 0 2px 0 var(--ink); | |
| } | |
| /* ---- Photo gallery (reuse previous captures) ---- */ | |
| .photo-gallery { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.4rem; | |
| } | |
| .photo-gallery-scroll { | |
| display: flex; | |
| gap: 0.5rem; | |
| overflow-x: auto; | |
| padding: 0.25rem; | |
| -webkit-overflow-scrolling: touch; | |
| scroll-snap-type: x mandatory; | |
| } | |
| .photo-gallery-item { | |
| position: relative; | |
| flex-shrink: 0; | |
| scroll-snap-align: start; | |
| cursor: pointer; | |
| } | |
| .photo-gallery-thumb { | |
| width: 80px; | |
| height: 80px; | |
| object-fit: cover; | |
| border-radius: 0.75rem; | |
| border: 3px solid var(--lavender); | |
| transition: border-color 0.15s; | |
| } | |
| .photo-gallery-item:active .photo-gallery-thumb { | |
| border-color: var(--gold); | |
| } | |
| .photo-gallery-delete { | |
| position: absolute; | |
| top: -6px; | |
| right: -6px; | |
| width: 24px; | |
| height: 24px; | |
| border: 2px solid var(--ink); | |
| border-radius: 50%; | |
| background: var(--rose); | |
| color: white; | |
| font-size: 0.9rem; | |
| font-weight: 700; | |
| line-height: 1; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0; | |
| touch-action: manipulation; | |
| } | |
| .camera-zone { position: relative; flex-shrink: 0; } | |
| .camera-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } | |
| .camera-label { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| height: 200px; | |
| border: 4px dashed var(--lavender); | |
| border-radius: 1.5rem; | |
| background: var(--panel); | |
| cursor: pointer; | |
| transition: border-color 0.2s; | |
| } | |
| .camera-label:active { border-color: var(--rose); } | |
| .camera-icon { font-size: 3rem; } | |
| .camera-text { font-size: 1.2rem; font-weight: 700; color: var(--lavender-dk); } | |
| .camera-preview-label { display: block; position: relative; cursor: pointer; } | |
| .camera-preview { | |
| width: 100%; | |
| max-height: 250px; | |
| object-fit: contain; | |
| border-radius: 1.5rem; | |
| border: 4px solid var(--mint); | |
| background: var(--panel); | |
| } | |
| .camera-retake { | |
| display: block; | |
| text-align: center; | |
| font-size: 0.9rem; | |
| color: var(--lavender-dk); | |
| margin-top: 0.3rem; | |
| } | |
| .category-picker { display: flex; flex-direction: column; gap: 0.5rem; } | |
| .picker-label { font-size: 1.1rem; font-weight: 700; text-align: center; } | |
| .category-grid { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| gap: 0.5rem; | |
| } | |
| .category-btn { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.15rem; | |
| padding: 0.5rem 0.3rem; | |
| border: 3px solid transparent; | |
| border-radius: 1rem; | |
| background: var(--panel); | |
| font-family: var(--font); | |
| cursor: pointer; | |
| transition: all 0.15s var(--spring); | |
| box-shadow: none; | |
| } | |
| .category-btn.selected { | |
| border-color: var(--gold); | |
| background: var(--gold-light); | |
| transform: scale(1.05); | |
| } | |
| .cat-emoji { font-size: 1.8rem; } | |
| .cat-label { font-size: 0.65rem; font-weight: 700; color: var(--ink); } | |
| .name-input-wrap { display: flex; flex-direction: column; gap: 0.3rem; } | |
| .name-input-wrap label { font-size: 1.1rem; font-weight: 700; } | |
| .name-input { | |
| font-family: var(--font); | |
| font-size: 1.2rem; | |
| padding: 0.8rem 1rem; | |
| border: 3px solid var(--lavender); | |
| border-radius: 1rem; | |
| background: white; | |
| color: var(--ink); | |
| outline: none; | |
| transition: border-color 0.2s; | |
| } | |
| .name-input:focus { border-color: var(--gold); } | |
| .select-area-btn { align-self: center; } | |
| .magic-btn { font-size: 1.4rem; } | |
| .upload-actions { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-top: 0.5rem; | |
| } | |
| .processing { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 2rem; | |
| } | |
| .crown-spin { font-size: 3rem; animation: crown-spin 1s linear infinite; } | |
| @keyframes crown-spin { to { transform: rotate(360deg); } } | |
| .success { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 1rem; | |
| padding: 2rem; | |
| } | |
| .success-text { font-size: 1.6rem; font-weight: 800; color: var(--mint); } | |
| .error-state { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.8rem; | |
| padding: 1rem; | |
| } | |
| .error-detail { font-size: 0.85rem; color: var(--rose); text-align: center; } | |
| /* ---- Drag ghost ---- */ | |
| .drag-ghost { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 80px; | |
| height: 80px; | |
| object-fit: contain; | |
| pointer-events: none; | |
| z-index: 9999; | |
| filter: drop-shadow(0 4px 12px var(--shadow-lifted)); | |
| transition: filter 0.15s, width 0.15s var(--spring), height 0.15s var(--spring); | |
| will-change: transform; | |
| } | |
| .drag-ghost.lifting { | |
| width: 90px; | |
| height: 90px; | |
| } | |
| .drag-ghost.snapping { | |
| filter: drop-shadow(0 0 12px var(--gold)) drop-shadow(0 4px 12px var(--shadow-lifted)); | |
| width: 95px; | |
| height: 95px; | |
| } | |
| /* ---- Snap rings ---- */ | |
| .snap-ring { | |
| position: absolute; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| border: 3px solid var(--gold); | |
| transform: translate(-50%, -50%); | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.2s, transform 0.2s var(--spring); | |
| } | |
| .snap-ring.active { | |
| opacity: 1; | |
| animation: snap-ring-pulse 0.8s ease-in-out infinite; | |
| } | |
| @keyframes snap-ring-pulse { | |
| 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } | |
| 50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; } | |
| } | |
| /* ---- Placed items ---- */ | |
| .placed-layer { | |
| touch-action: none; | |
| } | |
| .placed-item { | |
| pointer-events: auto; | |
| cursor: grab; | |
| } | |
| .placed-item.pop-in { | |
| animation: pop-in 0.35s var(--spring) both; | |
| } | |
| @keyframes pop-in { | |
| 0% { scale: 0; opacity: 0; } | |
| 100% { scale: 1; opacity: 1; } | |
| } | |
| .placed-item.poof { | |
| animation: poof 0.3s ease-out forwards; | |
| pointer-events: none; | |
| } | |
| @keyframes poof { | |
| to { scale: 0; opacity: 0; } | |
| } | |
| /* ---- Drag particle trail ---- */ | |
| .drag-spark { | |
| position: absolute; | |
| pointer-events: none; | |
| font-size: 1rem; | |
| transform: translate(-50%, -50%); | |
| opacity: 0.9; | |
| z-index: 90; | |
| animation: drag-spark 0.5s ease-out forwards; | |
| filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.7)); | |
| } | |
| @keyframes drag-spark { | |
| 0% { opacity: 0.9; transform: translate(-50%, -50%) scale(1); } | |
| 100% { opacity: 0; transform: translate(-50%, -140%) scale(0.4); } | |
| } | |
| /* ---- Sparkle burst ---- */ | |
| .sparkle-burst { | |
| position: absolute; | |
| transform: translate(-50%, -50%); | |
| pointer-events: none; | |
| z-index: 100; | |
| } | |
| .sparkle-star { | |
| position: absolute; | |
| font-size: 1.2rem; | |
| opacity: 0; | |
| } | |
| .sparkle-star:nth-child(1) { animation: sf-r 0.6s ease-out forwards; } | |
| .sparkle-star:nth-child(2) { animation: sf-dr 0.6s ease-out forwards; } | |
| .sparkle-star:nth-child(3) { animation: sf-d 0.6s ease-out forwards; } | |
| .sparkle-star:nth-child(4) { animation: sf-dl 0.6s ease-out forwards; } | |
| .sparkle-star:nth-child(5) { animation: sf-l 0.6s ease-out forwards; } | |
| .sparkle-star:nth-child(6) { animation: sf-ul 0.6s ease-out forwards; } | |
| .sparkle-star:nth-child(7) { animation: sf-u 0.6s ease-out forwards; } | |
| .sparkle-star:nth-child(8) { animation: sf-ur 0.6s ease-out forwards; } | |
| @keyframes sf-r { 0%{opacity:1;transform:translate(0,0)scale(1)}100%{opacity:0;transform:translate(35px,0)scale(.3)} } | |
| @keyframes sf-dr { 0%{opacity:1;transform:translate(0,0)scale(1)}100%{opacity:0;transform:translate(25px,25px)scale(.3)} } | |
| @keyframes sf-d { 0%{opacity:1;transform:translate(0,0)scale(1)}100%{opacity:0;transform:translate(0,35px)scale(.3)} } | |
| @keyframes sf-dl { 0%{opacity:1;transform:translate(0,0)scale(1)}100%{opacity:0;transform:translate(-25px,25px)scale(.3)} } | |
| @keyframes sf-l { 0%{opacity:1;transform:translate(0,0)scale(1)}100%{opacity:0;transform:translate(-35px,0)scale(.3)} } | |
| @keyframes sf-ul { 0%{opacity:1;transform:translate(0,0)scale(1)}100%{opacity:0;transform:translate(-25px,-25px)scale(.3)} } | |
| @keyframes sf-u { 0%{opacity:1;transform:translate(0,0)scale(1)}100%{opacity:0;transform:translate(0,-35px)scale(.3)} } | |
| @keyframes sf-ur { 0%{opacity:1;transform:translate(0,0)scale(1)}100%{opacity:0;transform:translate(25px,-25px)scale(.3)} } | |
| /* ---- Tray item: prevent text selection during drag ---- */ | |
| .tray-item { | |
| touch-action: none; | |
| } | |
| /* ---- Segmentation progress ---- */ | |
| .progress-bar { | |
| width: 80%; | |
| max-width: 250px; | |
| height: 12px; | |
| border-radius: 6px; | |
| background: var(--lavender); | |
| overflow: hidden; | |
| margin-top: 0.5rem; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| width: 0%; | |
| background: var(--gold); | |
| border-radius: 6px; | |
| transition: width 0.3s ease; | |
| } | |
| .progress-hint { | |
| font-size: 0.85rem; | |
| color: var(--lavender-dk); | |
| text-align: center; | |
| margin-top: 0.5rem; | |
| } | |
| /* ---- Segmentation preview ---- */ | |
| .seg-preview { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 1rem; | |
| padding: 0.5rem; | |
| } | |
| .seg-preview-label { | |
| font-size: 1.3rem; | |
| font-weight: 700; | |
| } | |
| .seg-comparison { | |
| display: flex; | |
| gap: 0.75rem; | |
| justify-content: center; | |
| width: 100%; | |
| } | |
| .seg-compare-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.3rem; | |
| flex: 1; | |
| max-width: 180px; | |
| font-size: 0.9rem; | |
| font-weight: 700; | |
| color: var(--lavender-dk); | |
| } | |
| .seg-compare-img { | |
| width: 100%; | |
| aspect-ratio: 3/4; | |
| object-fit: contain; | |
| border-radius: 1rem; | |
| border: 3px solid var(--lavender); | |
| background: var(--panel); | |
| } | |
| .checkerboard-bg { | |
| background-image: | |
| linear-gradient(45deg, #e0e0e0 25%, transparent 25%), | |
| linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), | |
| linear-gradient(45deg, transparent 75%, #e0e0e0 75%), | |
| linear-gradient(-45deg, transparent 75%, #e0e0e0 75%); | |
| background-size: 16px 16px; | |
| background-position: 0 0, 0 8px, 8px -8px, -8px 0px; | |
| } | |
| .seg-actions { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.6rem; | |
| width: 100%; | |
| } | |
| /* ---- Polygon selection overlay ---- */ | |
| .poly-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 1000; | |
| background: var(--parchment); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .poly-toolbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0.5rem 0.75rem; | |
| gap: 0.5rem; | |
| flex-shrink: 0; | |
| } | |
| .poly-hint { | |
| font-size: 1rem; | |
| font-weight: 700; | |
| color: var(--lavender-dk); | |
| text-align: center; | |
| flex: 1; | |
| } | |
| .poly-undo-btn, .poly-close-btn { | |
| font-size: 0.9rem; | |
| padding: 0.4rem 0.8rem; | |
| } | |
| .poly-canvas-wrap { | |
| flex: 1; | |
| min-height: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| padding: 0.5rem; | |
| overflow: hidden; | |
| } | |
| .poly-img { | |
| max-width: 100%; | |
| max-height: 100%; | |
| object-fit: contain; | |
| border-radius: 0.5rem; | |
| display: block; | |
| } | |
| .poly-canvas { | |
| position: absolute; | |
| touch-action: none; | |
| cursor: crosshair; | |
| } | |
| .poly-actions { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.75rem; | |
| padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); | |
| flex-shrink: 0; | |
| } | |
| /* ---- Segment Review Overlay ---- */ | |
| .seg-review-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 1000; | |
| background: var(--parchment); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .seg-review-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0.75rem 1rem; | |
| padding-top: max(0.75rem, env(safe-area-inset-top)); | |
| background: var(--panel); | |
| border-bottom: 2px solid var(--gold-light); | |
| flex-shrink: 0; | |
| } | |
| .seg-review-title { | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| color: var(--ink); | |
| } | |
| .seg-review-canvas-wrap { | |
| position: relative; | |
| flex: 0 0 auto; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0.5rem; | |
| max-height: 40vh; | |
| overflow: hidden; | |
| } | |
| .seg-review-img { | |
| max-width: 100%; | |
| max-height: 100%; | |
| object-fit: contain; | |
| border-radius: 0.5rem; | |
| display: block; | |
| } | |
| .seg-review-mask-canvas { | |
| position: absolute; | |
| pointer-events: auto; | |
| cursor: pointer; | |
| } | |
| .seg-review-list { | |
| flex: 1; | |
| min-height: 0; | |
| overflow-y: auto; | |
| padding: 0.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .seg-review-item { | |
| display: flex; | |
| gap: 0.75rem; | |
| padding: 0.5rem; | |
| background: var(--panel); | |
| border-radius: 1rem; | |
| border: 2px solid transparent; | |
| transition: border-color 0.2s; | |
| } | |
| .seg-review-item.selected { | |
| border-color: var(--gold); | |
| } | |
| .seg-review-thumb-wrap { | |
| position: relative; | |
| width: 60px; | |
| height: 60px; | |
| flex-shrink: 0; | |
| } | |
| .seg-review-thumb { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| border-radius: 0.5rem; | |
| } | |
| .seg-review-color-dot { | |
| position: absolute; | |
| top: -4px; | |
| right: -4px; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| border: 2px solid white; | |
| box-shadow: 0 1px 3px var(--shadow); | |
| } | |
| .seg-review-controls { | |
| flex: 1; | |
| min-width: 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.4rem; | |
| } | |
| .seg-review-assign { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.25rem; | |
| } | |
| .seg-assign-btn { | |
| font-family: var(--font); | |
| font-size: 0.75rem; | |
| padding: 0.2rem 0.5rem; | |
| border-radius: 1rem; | |
| border: 2px solid var(--lavender); | |
| background: white; | |
| color: var(--ink); | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| } | |
| .seg-assign-btn.active { | |
| background: var(--gold-light); | |
| border-color: var(--gold); | |
| font-weight: 700; | |
| } | |
| .seg-assign-btn.skip.active { | |
| background: var(--rose-light); | |
| border-color: var(--rose); | |
| } | |
| .seg-adjust-btn { | |
| align-self: flex-start; | |
| font-size: 0.75rem; | |
| padding: 0.2rem 0.6rem; | |
| } | |