@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

body {
    background-color: #2c3e50;
    font-family: 'Fredoka One', cursive;
    overflow: hidden;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#game-container {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 500px;
    background: #87CEEB;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
}

#gameCanvas {
    display: block;
    width: 100%;
    height: 100%;
    /* Smooth scaling for 2.5D vectors, pixelated for retro feel if desired. Let's go smooth for "High End" */
    image-rendering: auto; 
}

#ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(44, 62, 80, 0.85); /* Darker, richer background */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 10;
    backdrop-filter: blur(15px); /* Stronger glass effect */
    -webkit-backdrop-filter: blur(15px);
}

.screen.active {
    opacity: 1;
    pointer-events: auto;
}

h1 {
    font-size: 3.5rem;
    text-align: center;
    color: #f1c40f;
    text-shadow: 
        0 4px 0 #d35400,
        0 10px 10px rgba(0,0,0,0.2);
    margin-bottom: 20px;
    transform: rotate(-2deg);
    letter-spacing: 1px;
}

h2 {
    font-size: 3rem;
    margin-bottom: 20px;
    color: #e74c3c;
    text-shadow: 0 3px 0 #c0392b;
}

.subtitle {
    font-size: 1.3rem;
    margin-bottom: 40px;
    color: #ecf0f1;
    text-align: center;
    max-width: 80%;
    line-height: 1.5;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Voxel Preview in CSS */
.voxel-preview {
    width: 100px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(-30deg);
    margin: 20px auto 40px;
    animation: float 3s ease-in-out infinite;
}

.cube-face {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 4px;
}

.cube-face.front {
    background: #f1c40f;
    transform: translateZ(40px);
    box-shadow: inset 0 0 0 5px rgba(0,0,0,0.1);
}
/* Face detail */
.cube-face.front::after {
    content: '';
    position: absolute;
    top: 20px; left: 15px;
    width: 10px; height: 10px;
    background: #333;
    box-shadow: 40px 0 0 #333; /* Right eye */
}
.cube-face.front::before {
    content: '';
    position: absolute;
    top: 40px; left: 35px;
    width: 10px; height: 6px;
    background: #e74c3c;
    border-radius: 4px;
}

.cube-face.top {
    background: #f39c12;
    transform: rotateX(90deg) translateZ(30px);
}

.cube-face.side {
    background: #d35400;
    transform: rotateY(90deg) translateZ(30px);
}

@keyframes float {
    0%, 100% { transform: rotateX(-20deg) rotateY(-30deg) translateY(0); }
    50% { transform: rotateX(-20deg) rotateY(-30deg) translateY(-15px); }
}

.btn {
    padding: 15px 40px;
    font-size: 1.4rem;
    border: none;
    border-radius: 25px;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    cursor: pointer;
    box-shadow: 
        0 6px 0 #1e8449, 
        0 15px 25px rgba(0,0,0,0.3);
    transition: all 0.1s;
    margin: 10px;
    font-family: 'Fredoka One', cursive;
    text-transform: uppercase;
    position: relative;
    top: 0;
    width: 85%;
    max-width: 320px;
    text-shadow: 0 2px 0 rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 0 #1e8449, 
        0 20px 30px rgba(0,0,0,0.3);
}

.btn:active {
    top: 6px;
    transform: translateY(0);
    box-shadow: 
        0 0 0 #1e8449, 
        0 5px 10px rgba(0,0,0,0.2);
}

/* Form Styles */
input[type="text"], input[type="password"] {
    background: rgba(255, 255, 255, 0.9);
    color: #2c3e50;
    font-family: 'Fredoka One', cursive;
    font-size: 1.1rem;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

input[type="text"]:focus, input[type="password"]:focus {
    background: #fff;
    outline: none;
    box-shadow: 
        inset 0 2px 5px rgba(0,0,0,0.1),
        0 0 0 3px rgba(46, 204, 113, 0.5);
}

.upload-area {
    margin-bottom: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* Ensures centering */
    gap: 10px;
    width: 100%;
}

.upload-area input[type="text"], .upload-area input[type="password"] {
    width: 80%;
    max-width: 280px;
    text-align: center;
}

.upload-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

.btn-small {
    padding: 10px 20px;
    font-size: 1rem;
    margin: 0;
    width: auto;
}

/* Leaderboard Enhancements */
#leaderboard-list {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
    /* Custom Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #f1c40f rgba(0,0,0,0.3);
}

#leaderboard-list::-webkit-scrollbar {
    width: 8px;
}

#leaderboard-list::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
}

#leaderboard-list::-webkit-scrollbar-thumb {
    background-color: #f1c40f;
    border-radius: 4px;
}

.rank-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: white;
    transition: background 0.2s;
}

.rank-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.rank-1 .rank-num { color: #f1c40f; text-shadow: 0 0 10px rgba(241, 196, 15, 0.5); font-size: 1.5rem; }
.rank-2 .rank-num { color: #bdc3c7; text-shadow: 0 0 10px rgba(189, 195, 199, 0.5); font-size: 1.4rem; }
.rank-3 .rank-num { color: #e67e22; text-shadow: 0 0 10px rgba(230, 126, 34, 0.5); font-size: 1.3rem; }

.player-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    margin-right: 10px;
}

.no-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #bdc3c7;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin-right: 10px;
    border: 2px solid #fff;
}

.btn-group-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.share-buttons {
    display: flex;
    gap: 15px;
    width: 80%;
    max-width: 320px;
    margin-top: 10px;
}

.btn.share-btn {
    width: 100%;
    font-size: 1.1rem;
    padding: 15px;
    margin: 0;
    border-radius: 15px;
}

.btn.share-btn.line {
    background: linear-gradient(to bottom, #06c755, #05b34c);
    box-shadow: 0 5px 0 #04923e, 0 10px 10px rgba(0,0,0,0.2);
}
.btn.share-btn.line:active { box-shadow: 0 0 0 #04923e; top: 5px; }

.btn.share-btn.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    box-shadow: 0 5px 0 #8a1362, 0 10px 10px rgba(0,0,0,0.2);
}
.btn.share-btn.instagram:active { box-shadow: 0 0 0 #8a1362; top: 5px; }

/* Tutorial Styles */
.tutorial-content {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
}

.tut-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    text-align: center;
}

.tut-step p {
    margin-top: 20px;
    font-size: 1.3rem;
    line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.hand-anim {
    width: 70px;
    height: 70px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="white" d="M207.6 247.9c-23.9-10.4-44.4-2.8-51 3.5-3.3 3.2-5.4 7.6-5.4 12.5v115.1c0 5-4.1 9.1-9.1 9.1-5 0-9.1-4.1-9.1-9.1V146.9c0-26-21.1-47.1-47.1-47.1s-47.1 21.1-47.1 47.1v153.3c-23.7-14.9-30.7-18.1-34.9-18.1-13.6 0-25.9 8.2-30.3 21.3-3 9-1 18.6 5.5 26.4l70.1 84.1c16.3 19.5 40.5 30.7 65.9 30.7h55.6c43.9 0 79.6-35.7 79.6-79.6V265.6c0-9.2-8-16.1-17.1-17.7z"/></svg>') no-repeat center;
    background-size: contain;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.3));
}

.hand-anim.tap { animation: tapAnim 1.5s ease-in-out infinite; }
.hand-anim.swipe { animation: swipeAnim 1.5s ease-in-out infinite; }

@keyframes tapAnim {
    0% { transform: scale(1); }
    50% { transform: scale(0.8); }
    100% { transform: scale(1); }
}

@keyframes swipeAnim {
    0% { transform: translateX(0); }
    50% { transform: translateX(30px); }
    100% { transform: translateX(0); }
}

/* HUD */
#hud {
    position: absolute;
    top: 25px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    z-index: 5;
    pointer-events: none;
}

.hud-item {
    background: rgba(0, 0, 0, 0.6);
    padding: 12px 25px;
    border-radius: 50px;
    color: white;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.score-box .label {
    font-size: 0.9rem;
    color: #bdc3c7;
    margin-right: 5px;
    font-weight: normal;
}

.text-yellow { color: #f1c40f; }

/* Responsive Mobile Adjustments */
@media (max-width: 480px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2.2rem; }
    .subtitle { font-size: 1.1rem; }
    .btn { padding: 15px 30px; font-size: 1.2rem; width: 90%; }
    .share-buttons { width: 90%; }
    .btn.share-btn { font-size: 1rem; padding: 12px; }
    .tutorial-content { gap: 20px; }
    .tut-step p { font-size: 1.1rem; }
    .hud-item { padding: 8px 15px; font-size: 1.4rem; }
}

.score-card {
    background: rgba(255, 255, 255, 0.15);
    padding: 25px;
    border-radius: 20px;
    margin-bottom: 30px;
    text-align: center;
    width: 85%;
    border: 2px solid rgba(255,255,255,0.1);
}

.score-card p {
    font-size: 1.8rem;
    margin: 8px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.taunt {
    color: #f1c40f;
    font-style: italic;
    margin-bottom: 30px;
    font-size: 1.3rem;
    text-align: center;
    padding: 0 20px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Animations */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

#virtual-dpad {
    pointer-events: none; /* Container passes through */
}

.dpad-btn {
    pointer-events: auto; /* Buttons capture clicks */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.1s, background 0.1s;
    touch-action: manipulation; /* Optimize for touch */
}

.dpad-btn:active {
    background: rgba(255,255,255,0.6) !important;
    transform: translateX(-50%) scale(0.9) !important;
}

/* Override transform for left/right specific buttons if needed, but the inline style handles positioning. 
   We just need to ensure active state doesn't break positioning. 
   The inline styles use transforms for centering. We should be careful.
   Better to use specific classes or IDs in CSS to avoid inline style conflicts.
*/

#dpad-up:active, #dpad-down:active {
    transform: translateX(-50%) scale(0.9) !important;
}

#dpad-left:active {
    transform: scale(0.9) !important;
}

#dpad-right:active {
    transform: scale(0.9) !important;
}