/*
 * Hand Sculpt — only what's specific to this tool.
 * Palette, buttons, sliders, HUD chips, dialogs, overlays and taskbar come
 * from ../../shared-studio.css (camera stage section).
 */

html, body { width: 100%; height: 100%; overflow: hidden; }
body { background: radial-gradient(ellipse at 50% 40%, #16121a 0%, var(--s-ink) 70%); }
.hidden { display: none !important; }

/* ── Stage layers ────────────────────────────────────────── */
#app { position: fixed; inset: 0; }

#webcam {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; transform: scaleX(-1);
    pointer-events: none; opacity: 0.28;
    filter: grayscale(0.6) contrast(1.1);
    transition: opacity 0.3s;
}
body.camera-hidden #webcam { opacity: 0; }
/* Camera already mirrors its image: don't mirror it back. */
body.camera-unflipped #webcam { transform: none; }

#viewport { position: absolute; inset: 0; }
#viewport canvas { display: block; }
#hands-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }

/* ── Status (top right) ──────────────────────────────────── */
#status-bar {
    position: absolute; top: 12px; right: 12px;
    display: flex; align-items: center; gap: 10px;
    pointer-events: none; white-space: nowrap;
}
#active-brush { min-width: 60px; color: var(--s-phosphor); letter-spacing: 2px; }
#status-pill { display: flex; align-items: center; gap: 6px; color: var(--s-ink-dim); }
#status-dot { width: 7px; height: 7px; background: #333; }
#status-dot.loading  { background: #ffe600; }
#status-dot.ready    { background: #00ff88; }
#status-dot.tracking { background: var(--s-phosphor); }
#status-dot.error    { background: #ff5050; }

/* ── Tool palette (top centre) ───────────────────────────── */
#toolbar { top: 12px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 24px); white-space: nowrap; }
#toolbar .s-palette-row { overflow-x: auto; scrollbar-width: none; }
#toolbar .s-palette-row::-webkit-scrollbar { display: none; }
.tool-btn { min-width: 52px; }
.tool-label { font-size: 8px; letter-spacing: 0.5px; }
.export-key { color: var(--s-on-phosphor); background: var(--s-phosphor); }
.export-key:hover { background: var(--s-phosphor); filter: brightness(1.08); }

.slider { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 4px; flex-shrink: 0; }
.slider .s-slider { width: 84px; }

/* ── Guide, debug, toast ─────────────────────────────────── */
#gesture-guide {
    position: absolute; right: 12px; bottom: calc(var(--s-taskbar-h) + 12px);
    display: flex; flex-direction: column; gap: 1px;
    pointer-events: none;
}
.g-row { color: var(--s-ink-dim); }
.g-row b { color: var(--s-ink-text); }
.g-row b.tool { color: var(--s-phosphor); }
.g-row b.support { color: #00cfff; }
/* On the grey tutorial panel the bright HUD colours wash out: use deep tones. */
#tut-text b.tool { color: var(--s-title); }
#tut-text b.support { color: #00607a; }
.g-row.dim { opacity: 0.7; margin-top: 3px; }
body.tutorial-open #gesture-guide { display: none; }

#hand-debug { position: absolute; left: 12px; top: 96px; margin: 0; pointer-events: none; }

#toast {
    position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%);
    padding: 6px 14px;
    font: 22px var(--s-mono); letter-spacing: 3px; color: var(--s-phosphor);
    background: var(--s-ink); border: 2px solid; border-color: var(--s-raised);
    pointer-events: none; opacity: 0;
}
#toast:empty { display: none; }
#toast::before { content: '> '; }
#toast.show { animation: toast 0.9s ease-out; }
@keyframes toast {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}

#help-btn { position: absolute; left: 12px; top: 12px; width: 32px; }

/* ── Calibration dialog (centre) ─────────────────────────── */
#calibrate {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 300px; max-width: calc(100vw - 32px);
    align-items: center; gap: 8px; padding-bottom: 10px; text-align: center;
    z-index: 160;
}
#calibrate .s-win-titlebar { align-self: stretch; }
#calibrate svg { width: 40px; height: 40px; margin-top: 8px; color: var(--s-title); animation: wave 1.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes wave { 50% { transform: rotate(14deg); } }
#calib-text { padding: 0 12px; font-size: 13px; }
#calib-text b { color: var(--s-title); }
.calib-bar { width: calc(100% - 24px); height: 14px; padding: 2px; background: var(--s-ink); border: 2px solid; border-color: var(--s-sunken); }
#calib-fill { display: block; height: 100%; width: 0; background: var(--s-phosphor); transition: width 0.1s; }
.calib-why { padding: 0 12px; font-size: 10px; color: var(--s-dark); }

/* ── Tutorial window (bottom left) ───────────────────────── */
#tutorial {
    position: absolute; left: 12px; bottom: calc(var(--s-taskbar-h) + 12px);
    width: 320px; max-width: calc(100vw - 24px);
    gap: 6px; padding-bottom: 8px;
    z-index: 150;
}
#tutorial > :not(.s-win-titlebar) { margin-left: 8px; margin-right: 8px; }
#tut-count { font-weight: normal; opacity: 0.8; margin-left: 6px; }
#tut-canvas { display: block; width: calc(100% - 16px); height: 160px; }
#tut-text { min-height: 54px; font-size: 12px; line-height: 1.5; }
#tut-text b { font-weight: bold; }
#tut-try {
    display: flex; align-items: center; gap: 8px; padding: 3px 6px;
    font: 10px var(--s-mono); color: var(--s-ink-dim);
    background: var(--s-ink); border: 1px solid; border-color: var(--s-sunken);
}
.tut-dot { width: 7px; height: 7px; background: #333; }
#tut-try.live { color: var(--s-phosphor); }
#tut-try.live .tut-dot { background: var(--s-phosphor); animation: pulse 1.2s ease-in-out infinite; }
#tut-try.done { color: #00ff88; }
#tut-try.done .tut-dot { background: #00ff88; }
@keyframes pulse { 50% { opacity: 0.3; } }
.tut-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#tut-steps { display: flex; gap: 5px; }
#tut-steps span { width: 8px; height: 8px; cursor: pointer; background: var(--s-face); border: 1px solid; border-color: var(--s-sunken); }
#tut-steps span.active { background: var(--s-title); }
#recalibrate { align-self: center; }

/* ── Export dialog ───────────────────────────────────────── */
#export-dialog { z-index: 200; }
#export-box .exp-btn { justify-content: space-between; text-align: left; padding-left: 10px; padding-right: 10px; }
#export-box .exp-btn small { float: right; font-weight: normal; opacity: 0.6; }

/* ── Start screen ────────────────────────────────────────── */
#start-screen { z-index: 300; }
.s-term h3::before { content: '## '; }
#hand-choice { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 2px 0 4px; }
.seg { display: flex; gap: 3px; }
#restore-note:empty { display: none; }
#restore-note { font-family: var(--s-mono); color: var(--s-title); }
.note { margin: 0; font-size: 10px; color: var(--s-dark); }

@media (max-width: 700px) {
    #gesture-guide { display: none; }
    .tool-label { display: none; }
    .s-palette-btn { min-width: 44px; height: 44px; }
    /* Wrap instead of running off the edge: hands can't scroll. */
    #toolbar { width: calc(100vw - 16px); max-width: none; white-space: normal; }
    #toolbar .s-palette-row { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
    #help-btn { width: 44px; height: 44px; }
}