/**

 * @author      Mike Fairbrother <mike@fairbrother.me>

 * @copyright   2024-2026 Mike Fairbrother. All rights reserved.

 * @license     PROPRIETARY - No rights to copy, modify, distribute, or reuse

 *              any part of this code without explicit written permission from the author.

 */

/**


 * Aimee's Salon - Styles


 * Image-based dress-up game with collapsible tray


 */





:root {


    --salon-pink: #ff7eb3;


    --salon-purple: #b388ff;


    --salon-gold: #ffd93d;


    --salon-glow: rgba(255, 126, 179, 0.4);


    --tray-collapsed: 130px;


    --tray-expanded: 60vh;


    --header-height: 50px;


    --color-shift: 0deg;


}





/* ---- Menu Screen ---- */


.game-logo {


    display: flex;


    justify-content: center;


    gap: 8px;


    margin-bottom: 12px;


}


.logo-emoji {


    font-size: 48px;


    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));


}


.bounce-1 { animation: bounce 1.5s ease-in-out infinite; }


.bounce-2 { animation: bounce 1.5s ease-in-out infinite 0.2s; }


.bounce-3 { animation: bounce 1.5s ease-in-out infinite 0.4s; }





@keyframes bounce {


    0%, 100% { transform: translateY(0); }


    50% { transform: translateY(-8px); }


}





.game-title {


    font-size: 42px;


    font-weight: 800;


    line-height: 1.1;


    background: linear-gradient(135deg, #ff7eb3 0%, #b388ff 50%, #7fffd4 100%);


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


    background-clip: text;


    margin-bottom: 8px;


    text-align: center;


}





.game-subtitle {


    font-size: 16px;


    color: rgba(255, 255, 255, 0.6);


    margin-bottom: 24px;


}





.menu-level {


    display: flex;


    align-items: center;


    justify-content: center;


    gap: 8px;


    margin-bottom: 8px;


}


.level-icon { font-size: 24px; }


.level-name { font-size: 16px; font-weight: 700; color: var(--salon-gold); }





.menu-xp {


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: 6px;


    margin-bottom: 24px;


    width: 200px;


}


.xp-bar {


    width: 100%;


    height: 8px;


    background: rgba(255, 255, 255, 0.1);


    border-radius: 4px;


    overflow: hidden;


}


.xp-fill {


    height: 100%;


    background: linear-gradient(90deg, var(--salon-pink), var(--salon-purple));


    border-radius: 4px;


    transition: width 0.4s ease;


}


.xp-text { font-size: 12px; color: rgba(255, 255, 255, 0.5); }





.settings-row {


    display: flex;


    justify-content: center;


    gap: 12px;


    margin-top: 20px;


}





/* ---- Game Screen ---- */


#screen-game {


    display: flex;


    flex-direction: column;


    overflow: hidden;


}





.game-header {


    display: flex;


    align-items: center;


    justify-content: space-between;


    padding: 8px 12px;


    min-height: var(--header-height);


    flex-shrink: 0;


    z-index: 20;


}


.header-center {


    display: flex;


    align-items: center;


    gap: 6px;


    font-size: 14px;


    font-weight: 700;


    color: var(--salon-gold);


}


.xp-badge { font-size: 18px; }


.header-actions { display: flex; gap: 8px; }


.header-title { font-size: 18px; font-weight: 700; color: #fff; }





/* ---- Character Stage ---- */


.character-stage {


    flex: 1;


    position: relative;


    display: flex;


    align-items: center;


    justify-content: center;


    overflow: hidden;


    min-height: 0;


    background: radial-gradient(ellipse at center 70%, rgba(255, 126, 179, 0.1) 0%, transparent 60%);


}





.stage-background {


    position: absolute;


    inset: 0;


    background: linear-gradient(180deg, transparent 0%, rgba(255, 126, 179, 0.05) 100%);


}





/* Character Layers - stacked images */


.character-layers {


    position: relative;


    width: 100%;


    height: 100%;


    max-width: 400px;


    display: flex;


    align-items: center;


    justify-content: center;


}





.char-layer {


    position: absolute;


    width: 100%;


    height: 100%;


    object-fit: contain;


    pointer-events: none;


    opacity: 0;


    transition: opacity 0.2s ease;


}


.char-layer.visible {


    opacity: 1;


}





/* Color shifting for clothing layers */


.char-layer.color-shifted {


    filter: hue-rotate(var(--hue-shift, 0deg)) saturate(var(--saturation, 1));


}





/* Color Controls - moved to left side below layer controls */


.color-controls {


    position: absolute;


    left: 10px;


    top: calc(50% + 100px);


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: 6px;


    background: rgba(0, 0, 0, 0.5);


    backdrop-filter: blur(8px);


    padding: 8px;


    border-radius: 12px;


    z-index: 15;


}


.color-label {


    font-size: 11px;


    color: rgba(255, 255, 255, 0.7);


}


.color-slider {


    width: 80px;


    height: 8px;


    -webkit-appearance: none;


    background: linear-gradient(to right,


        hsl(0, 80%, 60%),


        hsl(60, 80%, 60%),


        hsl(120, 80%, 60%),


        hsl(180, 80%, 60%),


        hsl(240, 80%, 60%),


        hsl(300, 80%, 60%),


        hsl(360, 80%, 60%));


    border-radius: 4px;


    outline: none;


}


.color-slider::-webkit-slider-thumb {


    -webkit-appearance: none;


    width: 16px;


    height: 16px;


    background: #fff;


    border-radius: 50%;


    cursor: pointer;


    box-shadow: 0 2px 4px rgba(0,0,0,0.3);


}


.color-reset {


    padding: 4px 8px;


    background: rgba(255,255,255,0.15);


    border: none;


    border-radius: 10px;


    color: #fff;


    font-size: 10px;


    cursor: pointer;


}





/* Quick Actions */


.quick-actions {


    position: absolute;


    right: 10px;


    top: 50%;


    transform: translateY(-50%);


    display: flex;


    flex-direction: column;


    gap: 10px;


    z-index: 15;


}


.quick-btn {


    width: 44px;


    height: 44px;


    border-radius: 50%;


    border: none;


    background: rgba(255, 255, 255, 0.12);


    backdrop-filter: blur(8px);


    font-size: 20px;


    cursor: pointer;


    transition: transform 0.15s, background 0.15s;


}


.quick-btn:active {


    transform: scale(0.9);


    background: rgba(255, 255, 255, 0.2);


}





/* Layer Controls */


.layer-controls {


    position: absolute;


    left: 10px;


    top: 50%;


    transform: translateY(-50%);


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: 4px;


    background: rgba(0, 0, 0, 0.4);


    backdrop-filter: blur(8px);


    padding: 8px;


    border-radius: 12px;


    z-index: 15;


}


.layer-label {


    font-size: 10px;


    color: rgba(255, 255, 255, 0.5);


    text-transform: uppercase;


}


.layer-selected {


    font-size: 11px;


    color: var(--salon-gold);


    font-weight: 600;


    max-width: 60px;


    text-align: center;


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


    text-transform: capitalize;


    cursor: pointer;


}


.layer-selected:hover {


    text-decoration: underline;


}


.layer-btns {


    display: flex;


    flex-direction: column;


    gap: 4px;


}


.layer-btn {


    width: 36px;


    height: 28px;


    border: none;


    border-radius: 6px;


    background: rgba(255, 255, 255, 0.1);


    color: #fff;


    font-size: 12px;


    cursor: pointer;


    transition: all 0.15s;


}


.layer-btn:active {


    transform: scale(0.9);


    background: rgba(255, 255, 255, 0.2);


}


.layer-btn.layer-reset {


    margin-top: 4px;


    font-size: 14px;


}





/* Sparkles */


.sparkle-container {


    position: absolute;


    inset: 0;


    pointer-events: none;


    z-index: 10;


}


.sparkle {


    position: absolute;


    font-size: 24px;


    animation: sparkle-float 1.2s ease-out forwards;


}


@keyframes sparkle-float {


    0% { transform: scale(0); opacity: 0; }


    20% { transform: scale(1); opacity: 1; }


    100% { transform: translateY(-50px) scale(0.5); opacity: 0; }


}





/* ---- Bottom Tray ---- */


.bottom-tray {


    position: absolute;


    bottom: 0;


    left: 0;


    right: 0;


    height: var(--tray-collapsed);


    background: linear-gradient(180deg, rgba(30, 22, 64, 0.98) 0%, rgba(15, 12, 41, 0.99) 100%);


    border-top-left-radius: 20px;


    border-top-right-radius: 20px;


    border-top: 1px solid rgba(255, 255, 255, 0.1);


    z-index: 50;


    transition: height 0.3s ease;


    display: flex;


    flex-direction: column;


    overflow: hidden;


}


.bottom-tray.expanded {


    height: var(--tray-expanded);


}





.tray-handle {


    display: flex;


    justify-content: center;


    align-items: center;


    padding: 8px 0 4px;


    cursor: grab;


    flex-shrink: 0;


    position: relative;


}


.tray-handle:active { cursor: grabbing; }


.handle-bar {


    width: 36px;


    height: 4px;


    background: rgba(255, 255, 255, 0.3);


    border-radius: 2px;


}


.tray-minimize {


    position: absolute;


    right: 12px;


    top: 50%;


    transform: translateY(-50%);


    width: 28px;


    height: 28px;


    border: none;


    border-radius: 50%;


    background: rgba(255, 255, 255, 0.1);


    color: rgba(255, 255, 255, 0.6);


    font-size: 14px;


    cursor: pointer;


    display: flex;


    align-items: center;


    justify-content: center;


    transition: all 0.15s;


}


.tray-minimize:hover {


    background: rgba(255, 255, 255, 0.2);


    color: #fff;


}





/* Tray Tabs */


.tray-tabs {


    display: flex;


    gap: 4px;


    padding: 4px 8px 8px;


    overflow-x: scroll;


    overflow-y: hidden;


    flex-shrink: 0;


    -webkit-overflow-scrolling: touch;


    scrollbar-width: thin;


    scrollbar-color: rgba(255,255,255,0.3) transparent;


    scroll-behavior: smooth;


    touch-action: pan-x;


}


.tray-tabs::-webkit-scrollbar {


    height: 4px;


}


.tray-tabs::-webkit-scrollbar-thumb {


    background: rgba(255,255,255,0.3);


    border-radius: 2px;


}


.tray-tabs::-webkit-scrollbar-track {


    background: transparent;


}





.tray-tab {


    flex-shrink: 0;


    padding: 6px 10px;


    background: transparent;


    border: none;


    border-radius: 8px;


    color: rgba(255, 255, 255, 0.5);


    font-size: 11px;


    font-weight: 600;


    cursor: pointer;


    transition: all 0.15s;


    font-family: var(--gp-font-stack);


    white-space: nowrap;


}


.tray-tab.active {


    background: rgba(255, 126, 179, 0.2);


    color: #fff;


}





/* Tray Content */


.tray-content {


    flex: 1;


    overflow: hidden;


    position: relative;


}





.tray-panel {


    position: absolute;


    inset: 0;


    display: none;


    flex-direction: column;


    padding: 8px 10px;


    overflow-y: auto;


    -webkit-overflow-scrolling: touch;


}


.tray-panel.active {


    display: flex;


}





.subsection-title {


    font-size: 10px;


    font-weight: 700;


    color: rgba(255, 255, 255, 0.4);


    text-transform: uppercase;


    letter-spacing: 0.5px;


    margin: 12px 0 6px;


}


.subsection-title:first-child {


    margin-top: 0;


}





/* Item Grid */


.item-grid {


    display: grid;


    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));


    gap: 8px;


}





.item-btn {


    aspect-ratio: 1;


    background: rgba(255, 255, 255, 0.08);


    border: 2px solid transparent;


    border-radius: 12px;


    cursor: pointer;


    transition: all 0.15s;


    overflow: hidden;


    padding: 0;


    position: relative;


    min-height: 75px;


}





/* Checkered background for face items so faint items are visible */


.item-btn[data-category="face"],


.item-btn[data-category="bodyDecor"],


.item-btn[data-category="eyes"],


.item-btn[data-category="pupils"],


.item-btn[data-category="eyebrows"],


.item-btn[data-category="eyelashes"],


.item-btn[data-category="nose"],


.item-btn[data-category="mouth"] {


    background:


        linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%),


        linear-gradient(-45deg, rgba(255,255,255,0.05) 25%, transparent 25%),


        linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.05) 75%),


        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.05) 75%),


        rgba(255, 255, 255, 0.08);


    background-size: 10px 10px;


    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;


}


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


.item-btn.selected {


    border-color: var(--salon-pink);


    background: rgba(255, 126, 179, 0.2);


    box-shadow: 0 0 10px var(--salon-glow);


}


.item-btn.locked {


    opacity: 0.4;


    cursor: not-allowed;


}





.item-btn img {


    width: 100%;


    height: 100%;


    object-fit: contain;


    object-position: center top;


}





/* Base body - show full figure */


.item-btn[data-category="baseBody"] img {


    transform: scale(1.1);


    transform-origin: center 35%;


}





/* Dress - show the main part */


.item-btn[data-category="dress"] img {


    transform: scale(2.2);


    transform-origin: center 45%;


}





/* Tops - zoom to chest area */


.item-btn[data-category="top"] img {


    transform: scale(4);


    transform-origin: center 28%;


}





.item-btn[data-category="jacket"] img {


    transform: scale(3);


    transform-origin: center 30%;


}





/* Bottom - zoom to waist/hip area */


.item-btn[data-category="bottom"] img {


    transform: scale(2.5);


    transform-origin: center 50%;


}





/* Hair - zoom to top of head */


.item-btn[data-category="hairBangs"] img {


    transform: scale(6);


    transform-origin: center 14%;


}





/* Face items - zoom aggressively to fill square */


.item-btn[data-category="eyes"] img,


.item-btn[data-category="pupils"] img {


    transform: scale(12);


    transform-origin: center 17%;


}





.item-btn[data-category="eyebrows"] img {


    transform: scale(14);


    transform-origin: center 14%;


    filter: contrast(1.4);


}





.item-btn[data-category="eyelashes"] img {


    transform: scale(14);


    transform-origin: center 15%;


    filter: contrast(1.4);


}





.item-btn[data-category="nose"] img {


    transform: scale(16);


    transform-origin: center 19%;


}





.item-btn[data-category="mouth"] img {


    transform: scale(14);


    transform-origin: center 21%;


}





.item-btn[data-category="face"] img {


    transform: scale(8);


    transform-origin: center 17%;


}





/* Shoes - zoom to very bottom */


.item-btn[data-category="shoes"] img {


    transform: scale(6);


    transform-origin: center 92%;


}





/* Socks - lower legs */


.item-btn[data-category="socks"] img {


    transform: scale(4);


    transform-origin: center 82%;


}





/* Accessories - arm/body level */


.item-btn[data-category="accessories"] img {


    transform: scale(4);


    transform-origin: center 42%;


}





/* Jewelry - neck/chest area */


.item-btn[data-category="jewelry"] img {


    transform: scale(5);


    transform-origin: center 22%;


}





/* Body decor - torso area */


.item-btn[data-category="bodyDecor"] img {


    transform: scale(3.5);


    transform-origin: center 38%;


}





/* Ears/body parts - can be wings or ears, show more */


.item-btn[data-category="ears"] img {


    transform: scale(2);


    transform-origin: center 35%;


}





/* Hand items - center of body */


.item-btn[data-category="handItem"] img {


    transform: scale(3);


    transform-origin: center 45%;


}





/* Background decor - show more of the item */


.item-btn[data-category="bgDecor"] img {


    transform: scale(1.5);


    transform-origin: center 40%;


}





.item-btn .clear-option {


    font-size: 24px;


    color: rgba(255, 255, 255, 0.4);


    display: flex;


    align-items: center;


    justify-content: center;


    height: 100%;


}





/* Save Panel */


.save-row {


    display: flex;


    gap: 8px;


    margin-bottom: 12px;


}


.save-input {


    flex: 1;


    padding: 10px 12px;


    background: rgba(255, 255, 255, 0.08);


    border: 1px solid rgba(255, 255, 255, 0.15);


    border-radius: 10px;


    color: #fff;


    font-size: 14px;


    font-family: var(--gp-font-stack);


}


.save-input::placeholder { color: rgba(255, 255, 255, 0.4); }


.save-btn {


    padding: 10px 16px;


    background: linear-gradient(135deg, var(--salon-pink), var(--salon-purple));


    border: none;


    border-radius: 10px;


    color: #fff;


    font-size: 14px;


    font-weight: 700;


    cursor: pointer;


    font-family: var(--gp-font-stack);


}


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





.saved-looks {


    display: grid;


    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));


    gap: 8px;


}


.no-looks {


    grid-column: 1 / -1;


    color: rgba(255, 255, 255, 0.3);


    font-size: 12px;


    text-align: center;


    padding: 20px;


}





.look-card {


    background: rgba(255, 255, 255, 0.06);


    border: 1px solid rgba(255, 255, 255, 0.1);


    border-radius: 10px;


    padding: 8px;


    cursor: pointer;


    text-align: center;


}


.look-card:active { background: rgba(255, 255, 255, 0.1); }


.look-preview { font-size: 28px; margin-bottom: 4px; }


.look-name {


    font-size: 10px;


    color: rgba(255, 255, 255, 0.6);


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


}





/* ---- Photo Mode ---- */


#screen-photo {


    display: flex;


    flex-direction: column;


}





.photo-stage {


    flex: 1;


    position: relative;


    display: flex;


    align-items: center;


    justify-content: center;


    overflow: hidden;


}





.photo-background {


    position: absolute;


    inset: 0;


    transition: background 0.3s;


}


.photo-background[data-bg="studio"] {


    background: radial-gradient(ellipse at center, #2a1f4e 0%, #0f0c29 100%);


}


.photo-background[data-bg="garden"] {


    background: linear-gradient(180deg, #87ceeb 0%, #98fb98 60%, #228b22 100%);


}


.photo-background[data-bg="beach"] {


    background: linear-gradient(180deg, #87ceeb 0%, #f0e68c 60%, #deb887 100%);


}


.photo-background[data-bg="party"] {


    background: linear-gradient(135deg, #ff6b6b 0%, #feca57 25%, #48dbfb 50%, #ff9ff3 75%, #ff6b6b 100%);


}


.photo-background[data-bg="rainbow"] {


    background: linear-gradient(180deg, #ff6b6b 0%, #ffa502 16%, #ffd93d 33%, #7bed9f 50%, #70a1ff 66%, #a29bfe 83%, #ff7eb3 100%);


}


.photo-background[data-bg="hearts"] {


    background: linear-gradient(135deg, #ffb6c1 0%, #ff69b4 100%);


}


.photo-background[data-bg="hearts"]::before {


    content: "💕💖💗💕💖💗💕💖💗💕💖💗💕💖💗💕💖💗💕💖💗💕💖💗";


    position: absolute;


    inset: 0;


    font-size: 30px;


    line-height: 1.5;


    word-wrap: break-word;


    opacity: 0.3;


    overflow: hidden;


}


.photo-background[data-bg="stars"] {


    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);


}


.photo-background[data-bg="stars"]::before {


    content: "⭐✨🌟⭐✨🌟⭐✨🌟⭐✨🌟⭐✨🌟⭐✨🌟⭐✨🌟⭐✨🌟⭐✨🌟";


    position: absolute;


    inset: 0;


    font-size: 28px;


    line-height: 1.6;


    word-wrap: break-word;


    opacity: 0.4;


    overflow: hidden;


}


.photo-background[data-bg="sparkles"] {


    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);


}


.photo-background[data-bg="sparkles"]::before {


    content: "✨💫⭐✨💫⭐✨💫⭐✨💫⭐✨💫⭐✨💫⭐✨💫⭐✨💫⭐✨💫⭐";


    position: absolute;


    inset: 0;


    font-size: 26px;


    line-height: 1.7;


    word-wrap: break-word;


    opacity: 0.35;


    overflow: hidden;


    animation: sparkle-bg 3s ease-in-out infinite;


}


@keyframes sparkle-bg {


    0%, 100% { opacity: 0.25; }


    50% { opacity: 0.45; }


}





.photo-layers {


    position: relative;


    width: 80%;


    max-width: 320px;


    height: 80%;


    z-index: 10;


}


.photo-layers img {


    position: absolute;


    width: 100%;


    height: 100%;


    object-fit: contain;


}





.photo-sparkles {


    position: absolute;


    inset: 0;


    pointer-events: none;


}





.photo-controls {


    padding: 16px;


    background: rgba(0, 0, 0, 0.3);


}


.bg-selector {


    display: flex;


    justify-content: center;


    gap: 10px;


    margin-bottom: 12px;


}


.bg-btn {


    width: 44px;


    height: 44px;


    border-radius: 50%;


    border: 2px solid transparent;


    background: rgba(255, 255, 255, 0.1);


    font-size: 20px;


    cursor: pointer;


    transition: all 0.15s;


}


.bg-btn.active {


    border-color: var(--salon-pink);


    background: rgba(255, 126, 179, 0.2);


}


.photo-actions {


    display: flex;


    gap: 12px;


}


.photo-actions .gp-btn { flex: 1; }





/* ---- Looks Gallery ---- */


.looks-gallery {


    flex: 1;


    padding: 16px;


    overflow-y: auto;


}


.looks-empty {


    display: flex;


    flex-direction: column;


    align-items: center;


    justify-content: center;


    height: 100%;


    color: rgba(255, 255, 255, 0.4);


    text-align: center;


}


.empty-icon { font-size: 64px; margin-bottom: 16px; opacity: 0.5; }


.empty-hint { font-size: 12px; margin-top: 8px; color: rgba(255, 255, 255, 0.3); }


.looks-actions { padding: 16px; }





/* ---- Mode Toggle ---- */


.mode-toggle {


    display: flex;


    gap: 4px;


    margin-left: 12px;


    background: rgba(0, 0, 0, 0.3);


    padding: 3px;


    border-radius: 8px;


}


.mode-btn {


    padding: 4px 10px;


    border: none;


    border-radius: 6px;


    background: transparent;


    color: rgba(255, 255, 255, 0.6);


    font-size: 11px;


    font-weight: 600;


    cursor: pointer;


    transition: all 0.2s;


    font-family: inherit;


}


.mode-btn.active {


    background: var(--salon-pink);


    color: #fff;


}





/* ---- Nail Salon Mode ---- */


.nail-salon {


    flex: 1;


    display: flex;


    flex-direction: column;


    overflow: hidden;


    background: linear-gradient(180deg, rgba(255, 182, 193, 0.1) 0%, rgba(147, 112, 219, 0.1) 100%);


}





.hand-container {


    flex: 1;


    display: flex;


    flex-direction: column;


    align-items: center;


    justify-content: center;


    padding: 20px;


    position: relative;


}





.hand-switch {


    position: absolute;


    top: 10px;


    right: 10px;


    padding: 8px 12px;


    background: rgba(255, 255, 255, 0.15);


    border: none;


    border-radius: 20px;


    color: #fff;


    font-size: 12px;


    cursor: pointer;


    font-family: inherit;


}





/* Image-based Hand */


.hand {


    position: relative;


    width: 100%;


    max-width: 350px;


    aspect-ratio: 3 / 4;


}





.hand-image {


    position: absolute;


    inset: 0;


    background-size: contain;


    background-repeat: no-repeat;


    background-position: center;


    pointer-events: none;


}





/* Separate images for each hand */


.hand[data-hand="left"] .hand-image {


    background-image: url('assets/nail-asset/Left.png');


}


.hand[data-hand="right"] .hand-image {


    background-image: url('assets/nail-asset/Right.png');


}





/* Nail zones - positioned over the hand image */


.nail-zone {


    position: absolute;


    cursor: pointer;


    /* Debug: uncomment to see zones */


    /* border: 2px dashed rgba(255,0,0,0.5); */


}


.nail-zone:hover .nail {


    box-shadow: 0 0 12px var(--salon-glow);


}





/* ========== NAIL ZONE POSITIONS ========== */





/* LEFT HAND ZONES */


.hand[data-hand="left"] .zone-thumb { top: 38.9%; left: 77.5%; width: 5%; }


.hand[data-hand="left"] .zone-index { top: 16.7%; left: 59.8%; width: 4.9%; }


.hand[data-hand="left"] .zone-middle { top: 12.9%; left: 44.3%; width: 5.4%; }


.hand[data-hand="left"] .zone-ring { top: 19.2%; left: 31.3%; width: 4.9%; }


.hand[data-hand="left"] .zone-pinky { top: 32.8%; left: 17.4%; width: 4.3%; }





/* RIGHT HAND ZONES */


.hand[data-hand="right"] .zone-thumb { top: 39.1%; left: 17.8%; width: 5.1%; }


.hand[data-hand="right"] .zone-index { top: 15.8%; left: 35.3%; width: 5.2%; }


.hand[data-hand="right"] .zone-middle { top: 12.9%; left: 50.5%; width: 5.4%; }


.hand[data-hand="right"] .zone-ring { top: 18.9%; left: 63.9%; width: 4.9%; }


.hand[data-hand="right"] .zone-pinky { top: 32.2%; left: 78.9%; width: 4.2%; }





/* ========== NAIL TRANSFORMS ========== */





/* LEFT HAND NAIL ANGLES */


.hand[data-hand="left"] .zone-thumb .nail {


    transform: translateX(-50%) rotate(32deg) skewX(7deg) skewY(18deg);


}


.hand[data-hand="left"] .zone-index .nail {


    transform: translateX(-50%) rotate(4deg) skewX(-1deg) skewY(0deg);


}


.hand[data-hand="left"] .zone-pinky .nail {


    transform: translateX(-50%) rotate(-12deg) skewX(2deg) skewY(4deg);


}





/* RIGHT HAND NAIL ANGLES */


.hand[data-hand="right"] .zone-thumb .nail {


    transform: translateX(-50%) rotate(-31deg) skewX(-4deg) skewY(-13deg);


}


.hand[data-hand="right"] .zone-index .nail {


    transform: translateX(-50%) rotate(-5deg) skewX(-1deg) skewY(0deg);


}


.hand[data-hand="right"] .zone-middle .nail {


    transform: translateX(-50%) rotate(0deg) skewX(-2deg) skewY(1deg);


}


.hand[data-hand="right"] .zone-ring .nail {


    transform: translateX(-50%) rotate(8deg) skewX(0deg) skewY(2deg);


}


.hand[data-hand="right"] .zone-pinky .nail {


    transform: translateX(-50%) rotate(17deg) skewX(0deg) skewY(3deg);


}





/* ========== NAIL LENGTHS ========== */


.nail { height: 160%; } /* Medium default */


.nail.length-short { height: 120%; }


.nail.length-medium { height: 160%; }


.nail.length-long { height: 220%; }


.nail.length-extralong { height: 300%; }





/* ========== NAIL SHAPES ========== */


.nail.shape-round { border-radius: 30% 30% 50% 50%; }


.nail.shape-square { border-radius: 10% 10% 15% 15%; }


.nail.shape-oval { border-radius: 45%; }


.nail.shape-almond { border-radius: 30% 30% 50% 50% / 20% 20% 80% 80%; }


.nail.shape-stiletto { border-radius: 20% 20% 50% 50% / 10% 10% 90% 90%; }


.nail.shape-coffin { border-radius: 10% 10% 35% 35% / 10% 10% 60% 60%; }





/* Nails - Base styles */


.nail {


    position: absolute;


    top: 0;


    left: 50%;


    transform: translateX(-50%);


    width: 100%;


    background-color: #ffb6c1;


    border: 2px solid rgba(0,0,0,0.15);


    border-radius: 30% 30% 50% 50%;


    cursor: pointer;


    transition: box-shadow 0.15s ease;


    overflow: hidden;


}


.nail:hover {


    box-shadow: 0 0 10px var(--salon-glow);


}


.nail.selected {


    border: 3px solid var(--salon-pink);


    box-shadow: 0 0 15px var(--salon-glow);


}





/* Nail Finishes - All use the background-color set by JS */


.nail.gloss {


    box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 -8px 12px rgba(255,255,255,0.35);


}


.nail.gloss::before {


    content: '';


    position: absolute;


    top: 3px;


    left: 15%;


    width: 35%;


    height: 45%;


    background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.2) 60%, transparent 100%);


    border-radius: 50%;


    pointer-events: none;


}





.nail.matte {


    box-shadow: 0 1px 2px rgba(0,0,0,0.12);


}


.nail.matte::before {


    content: '';


    position: absolute;


    inset: 0;


    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 40%);


    pointer-events: none;


}





.nail.glitter {


    box-shadow: 0 2px 8px rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.2);


}


.nail.glitter::before {


    content: '';


    position: absolute;


    inset: 0;


    background-image:


        radial-gradient(circle at 20% 25%, rgba(255,255,255,0.95) 1px, transparent 1px),


        radial-gradient(circle at 55% 15%, rgba(255,255,255,0.9) 1px, transparent 1px),


        radial-gradient(circle at 80% 55%, rgba(255,255,255,0.95) 1px, transparent 1px),


        radial-gradient(circle at 35% 65%, rgba(255,255,255,0.85) 1px, transparent 1px),


        radial-gradient(circle at 15% 75%, rgba(255,255,255,0.9) 1px, transparent 1px),


        radial-gradient(circle at 70% 80%, rgba(255,255,255,0.85) 1px, transparent 1px),


        radial-gradient(circle at 45% 40%, rgba(255,255,255,0.9) 1px, transparent 1px);


    animation: glitter-sparkle 1.5s ease-in-out infinite;


    pointer-events: none;


}


@keyframes glitter-sparkle {


    0%, 100% { opacity: 0.8; }


    50% { opacity: 1; }


}





.nail.chrome {


    box-shadow: 0 2px 8px rgba(0,0,0,0.35), inset 0 2px 4px rgba(255,255,255,0.6);


}


.nail.chrome::before {


    content: '';


    position: absolute;


    inset: 0;


    background: linear-gradient(135deg,


        rgba(255,255,255,0.5) 0%,


        transparent 30%,


        rgba(255,255,255,0.3) 50%,


        transparent 70%,


        rgba(255,255,255,0.4) 100%);


    pointer-events: none;


}





/* Nail Patterns */


.nail.pattern-stripes {


    background-image: repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(255,255,255,0.3) 3px, rgba(255,255,255,0.3) 6px);


}


.nail.pattern-dots {


    background-image: radial-gradient(circle, rgba(255,255,255,0.5) 2px, transparent 2px);


    background-size: 8px 8px;


}


.nail.pattern-hearts {


    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ctext x='2' y='14' font-size='12'%3E💕%3C/text%3E%3C/svg%3E");


    background-size: 15px 15px;


}


.nail.pattern-stars {


    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ctext x='2' y='14' font-size='10'%3E⭐%3C/text%3E%3C/svg%3E");


    background-size: 12px 12px;


}


.nail.pattern-gradient {


    background: linear-gradient(180deg, var(--nail-color, #ff69b4) 0%, var(--nail-color2, #fff) 100%) !important;


}


.nail.pattern-french {


    background: linear-gradient(0deg, transparent 60%, rgba(255,255,255,0.95) 60%) !important;


}


.nail.pattern-tiedye {


    background:


        radial-gradient(circle at 30% 30%, rgba(255,105,180,0.7) 0%, transparent 50%),


        radial-gradient(circle at 70% 60%, rgba(138,43,226,0.7) 0%, transparent 50%),


        radial-gradient(circle at 50% 80%, rgba(0,191,255,0.7) 0%, transparent 50%);


}


.nail.pattern-marble {


    background:


        linear-gradient(125deg, rgba(255,255,255,0.3) 0%, transparent 40%),


        linear-gradient(245deg, rgba(150,150,150,0.2) 0%, transparent 50%),


        linear-gradient(65deg, rgba(200,200,200,0.2) 0%, transparent 60%);


}


.nail.pattern-flames {


    background: linear-gradient(0deg, #ff4500 0%, #ff8c00 30%, #ffd700 60%, transparent 80%);


}


.nail.pattern-snow {


    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ctext x='2' y='14' font-size='10'%3E❄️%3C/text%3E%3C/svg%3E");


    background-size: 14px 14px;


    background-color: #e0f0ff;


}


.nail.pattern-xmas {


    background: repeating-linear-gradient(45deg, #ff0000, #ff0000 5px, #00ff00 5px, #00ff00 10px);


}


.nail.pattern-rainbow {


    background: linear-gradient(180deg, #ff0000 0%, #ff7f00 17%, #ffff00 33%, #00ff00 50%, #0000ff 67%, #4b0082 83%, #9400d3 100%);


}


.nail.pattern-galaxy {


    background: linear-gradient(135deg, #0c0c2d 0%, #1a1a4e 30%, #2d1b69 60%, #0c0c2d 100%);


    background-image:


        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.8) 1px, transparent 1px),


        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.6) 1px, transparent 1px),


        radial-gradient(circle at 50% 70%, rgba(255,255,255,0.7) 1px, transparent 1px),


        linear-gradient(135deg, #0c0c2d 0%, #1a1a4e 30%, #2d1b69 60%, #0c0c2d 100%);


}





/* Nail Sticker */


.nail .sticker {


    position: absolute;


    font-size: 10px;


    top: 50%;


    left: 50%;


    transform: translate(-50%, -50%);


    pointer-events: none;


}





/* Nail Controls */


.nail-controls {


    background: rgba(15, 12, 41, 0.95);


    padding: 12px;


    overflow-y: auto;


    max-height: 45vh;


}





.nail-section {


    margin-bottom: 12px;


}


.nail-label {


    display: block;


    font-size: 11px;


    font-weight: 600;


    color: rgba(255,255,255,0.6);


    margin-bottom: 6px;


    text-transform: uppercase;


}





.nail-select-btns,


.finish-btns,


.length-btns,


.shape-btns {


    display: flex;


    gap: 6px;


    flex-wrap: wrap;


}


.nail-select-btn,


.finish-btn,


.length-btn,


.shape-btn {


    padding: 6px 12px;


    background: rgba(255,255,255,0.1);


    border: none;


    border-radius: 15px;


    color: rgba(255,255,255,0.7);


    font-size: 11px;


    cursor: pointer;


    font-family: inherit;


    transition: all 0.15s;


}


.nail-select-btn.active,


.finish-btn.active,


.length-btn.active,


.shape-btn.active {


    background: var(--salon-pink);


    color: #fff;


}





.color-swatches {


    display: flex;


    gap: 6px;


    flex-wrap: wrap;


}


.color-swatch {


    width: 28px;


    height: 28px;


    border-radius: 50%;


    border: 2px solid transparent;


    cursor: pointer;


    transition: all 0.15s;


}


.color-swatch:hover {


    transform: scale(1.15);


}


.color-swatch.active {


    border-color: #fff;


    box-shadow: 0 0 10px var(--salon-glow);


}





.design-grid,


.sticker-grid {


    display: flex;


    gap: 6px;


    flex-wrap: wrap;


}


.design-btn,


.sticker-btn {


    width: 40px;


    height: 40px;


    background: rgba(255,255,255,0.1);


    border: 2px solid transparent;


    border-radius: 8px;


    font-size: 16px;


    cursor: pointer;


    transition: all 0.15s;


    display: flex;


    align-items: center;


    justify-content: center;


}


.design-btn:hover,


.sticker-btn:hover {


    background: rgba(255,255,255,0.2);


}


.design-btn.active,


.sticker-btn.active {


    border-color: var(--salon-pink);


    background: rgba(255, 126, 179, 0.2);


}





.nail-actions {


    display: flex;


    gap: 8px;


    margin-top: 12px;


    padding-top: 12px;


    border-top: 1px solid rgba(255,255,255,0.1);


}


.nail-action-btn {


    flex: 1;


    padding: 10px;


    background: rgba(255,255,255,0.1);


    border: none;


    border-radius: 10px;


    color: #fff;


    font-size: 12px;


    cursor: pointer;


    font-family: inherit;


    transition: all 0.15s;


}


.nail-action-btn:active {


    transform: scale(0.95);


}





.saved-nails {


    display: flex;


    gap: 8px;


    flex-wrap: wrap;


    margin-top: 12px;


    max-height: 80px;


    overflow-y: auto;


}


.saved-nail-card {


    padding: 8px 12px;


    background: rgba(255,255,255,0.08);


    border-radius: 8px;


    font-size: 11px;


    color: rgba(255,255,255,0.7);


    cursor: pointer;


    display: flex;


    align-items: center;


    gap: 6px;


}


.saved-nail-card:hover {


    background: rgba(255,255,255,0.15);


}


.delete-saved {


    color: rgba(255,255,255,0.4);


    cursor: pointer;


}


.delete-saved:hover {


    color: #ff6b6b;


}





/* ---- Responsive ---- */


@media (max-height: 600px) {


    :root {


        --tray-collapsed: 110px;


        --tray-expanded: 65vh;


    }


    .item-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }


    .item-btn { min-height: 60px; }


}





@media (min-height: 800px) {


    :root { --tray-collapsed: 150px; }


    .character-layers { max-width: 450px; }


}