/**

 * @author      Mike Fairbrother <mike@fairbrother.me>

 * @copyright   2024-2026 Mike Fairbrother. All rights reserved.

 * @license     PROPRIETARY - No rights to copy, modify, distribute, or reuse

 *              any part of this code without explicit written permission from the author.

 */

/* ============================================================


   Emojidoku - Game-Specific Styles


   ============================================================ */





/* ---- Menu Screen ---- */


.emo-logo {


    display: flex;


    gap: 6px;


    justify-content: center;


    margin-bottom: 8px;


}


.emo-logo-emoji {


    font-size: 36px;


    animation: emo-bob 2s ease-in-out infinite;


}


.emo-logo-emoji:nth-child(2) { animation-delay: 0.15s; }


.emo-logo-emoji:nth-child(3) { animation-delay: 0.3s; }


.emo-logo-emoji:nth-child(4) { animation-delay: 0.45s; }





@keyframes emo-bob {


    0%, 100% { transform: translateY(0); }


    50% { transform: translateY(-6px); }


}





.emo-title {


    font-size: 42px;


    font-weight: 900;


    background: linear-gradient(135deg, #ffd93d, #ff6b6b);


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


    background-clip: text;


    margin-bottom: 4px;


}


.emo-subtitle {


    font-size: 15px;


    color: var(--gp-text-secondary);


    margin-bottom: 20px;


}





/* Menu stats row */


.emo-menu-stats {


    display: flex;


    gap: 20px;


    justify-content: center;


    margin-bottom: 20px;


}


.emo-menu-stat {


    display: flex;


    flex-direction: column;


    align-items: center;


}


.emo-menu-stat-val {


    font-size: 20px;


    font-weight: 800;


    color: var(--gp-accent);


    font-variant-numeric: tabular-nums;


}


.emo-menu-stat-lbl {


    font-size: 10px;


    color: var(--gp-text-secondary);


    text-transform: uppercase;


    letter-spacing: 1px;


    font-weight: 600;


}





/* Toggle groups (mode, challenge) */


.emo-toggle-group {


    display: flex;


    gap: 0;


    background: rgba(255, 255, 255, 0.06);


    border-radius: var(--gp-radius-sm);


    overflow: hidden;


    margin-bottom: 12px;


    width: 220px;


}


.emo-toggle-btn {


    flex: 1;


    padding: 10px 0;


    border: none;


    background: transparent;


    color: var(--gp-text-secondary);


    font-family: var(--gp-font-stack);


    font-size: 14px;


    font-weight: 700;


    cursor: pointer;


    transition: all var(--gp-transition-fast);


}


.emo-toggle-btn.active {


    background: rgba(255, 217, 61, 0.2);


    color: var(--gp-accent);


}





/* Difficulty pills */


.emo-difficulty-group {


    display: flex;


    gap: 6px;


    margin-bottom: 20px;


    flex-wrap: wrap;


    justify-content: center;


}


.emo-diff-btn {


    padding: 8px 14px;


    border: 1px solid rgba(255, 255, 255, 0.1);


    border-radius: 20px;


    background: transparent;


    color: var(--gp-text-secondary);


    font-family: var(--gp-font-stack);


    font-size: 13px;


    font-weight: 600;


    cursor: pointer;


    transition: all var(--gp-transition-fast);


}


.emo-diff-btn.active {


    background: rgba(255, 217, 61, 0.15);


    border-color: var(--gp-accent);


    color: var(--gp-accent);


}





/* ---- Game Screen ---- */


.emo-hud-diff {


    font-size: 16px;


}





/* Grid wrapper - centres grid and constrains size */


.emo-grid-wrapper {


    flex: 1;


    display: flex;


    align-items: center;


    justify-content: center;


    padding: 6px 6px 0;


    min-height: 0;


}





/* Sudoku grid table */


.emo-grid {


    border-collapse: collapse;


    border: 2px solid rgba(255, 255, 255, 0.5);


    background: rgba(0, 0, 0, 0.25);


    border-radius: 4px;


    table-layout: fixed;


    aspect-ratio: 1;


    /* width will be set by JS for responsive sizing */


}





.emo-grid td {


    width: 11.111%;


    aspect-ratio: 1;


    text-align: center;


    vertical-align: middle;


    border: 1px solid rgba(255, 255, 255, 0.12);


    padding: 0;


    position: relative;


    cursor: pointer;


    transition: background var(--gp-transition-fast);


    font-variant-numeric: tabular-nums;


}





.emo-grid-6 td {
    width: 16.667%;
}

/* Box borders */


.emo-grid td.emo-box-right {


    border-right: 2px solid rgba(255, 255, 255, 0.45);


}


.emo-grid td.emo-box-bottom {


    border-bottom: 2px solid rgba(255, 255, 255, 0.45);


}





/* Cell states */


.emo-grid td.emo-given {


    color: rgba(255, 255, 255, 0.85);


    font-weight: 700;


}


.emo-grid td.emo-user {


    color: var(--gp-accent);


    font-weight: 600;


}


.emo-grid td.emo-selected {


    background: rgba(255, 217, 61, 0.25) !important;


    box-shadow: inset 0 0 0 2px var(--gp-accent);


}


.emo-grid td.emo-highlight {


    background: rgba(255, 217, 61, 0.08);


}


.emo-grid td.emo-same-value {


    background: rgba(255, 217, 61, 0.14);


}


.emo-grid td.emo-error {


    color: var(--gp-danger) !important;


    animation: emo-shake 0.3s ease;


}


.emo-grid td.emo-error-bg {


    background: rgba(255, 71, 87, 0.15) !important;


}


.emo-grid td.emo-hint {


    animation: emo-hint-pop 0.5s ease;


    color: var(--gp-success) !important;


}





@keyframes emo-shake {


    0%, 100% { transform: translateX(0); }


    25% { transform: translateX(-3px); }


    75% { transform: translateX(3px); }


}


@keyframes emo-hint-pop {


    0% { transform: scale(0.5); opacity: 0; }


    60% { transform: scale(1.2); }


    100% { transform: scale(1); opacity: 1; }


}





/* Cell content - emoji or number */


.emo-cell-value {


    display: flex;


    align-items: center;


    justify-content: center;


    width: 100%;


    height: 100%;


    position: absolute;


    inset: 0;


    line-height: 1;


}


.emo-cell-value.emo-emoji {


    font-size: clamp(16px, 4.5vw, 28px);


}


.emo-cell-value.emo-number {


    font-size: clamp(16px, 4.5vw, 26px);


}





/* Notes / candidates */


.emo-cell-notes {


    display: grid;


    grid-template-columns: repeat(3, 1fr);


    grid-template-rows: repeat(3, 1fr);


    position: absolute;


    inset: 1px;


    pointer-events: none;


}


.emo-note {


    display: flex;


    align-items: center;


    justify-content: center;


    line-height: 1;


}


.emo-note.emo-emoji {


    font-size: clamp(7px, 1.8vw, 11px);


}


.emo-note.emo-number {


    font-size: clamp(7px, 2vw, 11px);


    color: rgba(255, 255, 255, 0.45);


    font-weight: 600;


}





/* ---- Controls Area ---- */


.emo-controls {


    padding: 6px 8px 12px;


    display: flex;


    flex-direction: column;


    gap: 8px;


    flex-shrink: 0;


}





/* Input pad - 9 buttons + optional erase */


.emo-input-pad {


    display: grid;


    grid-template-columns: repeat(9, 1fr);


    gap: 4px;


}


.emo-pad-btn {


    aspect-ratio: 1;


    border: none;


    border-radius: var(--gp-radius-sm);


    background: rgba(255, 255, 255, 0.08);


    color: #fff;


    cursor: pointer;


    display: flex;


    align-items: center;


    justify-content: center;


    transition: all var(--gp-transition-fast);


    position: relative;


    min-height: 36px;


}


.emo-pad-btn:active {


    transform: scale(0.9);


    background: rgba(255, 217, 61, 0.3);


}


.emo-pad-btn.emo-pad-emoji {


    font-size: clamp(16px, 4.5vw, 24px);


}


.emo-pad-btn.emo-pad-number {


    font-size: clamp(16px, 4.5vw, 22px);


    font-weight: 800;


}


.emo-pad-btn.emo-pad-complete {


    opacity: 0.3;


    pointer-events: none;


}


.emo-pad-btn .emo-pad-count {


    position: absolute;


    top: 2px;


    right: 3px;


    font-size: 8px;


    color: var(--gp-text-secondary);


    font-weight: 700;


}





/* Action buttons row */


.emo-action-bar {


    display: flex;


    gap: 6px;


    justify-content: center;


}


.emo-action-btn {


    flex: 1;


    max-width: 80px;


    padding: 8px 4px 6px;


    border: none;


    border-radius: var(--gp-radius-sm);


    background: rgba(255, 255, 255, 0.06);


    color: var(--gp-text-secondary);


    cursor: pointer;


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: 2px;


    font-family: var(--gp-font-stack);


    transition: all var(--gp-transition-fast);


}


.emo-action-btn:active {


    background: rgba(255, 255, 255, 0.12);


}


.emo-action-btn.active {


    background: rgba(255, 217, 61, 0.15);


    color: var(--gp-accent);


}


.emo-action-icon {


    font-size: 18px;


    line-height: 1;


}


.emo-action-label {


    font-size: 10px;


    font-weight: 600;


    text-transform: uppercase;


    letter-spacing: 0.5px;


}





/* ---- Complete Screen ---- */


.emo-complete-emojis {


    font-size: 40px;


    margin-bottom: 8px;


    animation: gp-badge-pop 0.5s ease 0.2s both;


}


.emo-complete-title {


    font-size: 28px;


    font-weight: 900;


    margin-bottom: 16px;


    background: linear-gradient(135deg, #ffd93d, #2ed573);


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


    background-clip: text;


}


.emo-daily-badge {


    display: inline-block;


    padding: 6px 16px;


    border-radius: 20px;


    background: linear-gradient(135deg, #ffd93d, #ff9f43);


    color: #1a1640;


    font-size: 13px;


    font-weight: 800;


    text-transform: uppercase;


    letter-spacing: 1px;


    margin-bottom: 16px;


    animation: gp-badge-pop 0.4s ease 0.4s both;


}


.emo-stats-grid {


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 12px;


    width: 100%;


    max-width: 260px;


    margin-bottom: 20px;


}


.emo-stat-box {


    background: rgba(255, 255, 255, 0.06);


    border-radius: var(--gp-radius-sm);


    padding: 12px 8px;


    display: flex;


    flex-direction: column;


    align-items: center;


}


.emo-stat-num {


    font-size: 22px;


    font-weight: 800;


    color: var(--gp-accent);


    font-variant-numeric: tabular-nums;


}


.emo-stat-lbl {


    font-size: 10px;


    color: var(--gp-text-secondary);


    text-transform: uppercase;


    letter-spacing: 1px;


    font-weight: 600;


    margin-top: 2px;


}


.emo-best-time {


    color: var(--gp-success);


    font-size: 14px;


    font-weight: 800;


    margin-bottom: 16px;


    animation: gp-badge-pop 0.4s ease 0.6s both;


}





/* ---- Help Modal Sections ---- */


.help-section {


    margin-bottom: 16px;


}


.help-section h4 {


    font-size: 14px;


    font-weight: 700;


    color: var(--gp-accent);


    margin-bottom: 4px;


}


.help-section p {


    font-size: 13px;


    color: var(--gp-text-secondary);


    line-height: 1.5;


}





/* ---- Safe Area ---- */


@supports (padding-bottom: env(safe-area-inset-bottom)) {


    .emo-controls {


        padding-bottom: calc(12px + env(safe-area-inset-bottom));


    }


}





/* ---- Desktop tweaks ---- */


@media (min-width: 421px) {


    .emo-grid {


        max-width: 380px;


    }


}