/* Version: 2.0.0 | Date: 2025-12-11 | Enhanced Messagebox System */
/* 
 * Words Game - Responsive Layout System
 * Background: 340px x 530px (aspect ratio 1.641)
 * Mapped from draw.io layout design
 * NEW: Flexible multi-button messagebox system
 */

:root {
    /* Card dimensions */
    --bg-width: 340px;
    --bg-height: 530px;
    --bg-aspect: 1.641;
    
    /* Colors */
    --card-red: #8B0000;
    --card-gold: #FFD700;
    --card-gold-dark: #8B6914;
    --card-orange: #FFA500;
    --card-green: #4CAF50;
    --card-blue: #2196F3;
    
    /* Layout zones (pixels, convert to % in usage) */
    --messagebox-height: 41;
    --controlsbox-top: 41;
    --controlsbox-height: 25;
    --titlebar-top: 66;
    --content-top: 91;
    --content-height: 331;
    --infobox-height: 41;
    
    /* Horizontal spacing */
    --back-button-left: 18;
    --title-center: 170; /* center of 340 */
    --gamecode-right: 18;
    
    /* Content dimensions */
    --content-left: 46;
    --content-width: 219;
    
    /* Button dimensions */
    --button-width: 200;
    --button-height: 40;
    --msgbox-button-width: 90;
    --msgbox-button-height: 30;
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--card-red);
    overflow: hidden;
}

/* Card container - responsive scaling */
.card-container {
    position: relative;
    width: var(--bg-width);
    height: var(--bg-height);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Responsive breakpoints */
/* Extra small phones (< 360px) */
@media (max-width: 359px) {
    .card-container {
        width: calc(100vw - 20px);
        height: calc((100vw - 20px) * var(--bg-aspect));
        max-height: calc(100vh - 20px);
    }
}

/* Small phones (360-480px) */
@media (min-width: 360px) and (max-width: 480px) {
    .card-container {
        width: min(var(--bg-width), calc(100vw - 30px));
        height: calc(min(var(--bg-width), calc(100vw - 30px)) * var(--bg-aspect));
        max-height: calc(100vh - 30px);
    }
}

/* Medium phones & small tablets (481-768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .card-container {
        width: min(calc(var(--bg-width) * 1.3), calc(100vw - 40px));
        height: calc(min(calc(var(--bg-width) * 1.3), calc(100vw - 40px)) * var(--bg-aspect));
        max-height: calc(100vh - 40px);
    }
}

/* Tablets & desktop (> 768px) */
@media (min-width: 769px) {
    .card-container {
        width: min(calc(var(--bg-width) * 1.5), 480px);
        height: calc(min(calc(var(--bg-width) * 1.5), 480px) * var(--bg-aspect));
    }
}

/* Large desktop (> 1200px) */
@media (min-width: 1200px) {
    .card-container {
        width: min(calc(var(--bg-width) * 2), 640px);
        height: calc(min(calc(var(--bg-width) * 2), 640px) * var(--bg-aspect));
    }
}

/* ========================================
   TEST MODE: Android 8A Simulation for PC
   ======================================== */
/* Add class 'test-android' to body to simulate Android 8A (360px viewport width) */
/* Android 8A (Pixel 8a) viewport: ~360px width, aspect ratio matches card */
body.test-android {
    max-width: 360px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

body.test-android .card-container {
    width: 360px !important;
    height: calc(360px * var(--bg-aspect)) !important;
    max-width: 360px;
    margin: 0 auto;
}

/* Ensure body doesn't expand beyond test width */
body.test-android {
    overflow-x: hidden;
}

/* ========================================
   MESSAGEBOX - ENHANCED MULTI-BUTTON SYSTEM
   ======================================== */

/* Base messagebox - Top notification area with flexible button layout */
.message-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(var(--messagebox-height) / var(--bg-height) * 100%);
    background-color: var(--card-gold);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: clamp(11px, 3vw, 14px);
    color: #333;
    padding: 3px 10px;
    text-align: center;
    z-index: 100;
    border-bottom: 2px solid var(--card-gold-dark);
    box-sizing: border-box;
}

/* Message text area */
.message-box-text {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 5px;
    line-height: 1.2;
}

/* Button container within messagebox */
.message-box-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 3px;
}

/* Messagebox button base styles */
.msgbox-btn {
    flex: 0 0 auto;
    min-width: calc(var(--msgbox-button-width) / var(--bg-width) * 100%);
    height: calc(var(--msgbox-button-height) / var(--bg-height) * 100%);
    padding: 0 8px;
    border: 2px solid;
    border-radius: 5px;
    font-size: clamp(10px, 2.5vw, 12px);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Button style variants */
.msgbox-btn.primary {
    background-color: var(--card-green);
    border-color: #2e7d32;
    color: white;
}

.msgbox-btn.primary:hover {
    background-color: #45a049;
}

.msgbox-btn.secondary {
    background-color: #6c757d;
    border-color: #5a6268;
    color: white;
}

.msgbox-btn.secondary:hover {
    background-color: #5a6268;
}

.msgbox-btn.danger {
    background-color: #dc3545;
    border-color: #a71d2a;
    color: white;
}

.msgbox-btn.danger:hover {
    background-color: #c82333;
}

.msgbox-btn.info {
    background-color: var(--card-blue);
    border-color: #1976D2;
    color: white;
}

.msgbox-btn.info:hover {
    background-color: #1976D2;
}

.msgbox-btn.warning {
    background-color: var(--card-orange);
    border-color: #d68400;
    color: white;
}

.msgbox-btn.warning:hover {
    background-color: #d68400;
}

/* Layout variants for different button counts */

/* Single button - centered */
.message-box-buttons.single {
    justify-content: center;
}

.message-box-buttons.single .msgbox-btn {
    min-width: calc(100 / var(--bg-width) * 100%);
}

/* Two buttons - split evenly */
.message-box-buttons.dual {
    justify-content: space-between;
    padding: 0 5px;
}

.message-box-buttons.dual .msgbox-btn {
    flex: 1;
    max-width: calc(140 / var(--bg-width) * 100%);
}

/* Three buttons - left, center, right */
.message-box-buttons.triple {
    justify-content: space-between;
    padding: 0 5px;
}

.message-box-buttons.triple .msgbox-btn {
    flex: 1;
    max-width: calc(95 / var(--bg-width) * 100%);
}

/* Four buttons - grid layout (2x2 stacked) */
.message-box-buttons.quad {
    flex-wrap: wrap;
    gap: 4px;
}

.message-box-buttons.quad .msgbox-btn {
    flex: 0 0 calc((100% - 10px) / 2);
    max-width: calc(145 / var(--bg-width) * 100%);
}

/* Specific positioning classes for three-button layout */
.msgbox-btn.left {
    margin-right: auto;
}

.msgbox-btn.center {
    margin: 0 auto;
}

.msgbox-btn.right {
    margin-left: auto;
}

/* ========================================
   CONTROLS BOX - PERSISTENT HOST CONTROLS
   ======================================== */

/* Controls box - Overlayed at top edge of background image */
.controls-box {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 330px; /* Match background image width */
    height: calc(var(--controlsbox-height) / var(--bg-height) * 100%);
    background-color: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 10px;
    z-index: 90;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
}

/* Control box buttons */
.control-btn {
    flex: 0 0 auto;
    min-width: calc(70 / var(--bg-width) * 100%);
    height: calc(20 / var(--bg-height) * 100%);
    padding: 0 6px;
    border: 2px solid;
    border-radius: 4px;
    font-size: clamp(9px, 2.2vw, 11px);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ensure buttons are visible on red background */
    background-color: var(--card-gold); /* Default background */
    color: #333; /* Default text color */
    border-color: var(--card-gold-dark); /* Default border */
}

/* Control button variants */
.control-btn.host {
    background-color: var(--card-gold);
    border-color: var(--card-gold-dark);
    color: #333;
}

.control-btn.host:hover {
    background-color: var(--card-orange);
}

.control-btn.action {
    background-color: var(--card-green);
    border-color: #2e7d32;
    color: white;
}

.control-btn.action:hover {
    background-color: #45a049;
}

.control-btn.danger {
    background-color: #dc3545;
    border-color: #a71d2a;
    color: white;
}

.control-btn.danger:hover {
    background-color: #c82333;
}

.control-btn.info {
    background-color: var(--card-blue);
    border-color: #1976D2;
    color: white;
}

.control-btn.info:hover {
    background-color: #1976D2;
}

/* Control box layout variants */
.controls-box.left {
    justify-content: flex-start;
}

.controls-box.right {
    justify-content: flex-end;
}

.controls-box.spread {
    justify-content: space-between;
    background-color: rgba(139, 0, 0, 0.92); /* Red background instead of white */
}

/* ========================================
   STANDARD LAYOUT ZONES
   ======================================== */

/* Back button */
.back-button {
    position: absolute;
    left: calc(var(--back-button-left) / var(--bg-width) * 100%);
    top: calc(66 / var(--bg-height) * 100%);
    width: calc(55 / var(--bg-width) * 100%);
    height: calc(25 / var(--bg-height) * 100%);
    background-color: #666;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: clamp(10px, 2.5vw, 13px);
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background-color 0.3s ease;
}

.back-button:hover {
    background-color: #444;
}

/* Title/Team info area (center top) */
.title-area {
    position: absolute;
    left: calc(73 / var(--bg-width) * 100%);
    top: calc(58 / var(--bg-height) * 100%);
    width: calc(174 / var(--bg-width) * 100%);
    height: calc(25 / var(--bg-height) * 100%);
    text-align: center;
    font-size: clamp(12px, 3vw, 16px);
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Game code corner - positioned directly opposite the back button (same top, same distance from edge) */
.game-code-corner {
    position: absolute !important;
    right: calc(var(--gamecode-right) / var(--bg-width) * 100%) !important; /* Same distance from right as back button is from left (18px) */
    left: auto !important; /* Ensure left is not set */
    top: calc(66 / var(--bg-height) * 100%) !important; /* Exact same top position as back button */
    min-width: calc(55 / var(--bg-width) * 100%);
    height: calc(25 / var(--bg-height) * 100%); /* Same height as back button */
    background-color: rgba(255, 255, 255, 0.95);
    padding: 3px 8px;
    border-radius: 5px;
    font-size: clamp(10px, 2.5vw, 12px);
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    z-index: 1010; /* Above team display overlay (z-index: 1003) and other content */
}

/* Timer/Team info (alternative positioning) */
.timer-info {
    position: absolute;
    left: calc(73 / var(--bg-width) * 100%);
    top: calc(41 / var(--bg-height) * 100%);
    width: calc(174 / var(--bg-width) * 100%);
    height: calc(55 / var(--bg-height) * 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.team-info {
    font-size: clamp(11px, 2.8vw, 14px);
    font-weight: bold;
    color: #333;
    margin-bottom: 2px;
}

.timer-display {
    font-size: clamp(20px, 5.5vw, 28px);
    font-weight: bold;
    color: #333;
}

.timer-display.warning {
    color: #ff6b00;
}

.timer-display.danger {
    color: #ff0000;
    animation: pulse 0.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Main content area */
.content-area {
    position: absolute;
    left: calc(var(--content-left) / var(--bg-width) * 100%);
    top: calc(var(--content-top) / var(--bg-height) * 100%);
    width: calc(var(--content-width) / var(--bg-width) * 100%);
    height: calc(var(--content-height) / var(--bg-height) * 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Words area */
.words-area {
    position: absolute;
    left: calc(var(--content-left) / var(--bg-width) * 100%);
    top: calc(var(--content-top) / var(--bg-height) * 100%);
    width: calc(var(--content-width) / var(--bg-width) * 100%);
    height: calc(var(--content-height) / var(--bg-height) * 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 5px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Review phase words area - same size */
.words-area-review {
    position: absolute;
    left: calc(var(--content-left) / var(--bg-width) * 100%);
    top: calc(var(--content-top) / var(--bg-height) * 100%);
    width: calc(var(--content-width) / var(--bg-width) * 100%);
    height: calc(var(--content-height) / var(--bg-height) * 100%);
    padding: 5px;
    box-sizing: border-box;
    overflow-y: auto;
}

/* Word items */
.word-item {
    font-family: 'Arial', sans-serif;
    font-size: clamp(14px, 3.8vw, 18px);
    font-weight: bold;
    text-align: center;
    padding: 4px 8px;
    margin-bottom: 5px;
    cursor: pointer;
    color: #333;
    user-select: none;
    line-height: 1.3;
    border-radius: 4px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.word-item:hover {
    background-color: rgba(255, 215, 0, 0.3);
}

.word-item.found {
    background-color: var(--card-green);
    color: white;
}

/* Review phase - words with checkmarks */
.word-item-review {
    font-family: 'Arial', sans-serif;
    font-size: clamp(14px, 3.8vw, 18px);
    font-weight: bold;
    padding: 2px 4px;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    line-height: 1.3;
    flex-shrink: 0;
}

.word-item-review .word-text {
    flex: 1;
    text-align: center;
}

.word-item-review.found .word-text {
    background-color: var(--card-green);
    color: white;
    border-radius: 4px;
    padding: 2px 6px;
}

.check-image {
    width: clamp(20px, 6vw, 28px);
    height: clamp(20px, 6vw, 28px);
    object-fit: contain;
    flex-shrink: 0;
}

/* Primary button (TAP TO START, END TURN, CONFIRM SCORE) */
.primary-button,
.end-turn-button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc((var(--infobox-height) + 15) / var(--bg-height) * 100%);
    width: calc(var(--button-width) / var(--bg-width) * 100%);
    height: calc(var(--button-height) / var(--bg-height) * 100%);
    background-color: #dc3545;
    border: 3px solid #a71d2a;
    border-radius: 8px;
    font-size: clamp(14px, 3.8vw, 18px);
    font-weight: bold;
    cursor: pointer;
    color: white;
    transition: all 0.3s ease;
}

.primary-button:hover,
.end-turn-button:hover {
    background-color: #c82333;
}

.end-turn-button.confirm {
    background-color: var(--card-green) !important;
    border-color: #2e7d32 !important;
}

.end-turn-button.confirm:hover {
    background-color: #45a049 !important;
}

/* Form buttons (generic) */
.form-button {
    width: calc(var(--button-width) / var(--bg-width) * 100%);
    height: calc(var(--button-height) / var(--bg-height) * 100%);
    background-color: var(--card-gold);
    border: 3px solid var(--card-gold-dark);
    border-radius: 8px;
    font-size: clamp(14px, 3.8vw, 18px);
    font-weight: bold;
    cursor: pointer;
    color: #333;
    transition: all 0.3s ease;
}

.form-button:hover {
    background-color: var(--card-orange);
}

.form-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    border-color: #999;
    color: #666;
}

.form-button.secondary {
    background-color: #6c757d;
    border-color: #5a6268;
    color: white;
}

.form-button.secondary:hover {
    background-color: #5a6268;
}

.form-button.danger {
    background-color: #dc3545;
    border-color: #a71d2a;
    color: white;
}

.form-button.danger:hover {
    background-color: #c82333;
}

/* Infobox - Bottom status bar */
.info-box {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(var(--infobox-height) / var(--bg-height) * 100%);
    background-color: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(10px, 2.5vw, 13px);
    color: #666;
    border-top: 1px solid #ddd;
    padding: 0 10px;
    text-align: center;
}

/* Waiting screen */
.waiting-screen {
    position: absolute;
    left: calc(var(--content-left) / var(--bg-width) * 100%);
    top: calc(var(--content-top) / var(--bg-height) * 100%);
    width: calc(var(--content-width) / var(--bg-width) * 100%);
    height: calc(var(--content-height) / var(--bg-height) * 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
}

.waiting-message {
    font-size: clamp(16px, 4.5vw, 20px);
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.current-turn-info {
    font-size: clamp(14px, 3.8vw, 17px);
    color: #666;
    margin-bottom: 15px;
    line-height: 1.4;
}

.players-count {
    font-size: clamp(12px, 3.2vw, 15px);
    color: #333;
    background-color: rgba(240, 240, 240, 0.9);
    padding: 8px 15px;
    border-radius: 6px;
    margin-top: 10px;
}

/* Scores display */
.scores-display {
    background-color: rgba(255, 254, 240, 0.95);
    padding: 10px 15px;
    border-radius: 8px;
    width: 90%;
    margin-top: 15px;
}

.score-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: clamp(13px, 3.5vw, 16px);
    color: #333;
}

/* Spinner */
.spinner {
    border: 4px solid rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    border-top: 4px solid var(--card-gold);
    width: clamp(35px, 10vw, 50px);
    height: clamp(35px, 10vw, 50px);
    animation: spin 1s linear infinite;
    margin: 15px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Flip animation */
.flip-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

/* Scrollbar styling (optional) */
.words-area::-webkit-scrollbar,
.words-area-review::-webkit-scrollbar {
    width: 6px;
}

.words-area::-webkit-scrollbar-track,
.words-area-review::-webkit-scrollbar-track {
    background: transparent;
}

.words-area::-webkit-scrollbar-thumb,
.words-area-review::-webkit-scrollbar-thumb {
    background: rgba(139, 105, 20, 0.3);
    border-radius: 3px;
}

.words-area::-webkit-scrollbar-thumb:hover,
.words-area-review::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 105, 20, 0.5);
}

/* Fade in animation */
.fade-in {
    animation: fadeIn 0.4s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.visible {
    display: block !important;
}

.text-center {
    text-align: center;
}

.text-bold {
    font-weight: bold;
}