/*
 * shape-inspector-3d activity styles.
 *
 * 3D shapes are projected to 2D using a simple isometric axonometric
 * projection. Each face is an SVG polygon with shading by depth;
 * edges are SVG lines; vertices are SVG circles. Pupils tap each
 * part to count it.
 */

.s3d-mode-chip {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    background: var(--maths-surface-alt);
    color: var(--maths-primary-dark);
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.s3d-target-label { font-weight: 800; color: #8a5a00; font-size: 0.95rem; margin-right: 0.5rem; }
.s3d-target-prompt { flex: 1 1 auto; color: #6b4500; font-weight: 700; font-size: 1rem; }

.s3d-answer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex: 1 1 100%;
    margin-top: 0.4rem;
}

.s3d-answer-chip {
    min-width: 2.6rem;
    min-height: 2.6rem;
    padding: 0.3rem 0.6rem;
    background: var(--maths-surface);
    border: 2px solid var(--maths-border);
    border-radius: 10px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--maths-primary-dark);
    cursor: pointer;
    transition: background-color 140ms ease, transform 80ms ease;
}

.s3d-answer-chip:hover { background: var(--maths-surface-alt); }
.s3d-answer-chip:active { transform: scale(0.96); }
.s3d-answer-chip.is-active {
    background: var(--maths-primary);
    color: #fff;
    border-color: var(--maths-primary-dark);
}

.s3d-shape-picker {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.s3d-shape-pick {
    min-width: 100px;
    min-height: 44px;
    background: var(--maths-surface);
    border: 2px solid var(--maths-border);
    border-radius: 10px;
    padding: 0.5rem 0.9rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 160ms ease;
}

.s3d-shape-pick:hover { background: var(--maths-surface-alt); }
.s3d-shape-pick.is-active { background: var(--maths-primary); color: #fff; border-color: var(--maths-primary-dark); }

.s3d-rotation-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
    padding: 0.4rem 0.6rem;
    background: var(--maths-surface-alt);
    border: 1px solid var(--maths-border);
    border-radius: 10px;
}

.s3d-rotation-label {
    font-weight: 800;
    font-size: 1rem;
    color: var(--maths-primary-dark);
    margin-right: 0.3rem;
}

.s3d-rot-btn {
    min-width: 48px;
    min-height: 44px;
    font-size: 1.05rem;
    font-weight: 700;
}

.s3d-rot-snap { min-width: 80px; }
.s3d-rot-spin.is-active {
    background: var(--maths-primary);
    color: #fff;
    border-color: var(--maths-primary-dark);
}

.s3d-stage {
    background: var(--maths-surface);
    border: 1px solid var(--maths-border);
    border-radius: 12px;
    padding: 0.4rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    position: relative;
}

.s3d-stage-inner {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 600 / 480;
}

.s3d-shape-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.s3d-shape-svg.is-grabbing { cursor: grabbing; }

.s3d-shape-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.s3d-shape-canvas.is-grabbing { cursor: grabbing; }

.s3d-shape-svg[hidden],
.s3d-shape-canvas[hidden] { display: none; }

.s3d-face {
    stroke: var(--maths-primary-dark);
    stroke-width: 1.5;
    stroke-linejoin: round;
    cursor: pointer;
    transition: fill 160ms ease, stroke 160ms ease, stroke-width 120ms ease, filter 160ms ease;
}

.s3d-face-tone-1 { fill: #B7D1EA; }
.s3d-face-tone-2 { fill: #94BBDF; }
.s3d-face-tone-3 { fill: #6BA3D4; }
.s3d-face-tone-4 { fill: #4A8BC4; }
.s3d-face-tone-5 { fill: #2F77B0; }

/* Counted face — vivid green fill so it's instantly distinguishable from any
   blue tone (uncounted faces). Same green is used for counted edges and
   vertices, giving the three counters one consistent "got it" colour. */
.s3d-face.is-counted {
    fill: #22c55e;
    stroke: #15803d;
    stroke-width: 3;
    filter: none;
}

/* Hover affordance: amber stroke on a tappable, un-counted front face. Tells
   a mouse user "this is what you'd be tapping" before they click. Touch
   devices don't fire :hover, so the un-counted state still relies on the
   counted/un-counted colour contrast above. */
.s3d-face:not(.is-back):not(.is-counted):hover {
    stroke: #f59e0b;
    stroke-width: 3;
    filter: brightness(1.08);
}

.s3d-face.is-counted:hover {
    stroke: #14532d;
    filter: brightness(1.06);
}

/* Back-facing face polygons are stacked under the visible front faces by
   painter's-order so the wireframe + dashed hidden-line convention still
   reads. They stay clickable so a tap anywhere inside the shape's silhouette
   has a polygon to land on. */
.s3d-face.is-back {
    fill-opacity: 0;
    stroke: none;
    pointer-events: all;
    cursor: pointer;
}

/* When a back face is itself counted, show a faint green tint underneath the
   visible front faces — the counter advances visibly even though the face is
   on the hidden side of the shape. */
.s3d-face.is-back.is-counted {
    fill: #22c55e;
    fill-opacity: 0.22;
    stroke: none;
}

.s3d-edge {
    stroke: #163a5f;
    stroke-width: 4;
    fill: none;
    pointer-events: none;
}

.s3d-edge.is-back { stroke: #163a5f; stroke-dasharray: 4 3; opacity: 0.5; }
.s3d-edge.is-counted { stroke: #166534; stroke-width: 6; }

/* Transparent fat hit-line stacked over each edge so a primary finger
   can land on it from the back row of the classroom. */
.s3d-edge-hit {
    stroke: transparent;
    stroke-width: 28;
    stroke-linecap: round;
    fill: none;
    cursor: pointer;
    pointer-events: stroke;
    transition: stroke 140ms ease;
}

.s3d-edge-hit:hover {
    stroke: rgba(245, 158, 11, 0.28);
}

.s3d-vertex {
    fill: #E86A33;
    stroke: #fff;
    stroke-width: 2;
    pointer-events: none;
}

.s3d-vertex-counted-dot {
    fill: #166534;
    stroke: #fff;
    stroke-width: 2;
    pointer-events: none;
}

.s3d-vertex-counted-tick {
    fill: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 14px;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.s3d-vertex-hit {
    fill: transparent;
    stroke: transparent;
    stroke-width: 2;
    cursor: pointer;
    pointer-events: fill;
    transition: fill 140ms ease, stroke 140ms ease;
}

.s3d-vertex-hit:hover {
    fill: rgba(254, 240, 138, 0.38);
    stroke: #f59e0b;
}

.s3d-counters {
    background: var(--maths-surface);
    border: 1px solid var(--maths-border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.s3d-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.s3d-counter-label {
    font-weight: 700;
    color: var(--maths-ink-muted);
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.s3d-counter-found,
.s3d-counter-total,
.s3d-counter-of {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--maths-primary-dark);
    font-variant-numeric: tabular-nums;
}

.s3d-counter-of { color: var(--maths-ink-muted); font-size: 1.4rem; margin: 0 0.3rem; }

.s3d-counter-caption {
    margin: 0.5rem 0 1rem;
    text-align: center;
    color: var(--maths-ink-muted);
    font-size: 0.95rem;
    font-style: italic;
}

body.display-mode .s3d-counter-caption { display: none; }

.s3d-your-turn {
    background: #FFF7DE;
    border: 1px solid #F0C14B;
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    margin-top: 1rem;
}

.s3d-your-turn-label { font-weight: 800; color: #8a5a00; margin-bottom: 0.4rem; }
.s3d-your-turn-list { margin: 0; padding-left: 1.2rem; color: #5e3c00; font-weight: 600; }

body.display-mode .s3d-shape-svg,
body.display-mode #revealButton,
body.display-mode #resetButton {
    pointer-events: none;
}

/* In display mode hide the shape-picker row — the displayed shape is
 * determined by the preset. The rotation bar stays visible so the
 * teacher can turn the solid during worked examples. */
body.display-mode .s3d-shape-picker {
    display: none;
}

/* In display mode put the stage and the Faces/Edges/Vertices counters
 * side-by-side so the whole worked example fits on an IWB or laptop
 * screen without scrolling. In other modes the wrapper is a transparent
 * block so stage and counters fall back to the default stacked layout. */
body.display-mode .s3d-display-row {
    display: flex;
    align-items: stretch;
    gap: 1rem;
}

body.display-mode .s3d-display-row > .s3d-stage {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

body.display-mode .s3d-display-row > .s3d-counters {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 1.25rem;
    min-width: 11rem;
}

body.display-mode .s3d-display-row .s3d-counter {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
}

body.display-mode .s3d-display-row .s3d-counter-label {
    font-size: 1.05rem;
}

body.display-mode .s3d-display-row .s3d-counter-found,
body.display-mode .s3d-display-row .s3d-counter-total {
    font-size: 2.4rem;
}