/*
 * Coding Ireland proprietary interactive activity
 * Copyright (c) 2017-2026 Coding Ireland. All rights reserved.
 *
 * Part of the Coding Ireland online learning platform. Licensed for use only
 * as delivered on the platform. Copying, redistributing, or adapting this
 * file, in whole or in part, for use in any other product or service is not
 * permitted. Ref: CI-maths-shape-inspector-3d
 */
/*
 * 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;
}

/* Smart-advance feedback. Tapping a part that is already counted credits the NEXT
   uncounted one (back faces can't be tapped), which read as the same face being
   counted twice — QA #332. Outline whatever actually got credited for a moment so
   the tally and the shape tell the same story. */
.s3d-face.is-just-counted,
.s3d-edge.is-just-counted,
.s3d-vertex.is-just-counted,
.s3d-vertex-counted-dot.is-just-counted {
    animation: s3d-just-counted 0.7s ease-out;
}

@keyframes s3d-just-counted {
    0%   { stroke: #F59E0B; stroke-width: 8; }
    100% { stroke: #F59E0B; stroke-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .s3d-face.is-just-counted,
    .s3d-edge.is-just-counted,
    .s3d-vertex.is-just-counted,
    .s3d-vertex-counted-dot.is-just-counted { animation: none; }
}