.vxpz-app {
    max-width: 480px; margin: 0 auto; padding: 12px;
    font-family: var(--vx-font-family); user-select: none;
    -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}

/* HUD */
.vxpz-hud { display: flex; gap: 8px; margin-bottom: 10px; }
.vxpz-hud-item {
    flex: 1; background: var(--vx-bg-card); border: 1px solid var(--vx-border);
    border-radius: var(--vx-radius); padding: 8px 10px;
    display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.vxpz-hud-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--vx-text-3); }
.vxpz-hud-val { font-size: 20px; font-weight: 800; color: var(--vx-text); line-height: 1; font-variant-numeric: tabular-nums; }

.vxpz-dishname {
    text-align: center; font-size: 15px; font-weight: 700; color: var(--vx-primary);
    margin-bottom: 8px; min-height: 20px;
}

.vxpz-board-wrap { position: relative; }

/* griglia obiettivo: solo cornice, celle vuote */
.vxpz-board {
    position: relative; width: 100%; aspect-ratio: 1 / 1;
    border: 3px solid var(--vx-primary); border-radius: var(--vx-radius);
    background: var(--vx-bg-hover);
    display: grid; overflow: hidden;
}
.vxpz-slot {
    border: 1px dashed var(--vx-border);
    position: relative;
}

/* vassoio pezzi sotto */
.vxpz-tray {
    margin-top: 12px; min-height: 90px;
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
    padding: 10px; background: var(--vx-bg-body);
    border: 1px solid var(--vx-border); border-radius: var(--vx-radius);
}

/* pezzo */
.vxpz-piece {
    position: relative; cursor: grab; touch-action: none;
    border-radius: 4px; overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    background-size: cover; background-repeat: no-repeat;
}
.vxpz-piece.is-dragging { cursor: grabbing; z-index: 50; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.vxpz-piece.is-correct { outline: 3px solid var(--vx-success); outline-offset: -3px; }

/* pezzo agganciato in una cella: assoluto dentro il board */
.vxpz-board .vxpz-piece { position: absolute; }

/* overlay */
.vxpz-overlay {
    position: absolute; inset: 0; z-index: 60;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: var(--vx-overlay); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    border-radius: var(--vx-radius); text-align: center; padding: 24px;
}
.vxpz-overlay.is-hidden { display: none; }
.vxpz-over-title { font-size: 26px; font-weight: 900; color: var(--vx-text-inv); margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.vxpz-over-sub { font-size: 14px; color: var(--vx-text-inv); margin: 0; opacity: .95; line-height: 1.4; }
.vxpz-btn {
    padding: 13px 32px; border: none; border-radius: 40px;
    background: var(--vx-primary); color: var(--vx-text-inv);
    font-size: 16px; font-weight: 800; cursor: pointer;
    box-shadow: 0 4px 14px var(--vx-primary-light);
    transition: transform .12s ease;
}
.vxpz-btn:active { transform: scale(.95); }