/* ==========================================================
   Crespion Party Detective — Game Styles
   ========================================================== */

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px currentColor; }
    50% { box-shadow: 0 0 20px currentColor, 0 0 30px currentColor; }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
.pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.float-anim { animation: float 2s ease-in-out infinite; }
.selectable { cursor: pointer; transition: all 0.2s; }
.selectable:hover { transform: scale(1.3); filter: brightness(1.3); }

.room-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0.5rem;
    position: relative;
}
.room-red { grid-column: 2; grid-row: 1; }
.room-blue { grid-column: 1; grid-row: 2; }
.room-hall { grid-column: 2; grid-row: 2; }
.room-yellow { grid-column: 3; grid-row: 2; }
.room-green { grid-column: 2; grid-row: 3; }

.dice-container { perspective: 300px; width: 80px; height: 80px; }
.dice-cube {
    width: 80px; height: 80px; position: relative;
    transform-style: preserve-3d; transition: transform 0.5s ease-out;
}
.dice-face {
    position: absolute; width: 80px; height: 80px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: bold;
    border: 3px solid rgba(255,255,255,0.5); border-radius: 12px;
    backface-visibility: hidden;
}
.dice-face.front  { transform: rotateY(0deg) translateZ(40px); }
.dice-face.back   { transform: rotateY(180deg) translateZ(40px); }
.dice-face.right  { transform: rotateY(90deg) translateZ(40px); }
.dice-face.left   { transform: rotateY(-90deg) translateZ(40px); }
.dice-face.top    { transform: rotateX(90deg) translateZ(40px); }
.dice-face.bottom { transform: rotateX(-90deg) translateZ(40px); }

@keyframes dice-roll {
    0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    20% { transform: rotateX(180deg) rotateY(90deg) rotateZ(45deg); }
    40% { transform: rotateX(360deg) rotateY(180deg) rotateZ(90deg); }
    60% { transform: rotateX(540deg) rotateY(270deg) rotateZ(135deg); }
    80% { transform: rotateX(720deg) rotateY(360deg) rotateZ(180deg); }
    100% { transform: rotateX(720deg) rotateY(360deg) rotateZ(180deg); }
}
.dice-rolling { animation: dice-roll 1s ease-out; }
.dice-show-red { transform: rotateY(0deg) rotateX(0deg); }
.dice-show-blue { transform: rotateY(-90deg) rotateX(0deg); }
.dice-show-green { transform: rotateY(180deg) rotateX(0deg); }
.dice-show-yellow { transform: rotateY(90deg) rotateX(0deg); }
.dice-show-black1 { transform: rotateX(-90deg) rotateY(0deg); }
.dice-show-black2 { transform: rotateX(90deg) rotateY(0deg); }

.game-log { max-height: 150px; overflow-y: auto; }
.game-log::-webkit-scrollbar { width: 6px; }
.game-log::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }

.character-token {
    font-size: 2.5rem; padding: 0.25rem; border-radius: 0.5rem;
    transition: all 0.3s; line-height: 1;
}
.eliminated { opacity: 0.3; text-decoration: line-through; }
.room-connections { font-size: 0.65rem; color: rgba(255,255,255,0.5); margin-top: 0.25rem; }

.movement-arrow {
    position: absolute; font-size: 2rem; color: #fbbf24;
    text-shadow: 0 0 10px rgba(251,191,36,0.8), 0 0 20px rgba(251,191,36,0.5);
    pointer-events: none; z-index: 10;
    animation: arrowPulse 1.5s ease-in-out infinite; display: none;
}
.movement-arrow.show { display: block; }
@keyframes arrowPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}
.arrow-red-hall { top: 28%; left: 50%; transform: translateX(-50%); }
.arrow-blue-hall { top: 50%; left: 28%; transform: translateY(-50%); }
.arrow-yellow-hall { top: 50%; right: 28%; transform: translateY(-50%); }
.arrow-green-hall { bottom: 28%; left: 50%; transform: translateX(-50%); }
.arrow-red-blue { top: 22%; left: 22%; }
.arrow-red-yellow { top: 22%; right: 22%; }
.arrow-blue-green { bottom: 22%; left: 22%; }
.arrow-yellow-green { bottom: 22%; right: 22%; }

.selectable {
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
}
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

@keyframes flyToRoom {
    0% { transform: scale(1); opacity: 1; }
    30% { transform: scale(1.8) translateY(-30px); opacity: 1; }
    70% { transform: scale(1.5) translateY(-20px); opacity: 0.8; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
.char-arriving { animation: flyToRoom 1s ease-out; }

.emoji-flying {
    position: fixed; font-size: 3.5rem; z-index: 100; pointer-events: none;
    transition: all 1.8s linear;
    filter: drop-shadow(0 0 15px rgba(168,85,247,0.9)) drop-shadow(0 0 30px rgba(168,85,247,0.5));
}

@keyframes eliminatePulse {
    0% { transform: scale(1); opacity: 1; }
    20% { transform: scale(1.4); }
    40% { transform: scale(1.2); }
    60% { transform: scale(1.3); opacity: 0.8; }
    100% { transform: scale(0.5); opacity: 0; }
}
.char-eliminated-anim {
    position: relative; animation: eliminatePulse 2s ease-out forwards;
}
.char-eliminated-anim::after {
    content: '✖'; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); font-size: 3rem; color: #ef4444;
    text-shadow: 0 0 10px rgba(239,68,68,0.8), 0 0 20px rgba(239,68,68,0.5);
    pointer-events: none; animation: fadeInOut 2s ease-out forwards;
}
@keyframes fadeInOut {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

@keyframes slideBanner {
    0% { transform: translateX(-100%); opacity: 0; }
    15% { transform: translateX(0); opacity: 1; }
    85% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}
.move-banner { animation: slideBanner 2.5s ease-in-out forwards; }

/* Albus cat animations */
.albus-cat {
    position: fixed; z-index: 100; pointer-events: none;
    width: 192px; height: 192px; display: block;
    background-image: url('wocpbirc611c1-removebg-preview.png');
    background-size: contain; background-repeat: no-repeat;
    background-position: center;
    will-change: transform, left, top, opacity;
    transform: translateZ(0);
}
.albus-mouse {
    position: fixed; font-size: 3rem; z-index: 99; pointer-events: none;
    will-change: opacity; transform: translateZ(0);
}
.albus-pushed {
    position: fixed; font-size: 2.2rem; z-index: 100; pointer-events: none;
    will-change: transform, left, top, opacity; transform: translateZ(0);
}
.albus-cross {
    position: fixed; font-size: 3.5rem; z-index: 101; pointer-events: none;
    color: #ef4444;
    text-shadow: 0 0 10px rgba(239,68,68,0.8), 0 0 20px rgba(239,68,68,0.5);
    will-change: transform, opacity; transform: translateZ(0);
}
@keyframes albusCrossPop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-20deg); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.3) rotate(5deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

/* Mobile responsive */
@media (max-width: 640px) {
    .room-grid { gap: 0.25rem; }
    .character-token { font-size: 1.8rem; padding: 0.1rem; }
    .dice-container, .dice-cube, .dice-face { width: 50px; height: 50px; }
    .dice-face { font-size: 1.3rem; }
    .dice-face.front  { transform: rotateY(0deg) translateZ(25px); }
    .dice-face.back   { transform: rotateY(180deg) translateZ(25px); }
    .dice-face.right  { transform: rotateY(90deg) translateZ(25px); }
    .dice-face.left   { transform: rotateY(-90deg) translateZ(25px); }
    .dice-face.top    { transform: rotateX(90deg) translateZ(25px); }
    .dice-face.bottom { transform: rotateX(-90deg) translateZ(25px); }
    .room-connections { font-size: 0.5rem; display: none; }
    h3 { font-size: 0.65rem !important; margin-bottom: 0 !important; }
    .albus-cat { width: 100px; height: 100px; }
    .albus-mouse { font-size: 2rem; }
    .albus-pushed { font-size: 1.6rem; }
    .albus-cross { font-size: 2.5rem; }
    #game-screen { padding: 2px 4px; }
    #game-screen .game-header { padding: 6px 8px; margin-bottom: 2px; }
    #game-screen .game-header .text-2xl { font-size: 1.3rem; }
    #game-screen .room-grid { margin-bottom: 2px; min-height: 0; }
    #game-screen .room-grid > div { padding: 4px 6px; }
    #game-screen .dice-section { padding: 6px 8px; margin-bottom: 2px; }
    #game-screen .dice-section .gap-4 { gap: 0.5rem; }
    #game-screen .dice-section #action-prompt { margin-top: 2px; font-size: 0.7rem; }
    .game-above-fold {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
    }
    .game-above-fold .room-grid {
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
    }
    .game-above-fold .dice-section {
        position: relative;
        z-index: 10;
        flex-shrink: 0;
    }
}