/**
 * [STYLE: HOT TAKE GAME]
 * Focus: Welcoming Brand Colors, Bali Hai Accents, Clean Illustration
 */

.c-block-hottake {
    /* INCREASED BOTTOM PADDING: Pushes the footer safely below the 3D roads */
    padding: 4rem 0 20rem 0; 
    
    /* PURE BRAND COLOR: Stripped the gradient to enforce official Mystic */
    background-color: var(--color-mystic, #E6ECEF);
    overflow: hidden;
}

/* --- THE 3D SCENE --- */
.c-ht-scene {
    position: relative; width: 100%; max-width: 800px;
    margin: 0 auto; display: flex; flex-direction: column; align-items: center;
    perspective: 600px; 
    touch-action: manipulation; user-select: none; -webkit-user-select: none;
}

/* =========================================
   LAYER 1: THE UPRIGHT SIGNPOST
   ========================================= */
.c-ht-upright {
    position: relative; width: 100%; max-width: 500px;
    z-index: 10; display: flex; flex-direction: column; align-items: center;
}

/* THE POLE: Uses the new 'Bali Hai' color for a soft, sketched look */
.c-ht-pole {
    position: absolute;
    top: -10px; bottom: -100px; left: 50%; transform: translateX(-50%);
    width: 6px; 
    background-color: var(--color-bali-hai, #82A1AF); 
    border: 2px solid var(--color-tiber, #003238); 
    z-index: 1;
}

/* Soft shadow to root the pole */
.c-ht-pole::after {
    content: ''; position: absolute;
    bottom: -6px; left: -14px;
    width: 30px; height: 10px;
    background: rgba(0, 50, 56, 0.15);
    border-radius: 50%; z-index: -1;
}

/* The Flip Board */
.c-ht-board-wrapper { width: 100%; perspective: 1200px; z-index: 5; }
.c-ht-board {
    width: 100%; height: 350px; position: relative;
    transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.c-ht-board.is-flipped { transform: rotateY(180deg); }
.c-ht-board-face {
    position: absolute; width: 100%; height: 100%;
    backface-visibility: hidden; display: flex; flex-direction: column; align-items: center;
}

/* --- FRONT: FRIENDLY ARROWS --- */
.c-ht-board-face--front { cursor: pointer; padding-top: 1rem; }
.c-ht-arrow-cluster {
    display: flex; flex-direction: column; gap: 4px; width: 100%; align-items: center;
}

/* Delicate shadow outline */
.c-ht-arrow-wrap { filter: drop-shadow(2px 3px 0px rgba(0, 50, 56, 0.15)); }

/* Subtle, friendly angles */
.c-ht-arrow-wrap:nth-child(1) { transform: rotate(-2deg); margin-right: 15%; }
.c-ht-arrow-wrap:nth-child(2) { transform: rotate(1deg); margin-left: 15%; }
.c-ht-arrow-wrap:nth-child(3) { transform: rotate(-3deg); margin-right: 10%; }
.c-ht-arrow-wrap:nth-child(4) { transform: rotate(2deg); margin-left: 20%; }

/* Arrow Geometry */
.c-ht-arrow {
    font-family: var(--font-headline); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.05em;
    width: 220px; display: flex; flex-direction: column; justify-content: center;
    position: relative; z-index: 2; 
    border: 2px solid var(--color-tiber, #003238); 
    border-radius: 4px; cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}
.c-ht-arrow:hover {
    transform: scale(1.04);
    filter: brightness(1.15);
}
.c-ht-arrow:active {
    transform: scale(0.98); /* Physical press effect */
}
/* Chevrons */
.c-ht-arrow-wrap--left .c-ht-arrow { 
    clip-path: polygon(15% 0, 100% 0, 90% 50%, 100% 100%, 15% 100%, 0 50%); 
    padding: 0.8rem 2rem 0.8rem 2.5rem; text-align: right; 
}
.c-ht-arrow-wrap--right .c-ht-arrow { 
    clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%); 
    padding: 0.8rem 2.5rem 0.8rem 2rem; text-align: left; 
}

/* Official Brand Colors */
.c-ht-bg--tiber { background: var(--color-tiber, #003238); color: white; }
.c-ht-bg--teal  { background: var(--color-blue-bayoux, #2E5D6F); color: white; }
.c-ht-bg--gold  { background: var(--color-tahiti-gold, #F0821A); color: white; }
.c-ht-bg--red   { background: var(--color-red-orange, #E63024); color: white; }
@keyframes hint-twitch {
    0%, 100% { transform: rotate(0deg) scale(1); filter: brightness(1); }
    20% { transform: rotate(-3deg) scale(1.04); filter: brightness(1.2); }
    40% { transform: rotate(3deg) scale(1.04); filter: brightness(1.2); }
    60% { transform: rotate(-3deg) scale(1.04); filter: brightness(1.2); }
    80% { transform: rotate(3deg) scale(1.04); filter: brightness(1.2); }
}

.is-hinting {
    animation: hint-twitch 0.6s ease-in-out;
}
/* --- BACK: STATEMENT CARD --- */
.c-ht-board-face--back { transform: rotateY(180deg); justify-content: center; }
.c-ht-statement-card {
    background: white; 
    border: 2px solid var(--color-tiber, #003238);
    box-shadow: 4px 4px 0px rgba(0, 50, 56, 0.1);
    padding: 2.5rem; width: 90%; text-align: center; border-radius: 8px;
}
.c-ht-category {
    display: block; font-family: var(--font-body); font-weight: 800;
    color: var(--color-red-orange, #E63024); font-size: 0.8rem; margin-bottom: 0.5rem;
}
.c-ht-statement {
    font-family: var(--font-headline); font-size: 1.4rem; line-height: 1.2;
    color: var(--color-tiber, #003238); margin: 0;
}


/* =========================================
   LAYER 2: THE ISOMETRIC FLOOR (Crossroads)
   ========================================= */
.c-ht-floor {
    position: relative; width: 100%; height: 350px; margin-top: -60px; 
    transform-style: preserve-3d; transform: rotateX(60deg); 
    z-index: 1; pointer-events: none; opacity: 0.5; transition: opacity 0.3s;
}
.c-ht-floor.is-active { pointer-events: auto; opacity: 1; }

/* --- THE PERFECT "X" MATH --- */
/* TOP-RIGHT Background Road */
.c-ht-floor::after {
    content: ''; position: absolute; bottom: 100%; right: 50%; 
    width: 160px; height: 350px; 
    background: #FFFFFF; 
    border-left: 2px solid var(--color-tiber, #003238); border-right: 2px solid var(--color-tiber, #003238);
    transform-origin: bottom right; transform: rotateZ(25deg);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
}

/* TOP-LEFT Background Road */
.c-ht-floor::before {
    content: ''; position: absolute; bottom: 100%; left: 50%; 
    width: 160px; height: 350px; 
    background: #FFFFFF; 
    border-left: 2px solid var(--color-tiber, #003238); border-right: 2px solid var(--color-tiber, #003238);
    transform-origin: bottom left; transform: rotateZ(-25deg);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
}

/* --- FOREGROUND ROADS --- */
.c-ht-road {
    width: 160px; height: 450px; position: absolute; top: 0;
    background: #FFFFFF; 
    border: 2px solid var(--color-tiber, #003238); 
    border-top: none; 
    cursor: pointer; overflow: hidden;
    display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 3rem; transition: transform 0.1s ease;
}

.c-ht-road--left { 
    right: 50%; transform-origin: top right; transform: rotateZ(25deg); 
}
.c-ht-road--left:active { transform: rotateZ(25deg) translateY(2px); }

.c-ht-road--right { 
    left: 50%; transform-origin: top left; transform: rotateZ(-25deg); 
}
.c-ht-road--right:active { transform: rotateZ(-25deg) translateY(2px); }

/* DELICATE DASHED CENTER LINE */
.c-ht-road::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 0;
    border-left: 2px dashed rgba(0, 50, 56, 0.2); z-index: 2;
}

/* --- THE FLOOR LIQUID TIMER --- */
.c-ht-road-liquid {
    position: absolute; top: 0; left: 0; width: 100%; 
    height: var(--timer-fill); 
    border-bottom: 2px solid var(--color-tiber, #003238); z-index: 1;
}
.c-ht-liquid--red { background-color: var(--color-red-orange, #E63024); }
.c-ht-liquid--teal { background-color: var(--color-blue-bayoux, #2E5D6F); }

/* --- CLEAN, FLAT FLOOR TEXT --- */
.c-ht-road-label {
    position: relative; z-index: 5;
    font-family: var(--font-headline); font-size: 2.2rem; 
    color: var(--color-tiber, #003238); 
    letter-spacing: 0.05em; text-shadow: none; 
}

/* Skews perfectly onto the isometric floor plane */
.c-ht-road--left .c-ht-road-label { transform: translateY(-20px) skewX(-25deg); }
.c-ht-road--right .c-ht-road-label { transform: translateY(-20px) skewX(25deg); }


/* Mobile Adjustments */
@media (max-width: 600px) {
    .c-block-hottake { padding: 4rem 0 15rem 0; }
    .c-ht-floor { height: 250px; transform: rotateX(55deg); margin-top: -40px; }
    .c-ht-road { width: 120px; height: 350px; padding-bottom: 2rem; }
    .c-ht-road-label { font-size: 1.6rem; }
    
    .c-ht-road--left .c-ht-road-label { transform: translateY(-10px) skewX(-25deg); }
    .c-ht-road--right .c-ht-road-label { transform: translateY(-10px) skewX(25deg); }
    
    .c-ht-board { height: 300px; }
    .c-ht-arrow { width: 180px; font-size: 1rem; padding: 0.5rem 1.2rem; }
    .c-ht-arrow-wrap--left .c-ht-arrow { padding-left: 2rem; }
    .c-ht-arrow-wrap--right .c-ht-arrow { padding-right: 2rem; }
    .c-ht-pole { bottom: -70px; }
}