@font-face {
    font-family: 'Jumblies';
    src: url('/fonts/Jumblies.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Jumblies', Arial, sans-serif;
    background: linear-gradient(135deg, #00BCD4 0%, #FF6B6B 50%, #8BC34A 75%, #FF9800 100%);
    color: #333333;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Ensure all elements use Jumblies font */
input, button, select, textarea, option {
    font-family: 'Jumblies', Arial, sans-serif;
}

.container {
    max-width: 100%;
    padding: 20px;
    min-height: 100vh;
}

.title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.title-with-character {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.title-character {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.title-character.flip {
    transform: scaleX(-1);
}

.result-character {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-top: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.view {
    display: none;
}

.view.active {
    display: block;
}

/* Category Setup */
.category-setup {
    background: white;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.category-input {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px;
}

.category-input label {
    font-size: 1.5rem;
    font-weight: bold;
    width: 40px;
    color: #764ba2;
}

.category-select {
    flex: 1;
    padding: 15px;
    font-size: 1.1rem;
    border: 3px solid #e0e0e0;
    border-radius: 10px;
    background: #f8f8f8;
}

/* Buttons */
.big-button {
    width: 100%;
    padding: 20px;
    font-size: 1.3rem;
    font-weight: bold;
    border: 3px solid #333333;
    border-radius: 20px;
    cursor: pointer;
    margin: 10px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    background: #00BCD4;
    color: white;
    position: relative;
    overflow: hidden;
}

.big-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.big-button.primary {
    background: #00BCD4;
    color: white;
}

.big-button.secondary {
    background: #8BC34A;
    color: white;
}

.big-button.reveal {
    background: #FF6B6B;
    color: white;
}

.big-button.answer {
    background: #FF9800;
    color: white;
}

.big-button.duel {
    background: #FF6B6B;
    color: white;
}

.big-button.danger {
    background: #333333;
    color: white;
}

.big-button:active {
    transform: scale(0.95);
}

/* Session Info */
.session-info {
    background: white;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.session-code {
    font-size: 3.5rem;
    font-weight: bold;
    letter-spacing: 15px;
    margin: 20px 0;
    display: inline-block;
    padding: 15px 30px;
    border: 3px solid #333333;
    border-radius: 20px;
    background: white;
}

/* Each letter in session code gets a different color */
.session-code span:nth-child(6n+1) { color: #00BCD4; }
.session-code span:nth-child(6n+2) { color: #FF6B6B; }
.session-code span:nth-child(6n+3) { color: #8BC34A; }
.session-code span:nth-child(6n+4) { color: #FF9800; }
.session-code span:nth-child(6n+5) { color: #00BCD4; }
.session-code span:nth-child(6n+6) { color: #FF6B6B; }

/* Categories Display */
.categories-display {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
}

.category-badge {
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: bold;
    color: white;
    font-size: 1rem;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}

.category-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

.category-badge:active {
    transform: translateY(0);
}

.category-badge.j { background: #ff6b6b; }
.category-badge.u { background: #4ecdc4; }
.category-badge.m { background: #45b7d1; }
.category-badge.b { background: #96ceb4; }
.category-badge.l { background: #feca57; }
.category-badge.i { background: #ff9ff3; }
.category-badge.e { background: #a29bfe; }

/* Players */
.players-section {
    background: white;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.players-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.player-item {
    color: white;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
}

/* Rotate through the 4 JUMBLIE colors */
.player-item:nth-child(4n+1) {
    background: #00BCD4;
}
.player-item:nth-child(4n+2) {
    background: #FF6B6B;
}
.player-item:nth-child(4n+3) {
    background: #8BC34A;
}
.player-item:nth-child(4n+4) {
    background: #FF9800;
}

/* Host Categories Panel */
.host-categories-panel {
    background: white;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.host-categories-panel h3 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.host-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    max-width: 600px;
    margin: 0 auto;
}

.host-category-item {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.host-category-letter {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.host-category-name {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 10px;
    height: 4.5em; /* Space for approximately 4 lines */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.host-question-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
    font-weight: bold;
}

.host-question-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Question Controls */
.question-controls {
    background: white;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.control-row {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.letter-select, .difficulty-select, .player-select {
    padding: 15px;
    font-size: 1.2rem;
    border: 3px solid #e0e0e0;
    border-radius: 10px;
    background: #f8f8f8;
}

.category-select {
    padding: 15px;
    font-size: 1.1rem;
    border-radius: 10px;
    border: 2px solid #ddd;
    background: white;
}

.random-button {
    padding: 15px 25px;
    font-size: 1.1rem;
    border-radius: 10px;
    border: none;
    background: #9C27B0;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: bold;
}

.random-button:hover {
    background: #7B1FA2;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.random-button:active {
    transform: translateY(0);
}

.random-button.shuffling {
    animation: pulse 0.3s ease-in-out infinite;
    background: #E91E63;
}

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

/* Question Display */
.question-display {
    background: white;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.timer {
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
    color: #4ecdc4;
    margin-bottom: 20px;
}

.timer.warning {
    color: #ff6b6b;
    animation: pulse 1s ease-in-out infinite;
}

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

.question-text {
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #333;
}

.jumblie {
    font-weight: bold;
    font-size: 1.6em;
    letter-spacing: 3px;
    display: inline-block;
    text-transform: uppercase;
    padding: 5px 15px;
    border: 3px solid #333333;
    border-radius: 15px;
    background: white;
    position: relative;
}

/* Create colorful letter effect */
.jumblie span:nth-child(4n+1) { color: #00BCD4; }
.jumblie span:nth-child(4n+2) { color: #FF6B6B; }
.jumblie span:nth-child(4n+3) { color: #8BC34A; }
.jumblie span:nth-child(4n+4) { color: #FF9800; }

@keyframes rainbow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.choices {
    margin-bottom: 20px;
}

.choice {
    background: #f8f8f8;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 10px;
    font-size: 1.2rem;
    border: 2px solid #e0e0e0;
}

.jumblie-reveal {
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    color: #764ba2;
    margin-top: 20px;
}

.answer-reveal {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    color: #2196F3;
    margin-top: 20px;
    padding: 15px;
    background: rgba(33, 150, 243, 0.1);
    border-radius: 10px;
}

/* Duel Section */
.duel-section {
    background: white;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.duel-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.category-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Input Styles */
.big-input {
    width: 100%;
    padding: 20px;
    font-size: 1.5rem;
    border: 3px solid #e0e0e0;
    border-radius: 15px;
    margin-bottom: 15px;
    text-align: center;
    background: white;
}

.big-input:focus {
    outline: none;
    border-color: #764ba2;
}

/* Player Interface */
.join-form {
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.waiting-content {
    background: white;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.waiting-animation {
    margin: 40px 0;
}

.pulse-circle {
    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: pulse 2s ease-in-out infinite;
}

.session-info-small {
    margin-top: 30px;
    font-size: 1.2rem;
    color: #666;
}

/* Player Categories Panel */
.categories-panel {
    margin: 10px 0;
    padding: 0;
    background: transparent;
    display: block !important;
    visibility: visible !important;
}

.categories-panel h3 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.player-categories-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 500px;
    margin: 0 auto;
    visibility: visible !important;
    padding: 0 10px;
}

.category-item {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.category-letter {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.category-name {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
    height: 4.5em; /* Space for approximately 4 lines */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.ask-question-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
    position: relative;
    z-index: 10;
}

.ask-question-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.ask-question-btn:disabled {
    background: #ccc !important;
    cursor: not-allowed;
    transform: none;
}

/* Color each letter's button */
.category-item.letter-j .ask-question-btn { background: #FF6B6B; }
.category-item.letter-u .ask-question-btn { background: #00BCD4; }
.category-item.letter-m .ask-question-btn { background: #8BC34A; }
.category-item.letter-b .ask-question-btn { background: #FF9800; }
.category-item.letter-l .ask-question-btn { background: #FF6B6B; }
.category-item.letter-i .ask-question-btn { background: #00BCD4; }
.category-item.letter-e .ask-question-btn { background: #8BC34A; }
.category-item.letter-s .ask-question-btn { background: #FF9800; }

/* New compact category button design for mobile */
.category-button {
    border: none;
    border-radius: 12px;
    color: white;
    cursor: pointer;
    padding: 15px 10px;
    width: 100%;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.3s;
    text-align: center;
    font-weight: 600;
}

.category-button:active {
    transform: scale(0.95);
}

.button-letter {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
}

.button-category {
    font-size: 0.85rem;
    line-height: 1.1;
    max-width: 100%;
    word-wrap: break-word;
}

/* Player header styling */
.player-header {
    text-align: center;
    padding: 10px 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    margin: -20px -20px 20px -20px;
}

.player-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

/* Compact game info at bottom */
.game-info {
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
    padding: 20px 10px;
    text-align: center;
    font-size: 0.85rem;
    margin-top: 30px;
}

.duel-note {
    margin: 0;
    color: #666;
}

.game-code {
    margin: 5px 0 0 0;
    font-weight: 600;
}

/* Adjust waiting content */
.waiting-content {
    padding-bottom: 20px;
}

/* Mobile responsiveness */
@media (max-width: 400px) {
    .player-categories-grid {
        gap: 8px;
        padding: 0 8px;
    }
    
    .category-button {
        min-height: 70px;
        padding: 12px 8px;
    }
    
    .button-letter {
        font-size: 1.75rem;
    }
    
    .button-category {
        font-size: 0.75rem;
    }
}

/* Duel View */
.duel-content {
    background: white;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.answer-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.answer-button {
    padding: 20px;
    font-size: 1.3rem;
    border: none;
    border-radius: 15px;
    background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.answer-button:active {
    transform: scale(0.95);
}

.answer-button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.answer-button.correct {
    background: #4CAF50 !important;
    border: 3px solid #2E7D32 !important;
    transform: scale(1.05);
    animation: pulse 0.5s ease-in-out;
}

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

.duel-result {
    text-align: center;
    margin-top: 30px;
}

.duel-result h2 {
    font-size: 2.5rem;
}

.success {
    color: #4ecdc4;
}

.info {
    color: #764ba2;
}

/* Question Display Page */
.question-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
}

.timer-large {
    font-size: 6rem;
    font-weight: bold;
    text-align: center;
    color: white;
    margin-bottom: 30px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.timer-large.warning {
    color: #ff6b6b;
    animation: pulse 1s ease-in-out infinite;
}

.timer-large.time-up {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.question-display-large {
    background: white;
    padding: 30px;
    border-radius: 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.question-text-large {
    font-size: 2rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #333;
}

.jumblie-large {
    font-weight: bold;
    display: inline-block;
    font-size: 2.2rem;
}

.jumblie-large span:nth-child(4n+1) { color: #00BCD4; }
.jumblie-large span:nth-child(4n+2) { color: #FF6B6B; }
.jumblie-large span:nth-child(4n+3) { color: #8BC34A; }
.jumblie-large span:nth-child(4n+4) { color: #FF9800; }

.choices-large {
    margin-bottom: 30px;
}

.choice-large {
    background: #f8f8f8;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 15px;
    font-size: 1.8rem;
    border: 3px solid #e0e0e0;
}

.reveal-large {
    font-size: 1.8rem !important;
}

.jumblie-reveal-large {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    color: #764ba2;
    margin-top: 30px;
}

.controls-bottom {
    margin-top: 30px;
    text-align: center;
}

/* Landing Page */
.landing-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-content {
    background: white;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    max-width: 500px;
    width: 100%;
}

.landing-title {
    font-size: 5rem;
    margin-bottom: 20px;
    letter-spacing: 10px;
    font-weight: bold;
}

.landing-title span {
    display: inline-block;
    animation: float 3s ease-in-out infinite;
}

.landing-title span:nth-child(1) { animation-delay: 0s; }
.landing-title span:nth-child(2) { animation-delay: 0.2s; }
.landing-title span:nth-child(3) { animation-delay: 0.4s; }
.landing-title span:nth-child(4) { animation-delay: 0.6s; }
.landing-title span:nth-child(5) { animation-delay: 0.8s; }
.landing-title span:nth-child(6) { animation-delay: 1s; }
.landing-title span:nth-child(7) { animation-delay: 1.2s; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.rainbow-text {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3, #a29bfe);
    background-size: 300% 300%;
    animation: rainbow 3s ease-in-out infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.landing-subtitle {
    text-align: center;
    font-size: 1.3rem;
    color: #666;
    margin-bottom: 40px;
}

.landing-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.landing-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: 4px solid #333333;
    position: relative;
    overflow: hidden;
}

.host-button {
    background: #00BCD4;
    color: white;
}

.player-button {
    background: #FF6B6B;
    color: white;
}

.landing-button:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.landing-button:active {
    transform: scale(0.95);
}

.button-icon {
    font-size: 3rem;
    margin-bottom: 10px;
}

.button-text {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.button-desc {
    font-size: 1.1rem;
    opacity: 0.95;
    letter-spacing: 1px;
}

.how-to-play {
    text-align: left;
}

.how-to-play h2 {
    text-align: center;
    color: #764ba2;
    margin-bottom: 20px;
}

.how-to-play ol {
    padding-left: 25px;
    color: #666;
    line-height: 1.8;
}

.how-to-play li {
    margin-bottom: 10px;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* Responsive Design */
@media (max-width: 600px) {
    .title {
        font-size: 2rem;
    }
    
    .session-code {
        font-size: 2.5rem;
        letter-spacing: 5px;
    }
    
    .question-text {
        font-size: 1.3rem;
    }
    
    .landing-title {
        font-size: 3rem;
    }
}