/* =========================================================
   KOILANI HANGMAN - FINAL STYLESHEET
   Supports: Desktop (Fixed Header) & Mobile (iPhone 16 Pro)
   ========================================================= */

/* --- 1. VARIABLES & SAFE AREA (Dynamic Island Support) --- */
:root {
    /* "env" reads the iPhone's safe area inset values */
    --sat: env(safe-area-inset-top, 0px);
    --sar: env(safe-area-inset-right, 0px);
    --sab: env(safe-area-inset-bottom, 20px);
    --sal: env(safe-area-inset-left, 0px);
}

body {
    display: block;
    font-family: "Open Sans", sans-serif;
    margin: 0;
    background-color: antiquewhite;
    /* Apply Safe Areas to the entire page body */
    padding-top: var(--sat);
    padding-bottom: var(--sab);
    padding-left: var(--sal);
    padding-right: var(--sar);
    overflow-x: hidden; /* Prevents horizontal scrollbar */
}

/* =========================================================
   2. HEADER & LOGO POSITIONING (PC / DESKTOP)
   ========================================================= */

/* The Sticky Header Bar */
.top-bar-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Fixed height is required for the "hanging" calculation */
    background-color: rgb(247, 225, 195);
    border-bottom: 2px solid rgb(133, 105, 67);
    display: flex;
    justify-content: space-between; /* Pushes Auth links Left, Lang links Right */
    align-items: center;
    padding: 0 5%; /* Horizontal padding for the links */
    z-index: 9999;
    box-sizing: border-box; /* Ensures padding doesn't expand width */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* The Hanging Logo Container */
.logo-hanger {
    display: block;
    position: absolute; /* Remove from flow to overlay */
    /* ROBUST CENTERING TRICK: */
    left: 0;
    right: 0;
    width: 120px; /* Must match the image width */
    margin: 0 auto; /* Auto margins center it perfectly horizontally */

    top: 100%; /* Push top edge to the bottom line of the header */
    transform: translateY(-50%); /* Pull it UP by half its height to "hang" */

    z-index: 10001; /* Must be higher than header border */
    pointer-events: none; /* Allows clicking things 'under' the invisible box corners if any */
}

.main-logo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: rgb(247, 225, 195);
    object-fit: contain;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    pointer-events: auto; /* Re-enable clicking on the logo itself */
}

/* Header Links Styling */
.auth-header-links a {
    color: #2e2417;
    text-decoration: none;
    font-weight: bold;
    margin-right: 15px;
    font-family: 'Open Sans', sans-serif;
}

/* Page Wrapper - Pushes content down so Fixed Header doesn't cover it */
.page-wrapper {
    padding-top: 160px; /* 80px Header + 30px Gap */
}

/* =========================================================
   3. SHARED GAME LAYOUT (PC & MOBILE)
   ========================================================= */

/* Main Alignment */
main {
    background-color: antiquewhite;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

/* The Row that holds the two main cards */
.game-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    margin-bottom: 50px !important;
    flex-wrap: wrap;
}
.form-space::placeholder {
    text-indent: 15px; /* Adjust this value to push it further in */
}

/* For modern browsers, also apply to the input itself if not centered */
.form-space {
    text-indent: 15px;
}

.btn-lgap {
    margin-left: 10px;

}
/* SHARED CARD STYLES */
.gameplay-card,

.game-card,
.auth-card {
    background-color: rgb(205, 230, 213);
    border: 1px solid rgba(133, 105, 67, 0.3);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.hangman-card {
    background-color: rgb(205, 230, 213);
    border: 1px solid rgba(133, 105, 67, 0.3);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* PC Specific Sizes - EQUAL WIDTHS FOR SYMMETRY */
.gameplay-card, .hangman-card {
    width: 500px;
    min-width: 500px;
    max-width: 500px; /* Prevents flexing larger */
    min-height: 350px;
}

.auth-card {
    width: 520px;
    min-width: 520px;
}

/* GLOBAL Card Elements */
.input-group, .btn-kcb-style {
    height: 40px;
}

.btn-kcb-style {
    background-color: rgb(255, 219, 0) !important;
    color: #000 !important;
    border: none !important;
    padding: 0 20px !important;
    font-weight: bold !important;
    border-radius: 6px !important;
    box-shadow: 1px 2px 4px rgba(0,0,0,0.2) !important;
    line-height: 40px;
    cursor: pointer;
}
.btn-kcb-style:hover {
    background-color: rgb(255, 214, 0) !important;
}

.form-control {
    border: 1px solid rgba(133, 105, 67, 0.5) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important;
    height: 40px;
}


/* AUTH GAME CARD INTERNAL ELEMENTS STYLES */
.visitor-name-input { min-width: 280px; }
.visitor-btn { margin-left: 15px; }
.kmember-inputs { min-width: 180px; }
.kmember-btn { margin-left: 15px; }
.info-separator {
    margin-top: 10px;
}

/* GAMEPLAY CARD INTERNAL ELEMENTS STYLES */
.badge.bg-dark {
    background-color: rgb(133, 105, 67) !important; /* Bootstrap Dark */
    color: #fff !important;
    padding: 6px 8px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 10px;
}

 .hint-style { 
     font-size: 1.2rem; background-color: rgba(255,255,255,0.5); padding: 5px; border-radius: 12px; 

 }

.stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(217, 244, 225);
    border-radius: 8px;
    padding: 10px 20px;
    margin-bottom: 25px;
    border: 1px solid #ddd;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    /* FIX: Force it to stay inside the card */
    width: 100% !important;
    box-sizing: border-box !important;
}

.stat-item {
    font-size: 1.1rem;
    color: #2e2417;
}
/* HANGMAN CARD INTERNAL ELEMENTS STYLES */
.hangman-image {
    height: auto;
    max-height: 300px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 15px;
}





/* =========================================================
   4. LEADERBOARD & FOOTER
   ========================================================= */
.leaderboard-box {
    background-color: rgb(205, 230, 213) !important;
    border: 1px solid rgba(133, 105, 67, 0.3);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 1000px !important;
    max-width: 95%;
    margin: 0 auto;
    overflow: hidden;
}

.leaderboard-title-row {
    background-color: rgb(205, 230, 213) !important;
    padding: 15px;
    font-weight: bold !important;
    font-size: 1.3rem;
    color: #2e2417;
    border-bottom: 1px solid rgba(133, 105, 67, 0.2);
}

.table-hangman {
    width: 100%;
    white-space: nowrap !important;
}

    .table-hangman thead tr {
        background-color: rgb(56, 176, 166) !important;
        color: white;
    }

    .table-hangman tbody tr:nth-child(odd) {
        background-color: lightblue !important;
    }

    .table-hangman tbody tr:nth-child(even) {
        background-color: white !important;
    }

#footer-content {
    background-color: rgb(214, 176, 124) !important;
    width: 560px;
    max-width: 95%;
    margin: 40px auto !important;
    border-radius: 8px;
    text-align: center;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.visitor-footer {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* =========================================================
   5. MOBILE LOGO & ANIMATIONS
   ========================================================= */
.logo-desktop {
    display: block;
}

.logo-mobile {
    display: none;
}
/* Hidden on PC */

.victory-card {
    animation: zoomIn 0.8s ease-out;
    background-color: #f7e1c3;
    border: 4px solid #856943;
    border-radius: 20px;
    margin-top: 50px;
    padding: 60px;
    max-width: 700px;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.shake-animation {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

.highlight-new-result td {
    background-color: rgb(143, 143, 9) !important;
    color: white !important;
}
.header-section-left {
    flex: 1; 
    display: flex; 
    align-items: center;
}

.header-section-right {
    flex: 1;
    justify-content: flex-end;
    align-items: center;
    display: flex;
    gap: 20px;
}
.header-container-lang {
    text-decoration: none !important;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}
.header-lang {
    height: 24px;
    width: auto;
    transition: 0.3s;
    display: inline-block;
}
.btn-icon-only {
    text-decoration: none !important;
    border-bottom: none !important;
    outline: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important; /* Removes the shadow inherited from other button styles */
    color: #4e3c25 !important; /* Your requested color */
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: 1.4rem; /* Adjust this to make the icon larger or smaller */
    transition: transform 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Optional: Add a subtle hover effect so the user knows it's clickable */
    .btn-icon-only:hover {
        color: #856943 !important; /* Changes to your gold/brown accent on hover */
        transform: scale(1.1);
    }

/* Container for the Globe and Chevron */
.lang-selector-btn {
    position: relative; /* Essential for positioning the dropdown */
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #2e2417;
    font-size: 1.3rem;
    padding: 10px;
    z-index: 10002;
}

.lang-chevron {
    font-size: 0.7rem;
    margin-left: 6px;
    transition: transform 0.3s ease;
}

/* The actual dropdown box */
.lang-dropdown-content {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%;
    right: 0;
    background-color: rgb(247, 225, 195);
    border: 1px solid rgb(133, 105, 67);
    border-radius: 8px;
    min-width: 140px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    padding: 10px 0;
}

/* Show the menu and rotate chevron on hover */
.lang-selector-btn:hover .lang-dropdown-content {
    display: block;
}

.lang-selector-btn:hover .lang-chevron {
    transform: rotate(180deg);
}

/* Links inside the dropdown */
.lang-dropdown-content a {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    color: #2e2417;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
    transition: background 0.2s;
}

    .lang-dropdown-content a:hover {
        background-color: rgba(133, 105, 67, 0.1);
    }

.lang-dropdown-content img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border-radius: 50%;
}

/* Highlight the current language */
.active-lang {
    color: #856943 !important;
    background-color: rgba(133, 105, 67, 0.05);
}

/* 1. Reset individual margins to prevent "double spacing" */
.header-section-right .btn-icon-only,
.header-section-right .lang-selector-btn {
    margin: 0 !important;
    padding: 0 5px !important; /* Small internal breathing room */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px; /* Ensures all "hitboxes" are at least this wide */
    height: 40px;
}

/* 2. Control the actual gap between the items */
.header-section-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* CHANGE THIS VALUE to your liking (e.g., 15px or 20px) */
    gap: 10px !important;
}

/* 3. Minor tweak for the Globe icon */
/* Since the globe has a chevron, it can look "pushed" to the left. 
   We ensure the globe + chevron are treated as one unit. */
.lang-selector-btn {
    gap: 4px; /* Space specifically between globe and chevron */
}
.status-message-container-pc {
    width: 100%;
    transition: opacity 0.3s ease;
}
.status-message-container-mobile {
    display:none;
}

/* =========================================================
   6. MOBILE OVERRIDES (Max-Width 992px)
   ========================================================= */
@media (max-width: 992px) {
    /* --- RESET HEADER (Scrolls naturally) --- */
    .top-bar-container {
        position: fixed;
        display: flex;
        height: 60px;
        /*      flex-direction: column !important; Stack items vertically 
        padding: 15px !important;
        gap: 15px;
        */
        flex-direction: row !important; /* Force items to stay in one row */
        justify-content: space-between !important; /* Left stays left, Right stays right */
        align-items: center !important;
        padding: 0 15px !important;
        background-color: rgb(247, 225, 195);
        z-index: 10005;
    }

    .header-section-left {
        flex: 1;
        display: flex;
        align-items: center;
        overflow: hidden; /* Safety for name truncation */
        font-size: 0.8rem; /* Slightly smaller text for mobile */
    }

    .header-section-right {
        flex: 0 0 auto;
        display: flex;
        gap: 8px; /* Tighter gap for mobile icons */
        align-items: center;
    }

    .btn-icon-only {
        font-size: 1.1rem !important;
    }
    /* Adjust page wrapper to match the new fixed mobile header height */
    .page-wrapper {
        padding-top: 75px !important;
    }

    .container, .page-wrapper {
        max-width: 100vw !important;
        overflow-x: hidden !important; /* The 'Horizontal Scroll' Prohibition rule */
    }

    .badge {
        display: none !important;
    }
    /* Hide badges on mobile for space */
    /* MOBILE LEADERBOARD */

    .table-hangman th:nth-child(3),
    .table-hangman td:nth-child(3),
    .table-hangman th:nth-child(5),
    .table-hangman td:nth-child(5),
    .table-hangman th:nth-child(6),
    .table-hangman td:nth-child(6) {
        display: none !important;
    }

    .table-hangman {
        width: 100% !important;
        table-layout: fixed; /* Ensures columns stay within bounds */
    }

        .table-hangman td:nth-child(2) {
            word-wrap: break-word;
            overflow-wrap: break-word;
            white-space: normal !important; /* Allows moving to new line */
            font-size: 0.85rem;
            max-width: 120px; /* Constrains the width to force the wrap */
        }

    .leaderboard-box {
        width: 100% !important;
        overflow-x: hidden !important; /* STRICTLY PROHIBITED horizontal scroll */
        padding: 0 !important;
    }

    #footer-content {
        width: 92% !important; /* Matches your card widths */
        max-width: 1000px !important;
        margin: 20px auto !important;
        box-sizing: border-box !important;
    }
    /* Remove top gap since header isn't fixed */
    /* --- SWAP LOGOS --- */
    /* Hide the hanging desktop logo completely */
    .logo-desktop, .logo-hanger {
        display: none !important;
    }
    /* Show the mobile logo near footer */
    .logo-mobile {
        display: block !important;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }

        .logo-mobile img {
            max-height: 100px;
            width: auto;
        }
    /* --- STACK GAME CARDS --- */
    .game-row {
        flex-direction: column !important; /* Stack Top to Bottom */
        width: 100% !important;
        gap: 20px !important;
        margin-bottom: 30px !important;
    }
    /* Resize Cards to fit Screen Width - UPDATED TO 95% */
    .gameplay-card,
    .hangman-card,
    .auth-card,
    .game-card {
        /* FIX: Ensure min-width doesn't force it wider than the screen */
        min-width: 0 !important;
        width: 92% !important;
        max-width: 92% !important;
        box-sizing: border-box !important; /* Includes padding in the 95% width */
        margin: 0 auto 20px auto !important;
        padding: 15px !important;
    }
    .hangman-card {
        max-height: 150px !important;
    }

    .form-mobile {
        max-width: 100px !important;
    }
    /* MOBILE AUTH GAME CARD INTERNAL ELEMENTS STYLES */
    .visitor-name-input {
        min-width: 270px;
    }

    .visitor-btn {
        margin-left: 0px;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .info-separator {
        margin-top: 0px;
    }

    .kmember-inputs {
        min-width: 270px;
    }

    .kmember-inputs-mobile-separator {
        margin-top: 10px;
    }

    .kmember-btn {
        margin-left: 0px;
        margin-top: 15px;
        margin-bottom: 15px;
    }


    .hangman-image {
        max-height: 200px;
    }

    .gameplay-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important; /* Pushes content to top and input to bottom */
        align-items: center !important;
        height: auto !important; /* Let it grow but keep content spaced */
        min-height: 380px !important; /* Give it a consistent base height */
    }
    /* 2. Fix the Input Group horizontal alignment */
    .input-group {
        display: flex !important;
        flex-direction: row !important; /* Force side-by-side */
        justify-content: center !important; /* Center the whole group */
        align-items: stretch !important; /* Makes input and button same height */
        width: 100% !important;
        margin-top: auto !important; /* Pushes the group to the bottom of the card */
        margin-bottom: 10px !important;
        height: 48px !important; /* Matching height for both */
    }
    /* 3. Perfect vertical alignment for the input and button */
    .form-mobile, .btn-lgap {
        margin: 0px !important;
        box-sizing: border-box !important;
        line-height: 1 !important; /* Ensures text doesn't push the box open */
        padding: 0 15px !important; /* Consistent horizontal padding */
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.1rem !important; /* Keep text scale identical */
        border: 1px solid #2e2417 !important; /* Ensure they share the exact same border width */
    }


    .form-mobile {
        text-indent: 0px;
        text-align: center !important;
    }

    .btn-lgap {
        margin-left: 10px !important;
        flex: 0 1 auto !important;
    }

    .status-message-container-pc {
        display: none;
    }

    .status-message-container-mobile {
        display: block !important;
    }
    .status-message-container-mobile.d-lg-none {

        margin-top: -5px; /* Pulls it closer to the word */
        margin-bottom: 5px;
    }

    .status-message-container-mobile .alert {
        background: transparent !important;
        border: none !important;
        color: #2e2417 !important;
        font-weight: normal;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* --- INTERNAL CONTENT ADJUSTMENTS --- */
    /* Ensure long words break into two lines if needed */
    #word-container {
        margin-bottom: 0 !important; /* Remove gap below word */
        padding-bottom: 0 !important;
    }

        #word-container h2 {
            width: 100%;
            font-size: 1.8rem !important; /* Slightly smaller text for mobile */
            word-break: break-word; /* Prevents overflow */
            word-wrap: break-word;
            overflow-wrap: break-word;
            line-height: 1.2;
        }
    /* Ensure stats (Score/Lives) don't get squashed */
    .stats-row {
        margin-top: 5px !important;
        flex-wrap: wrap; /* Allow wrapping if numbers get big */
        justify-content: center; /* Keep them centered if they wrap */
        gap: 10px; /* Space between items when wrapped */
    }

    .stat-item {
        flex: 0 0 auto; /* Don't shrink/grow weirdly */
        white-space: nowrap; /* Keep "Score: 100" together */
    }
}
.kp-header-title {
    margin: 0;
    font-size: 1.1em; /* Desktop size */
    letter-spacing: 1px;
    z-index: 1;
}

/* --- SMALL PHONE SPECIFIC (iPhone 16 Pro Portrait) --- */
@media (max-width: 500px) {
    .kp-header-title {
        font-size: 3vw; /* Much smaller and cleaner for mobile */
        line-height: 1.2; /* Keeps the two lines nicely stacked */
    }

    .stats-row {
        padding: 8px 10px;
    }

    .stat-item {
        font-size: 0.9rem;
    }

    .input-group .form-control {
        font-size: 1.2rem;
    }
    /* Prevent iOS zoom on focus */
}