/* ───────── root sizing ───────── */
:root {
    --cube-size: min(45vw,45vh,80vmin);
    --square-gap: 6px;
    --face-n: 2; /* JS updates */
    --background-color: radial-gradient(circle at 50% 50%, #9be7ff 0%, #e8f7ff 70%);
    --text-color: #333;
    --navbar-bg: #f8f9fa;
    --footer-bg: #f8f9fa;
    --card-front-bg: #fafcfcd4;
    --card-border: #e2e8f0;
    --cube-size-px: 0px; /* JS updates */
}

/* Responsive cube tweaks */
@media (max-width: 600px) {
    :root {
        --cube-size: min(40vw,40vh,70vmin);
        --square-gap: 5px;
    }
}

@media (max-width: 400px) {
    :root {
        --cube-size: min(35vw,35vh,60vmin);
        --square-gap: 4px;
    }
}

/* ───────── dark-mode variable overrides ───────── */
body.dark-mode {
    --background-color: radial-gradient(circle at 50% 50%, #1e3a8a 0%, #0f172a 70%);
    --text-color: #e5e7eb;
    --navbar-bg: #1f2937;
    --footer-bg: #1f2937;
    --card-front-bg: #4b5563;
    --card-border: #6b7280;
}

    /* Nav/footer text tweaks in dark mode */
    body.dark-mode .navbar-light .navbar-brand,
    body.dark-mode .navbar-light .navbar-nav .nav-link,
    body.dark-mode footer,
    body.dark-mode footer a {
        color: var(--text-color) !important;
    }

        body.dark-mode .navbar-light .navbar-brand:hover,
        body.dark-mode .navbar-light .navbar-nav .nav-link:hover,
        body.dark-mode footer a:hover {
            color: #fcd34d !important;
        }

    body.dark-mode .text-muted {
        color: #9ca3af !important; /* Light-grey readable on dark bg */
    }

    /* Legend borders in dark mode */
    body.dark-mode .legend-item {
        border-color: #4b5563; /* Same tone as other card borders */
    }

/* ───────── page shell ───────── */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, sans-serif;
    color: var(--text-color);
    /* Centred gradient + pulse prep */
    background-image: var(--background-color);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Stabilizes gradient during interactions */
    will-change: background-size; /* Pre-optimizes for animation */
}

    body.playing {
        animation: bgGlow 12s ease-in-out infinite alternate;
    }

/* Disable background animation on mobile phones (keep for tablets/desktop) */
@media (max-width: 767px) {
    body.playing {
        animation: none !important;
    }
}

@keyframes bgGlow {
    0% {
        background-size: 100% 100%;
    }

    50% {
        background-size: 150% 150%;
    }

    100% {
        background-size: 100% 100%;
    }
}

/* Global suppressors for iOS touch highlights and flashes */
* {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none; /* Prevents long-press menu flash */
}

/* Generic colours */
.navbar-light {
    background: var(--navbar-bg) !important;
}

footer {
    background: var(--footer-bg) !important;
}

    footer.bg-light {
        background: var(--footer-bg) !important;
    }

header h1,
header p {
    color: var(--text-color);
}

/* ───────── HUD ───────── */
#hud {
    font-weight: 600;
    padding-bottom: 1rem;
    z-index: 10;
}

/* ───────── scene / cube ───────── */
.scene {
    width: var(--cube-size);
    height: var(--cube-size);
    perspective: calc(var(--cube-size)*6);
    perspective-origin: 50% 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 2rem;
    position: relative;
    overflow: visible;
    touch-action: manipulation; /* Better drag handling */
    transform: translateZ(0); /* Force hardware acceleration */
    touch-action: none; /* Disables browser scroll/zoom gestures */
    -webkit-user-select: none;
}

.cube {
    width: 70%;
    height: 70%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .6s ease;
    cursor: grab;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    touch-action: manipulation; /* Better drag handling */
    transform: translateZ(0); /* Force hardware acceleration */
    will-change: transform; /* Optimizes 3D rotation for Android */
    touch-action: none;
}


    .cube.pre-spin {
        animation: preSpin 20s linear infinite;
    }

    .cube:active {
        cursor: grabbing;
        box-shadow: 0 0 15px rgba(0,0,0,.2);
    }

@keyframes preSpin {
    0% {
        transform: rotateX(0) rotateY(0);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

/* ───────── faces ───────── */
.face {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: var(--square-gap);
    display: grid;
    gap: var(--square-gap);
    grid-template-columns: repeat(var(--face-n),1fr);
    grid-template-rows: repeat(var(--face-n),1fr);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    pointer-events: none;
}

.face--front {
    transform: translateZ(calc(var(--cube-size-px)/2));
}

.face--back {
    transform: rotateY(180deg) translateZ(calc(var(--cube-size-px)/2));
}

.face--right {
    transform: rotateY(90deg) translateZ(calc(var(--cube-size-px)/2));
}

.face--left {
    transform: rotateY(-90deg) translateZ(calc(var(--cube-size-px)/2));
}

.face--top {
    transform: rotateX(90deg) translateZ(calc(var(--cube-size-px)/2));
}

.face--bottom {
    transform: rotateX(-90deg) translateZ(calc(var(--cube-size-px)/2));
}

/* ───────── squares ───────── */
.square {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 800px;
    pointer-events: auto;
    touch-action: manipulation; /* Better drag handling */
    transform: translateZ(0); /* Force hardware acceleration */
}

.square-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform .45s;
}

.square.flip .square-inner {
    transform: rotateY(180deg);
}

.side {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    backface-visibility: hidden;
}

    .side.front {
        background: var(--card-front-bg);
        border: 1px solid var(--card-border);
        box-shadow: 0 0 4px rgba(0,0,0,.05);
    }

    .side.back {
        transform: rotateY(180deg);
        box-shadow: 0 2px 6px rgba(0,0,0,.25) inset;
    }

/* iOS preserve-3D workaround */
@supports (-webkit-transform-style: preserve-3d) {
    .cube, .face {
        -webkit-transform-style: preserve-3d;
    }
}

/* ───────── interaction helpers ───────── */
html, body {
    overscroll-behavior: none;
}

    body.no-scroll {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

@media (hover: none) {
    :root {
        --cube-size: min(80vw,70vh,80vmin);
    }
}

/* Disable active pseudo-class backgrounds */
.cube:active,
.square:active,
button:active {
    background: transparent !important;
}

/* ───────── FX keyframes ───────── */
@keyframes celebrate {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15) rotate(5deg);
    }

    100% {
        transform: scale(1);
    }
}

.scene.celebrate {
    animation: celebrate .6s ease;
}

@keyframes flashHint {
    0% {
        box-shadow: 0 0 0 rgba(255,255,0,0);
    }

    100% {
        box-shadow: 0 0 20px rgba(255,255,0,.9);
    }
}

.flash-hint {
    animation: flashHint 1s ease infinite alternate;
}

@keyframes matchPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
    }
}

.matched-flash .square-inner {
    animation: matchPulse .3s ease;
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 8px 2px #4f46e5;
    }

    50% {
        box-shadow: 0 0 16px 4px #4f46e5;
    }

    100% {
        box-shadow: 0 0 8px 2px #4f46e5;
    }
}

#start.glow {
    animation: pulse-glow 1.5s infinite;
}

/* ───────── legend ───────── */
.legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: .5rem 0;
}

.legend-item {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid #ccc;
}

    .legend-item.legend-fade {
        opacity: .3;
        transition: opacity .3s;
    }

    .legend-item.legend-pop {
        animation: pulse .4s ease;
    }

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes hudPop {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    40% {
        transform: scale(1.4);
        opacity: 1;
    }

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

.hud-pop {
    animation: hudPop 0.35s ease;
}

#hud span {
    display: inline-block;
}

/* ───────── scoreboard ───────── */
#scoreboard li {
    font-family: ui-monospace, monospace;
}

#scoreboard {
    margin: 0;
    padding: 4px 0;
    list-style: none; /* Remove bullets */
}

    #scoreboard .score-row {
        display: flex;
        justify-content: space-between;
    }

        /* Keep items aligned after we added rank numbers */
        #scoreboard .score-row > span:first-child {
            width: 1.25rem;
        }

/* Tiny helper so JS fade-out works */
.opacity-0 {
    opacity: 0 !important;
}

/* How-to list sizing + tick bullets */

.howto-points {
  list-style: none;
  padding-left: 0;
  margin: 0 auto 1rem;
  font-size: 1.125rem;      /* 18px */
  line-height: 1.6;
}
.howto-points li {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  margin:.35rem 0;
}
.howto-points li::before {
  content: "✔";
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1;
  transform: translateY(.15em);
  color: #16a34a;           /* emerald */
}
@media (max-width:480px){
  .howto-points{font-size:1.05rem}
}