/* Player-facing crossword page. Mobile first. */

html, body
{
    margin: 0;
    padding: 0;
}

body
{
    display: flow-root;
}

body
{
    background: #f4f5f7;
}

/* The start, join and loading screens sit in a card just big enough for what is on it. */
.cw-app
{
    display: flex;
    flex-direction: column;
    margin: 12px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    font-family: Poppins, Arial, "Nirmala UI", "Noto Sans Devanagari", Mangal, sans-serif;
    -webkit-text-size-adjust: 100%;
    box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 2px 1px -1px rgb(0 0 0 / 12%);
}

/* Once the game is loaded the card grows: the whole screen on a phone, a tall card of limited width on a laptop or tablet. */
.cw-app.cw-app-game
{
    height: 100vh;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

@media (min-width: 768px)
{
    .cw-app
    {
        max-width: 520px;
        margin: 16px auto;
    }

    .cw-app.cw-app-game
    {
        max-width: 900px;
        height: calc(100vh - 32px);
        height: calc(100dvh - 32px);
        margin: 16px auto;
        border-radius: 4px;
        box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 2px 1px -1px rgb(0 0 0 / 12%);
    }
}

.cw-app .hd-card
{
    box-shadow: none;
    border: 1px solid #e3e6ea;
}

.cw-view
{
    flex: 1 1 auto;
    min-height: 0;
}

.cw-view-game
{
    display: flex;
    flex-direction: column;
}

.cw-form-wrap
{
    max-width: 460px;
    margin: 20px auto;
    padding: 0 12px;
}

.cw-subtitle
{
    color: #666;
    font-size: 13px;
}

/* ---- top bar ---- */
.cw-topbar
{
    background: #fff;
    padding: 6px 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.cw-topbar-line
{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
}

.cw-puzzle-name
{
    font-weight: 600;
    font-size: 15px;
}

.cw-game-code
{
    color: #666;
    font-size: 12px;
}

.cw-status
{
    color: #555;
    font-size: 11px;
}

.cw-player-strip
{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-top: 4px;
}

.cw-player-chip
{
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    margin-right: 12px;
    font-size: 12px;
}

.cw-player-initials
{
    display: inline-block;
    min-width: 24px;
    padding: 1px 4px;
    margin-right: 4px;
    border-radius: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
}

.cw-admin-star
{
    color: #f9a825;
    margin-left: 2px;
}

/* ---- grid ---- */
.cw-grid-container
{
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #dfe3e8;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.cw-grid-content
{
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
}

.cw-grid-svg
{
    display: block;
    background: #fff;
    font-family: Arial, Helvetica, "Nirmala UI", "Noto Sans Devanagari", Mangal, sans-serif;
}

.cw-grid-svg text
{
    pointer-events: none;
}

.cw-zoom-buttons
{
    position: absolute;
    right: 8px;
    top: 8px;
    display: flex;
    flex-direction: column;
}

.cw-zoom-buttons .btn
{
    margin-bottom: 6px;
    background: #fff;
}

.cw-bottombar
{
    background: #fff;
    padding: 6px 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2);
}

.cw-bottombar .btn
{
    margin: 2px 0 2px 6px;
    font-size: 13px;
}

/* ---- panels ---- */
.cw-overlay
{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}

.cw-overlay.d-none
{
    display: none !important;
}

.cw-panel
{
    background: #fff;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cw-panel-header
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #e3e6ea;
}

.cw-panel-body
{
    padding: 12px 14px;
}

.cw-section-title
{
    margin: 14px 0 6px 0;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

@media (min-width: 768px)
{
    .cw-panel
    {
        max-width: 560px;
        height: auto;
        max-height: 92vh;
        border-radius: 6px;
    }
    .cw-panel-small
    {
        max-width: 460px;
    }
}

/* ---- clue picture ---- */
.cw-media-container
{
    position: relative;
    height: 38vh;
    min-height: 200px;
    background: #111;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.cw-media-container.cw-media-full
{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: auto;
    z-index: 1100;
}

.cw-media-content
{
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
}

.cw-media-image
{
    display: block;
    max-width: none;
    -webkit-user-drag: none;
}

.cw-media-note
{
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    text-align: center;
    color: #ddd;
    font-size: 13px;
    padding: 0 12px;
}

.cw-media-buttons
{
    position: absolute;
    right: 8px;
    top: 8px;
    display: flex;
}

.cw-media-buttons .btn
{
    margin-left: 6px;
    background: #fff;
}

.cw-media-credit
{
    padding: 2px 14px;
    font-size: 10px;
    color: #777;
}

/* ---- answer entry and history ---- */
.cw-answer-row
{
    display: flex;
    align-items: center;
}

.cw-answer-row .btn
{
    margin-left: 6px;
    white-space: nowrap;
}

.cw-answer-input
{
    flex: 1 1 auto;
    min-width: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.cw-clue-links
{
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.cw-clue-message
{
    margin-left: 8px;
    font-size: 12px;
    color: #2e7d32;
}

.cw-history-row
{
    display: flex;
    align-items: center;
    padding: 6px 4px;
    border-bottom: 1px solid #eceff1;
}

.cw-history-row.cw-history-current
{
    background: #f1f8e9;
}

.cw-history-text
{
    flex: 1 1 auto;
    font-weight: 600;
    letter-spacing: 2px;
}

.cw-history-time
{
    margin: 0 8px;
    font-size: 11px;
    color: #888;
}

.cw-history-now
{
    font-size: 11px;
    color: #2e7d32;
}

.cw-history-empty
{
    font-size: 13px;
    color: #888;
}

/* ---- results ---- */
.cw-result-row
{
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #eceff1;
}

.cw-result-name
{
    flex: 1 1 auto;
}

.cw-result-score
{
    font-weight: 600;
}

.cw-result-clue
{
    padding: 5px 4px;
    font-size: 13px;
    border-bottom: 1px solid #eceff1;
    cursor: pointer;
}

.cw-clue-correct
{
    border-left: 4px solid #2e7d32;
}

.cw-clue-wrong
{
    border-left: 4px solid #c62828;
}

.cw-result-points
{
    float: right;
    color: #666;
}

/* ---- typing into the grid ---- */
.cw-selection-bar
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff8e1;
    padding: 4px 10px;
    border-top: 1px solid #ffe082;
}

.cw-selection-bar.d-none
{
    display: none !important;
}

.cw-selected-clue
{
    font-weight: 600;
    font-size: 13px;
}

.cw-typing-input
{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    font-size: 16px;
}

.cw-panel-hint
{
    font-size: 12px;
    color: #666;
}

/* ---- clue arrows and the players drop-down ---- */
.cw-cell-arrow
{
    position: absolute;
    font-size: 9px;
    line-height: 1;
    color: #b4bcc7;
    pointer-events: none;
}

.cw-topbar-players
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 4px;
}

.cw-players-dropdown
{
    position: relative;
}

.cw-players-menu
{
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 20;
    min-width: 220px;
    max-height: 50vh;
    overflow-y: auto;
    margin-top: 4px;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.cw-players-menu.d-none
{
    display: none !important;
}

.cw-players-menu-row
{
    padding: 5px 12px;
}

.cw-wants-reveal
{
    color: #78909c;
    margin-left: 2px;
}

/* ---- links, branding, player answers ---- */
.cw-grid-container.cw-hover-link
{
    cursor: pointer;
}

.cw-players-menu-row
{
    cursor: pointer;
}

.cw-players-menu-row:hover
{
    background: #f4f6f8;
}

#cwMeChip .cw-player-chip
{
    cursor: pointer;
}

.cw-brand-logo
{
    width: 28px;
    height: 28px;
    margin-right: 8px;
    border-radius: 7px;
}

.cw-brand
{
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #1565c0;
}

.cw-brand i
{
    margin-right: 8px;
    font-size: 18px;
}

.cw-topbar-title
{
    display: flex;
    align-items: baseline;
}

.cw-home-link
{
    margin-right: 12px;
    font-size: 12px;
    color: #1565c0;
    white-space: nowrap;
}

.cw-player-answer-row
{
    display: flex;
    align-items: center;
    padding: 7px 4px;
    border-bottom: 1px solid #eceff1;
    cursor: pointer;
}

.cw-player-answer-row:hover
{
    background: #f4f6f8;
}

.cw-player-answer-clue
{
    min-width: 76px;
    font-size: 13px;
}

/* ---- home page ---- */
.cw-home-wrap
{
    max-width: 560px;
    margin: 8vh auto 0 auto;
    padding: 0 12px;
}

/* wide screens: the branding and the actions are a card on the left, the information cards a column on the right; a phone shows them one after the other */
@media (min-width: 900px)
{
    .cw-home-wrap
    {
        display: grid;
        grid-template-columns: 420px 1fr;
        gap: 16px;
        align-items: stretch;
        max-width: 1040px;
        margin-top: 6vh;
    }

    /* the left card is as tall as the three cards on the right: the logo and tagline stay at the top, and the extra height is shared
       equally between the sections (the header, Start, Join and, when there is one, the puzzle of the day) */
    .cw-home-left
    {
        display: flex;
    }

    .cw-home-left .cw-home-card
    {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    .cw-home-left .cw-home-options
    {
        display: contents;
    }

    .cw-home-right .cw-home-info:first-child
    {
        margin-top: 0;
    }
}

.cw-home-card
{
    text-align: center;
    padding: 28px 22px;
}

.cw-home-logo
{
    width: 112px;
    height: 112px;
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(40, 40, 120, 0.25);
}

.cw-home-mark
{
    font-size: 44px;
    color: #1565c0;
}

.cw-home-title
{
    margin: 10px 0 4px 0;
    font-size: 26px;
    font-weight: 600;
}

.cw-home-tagline
{
    margin-bottom: 24px;
    color: #666;
    font-size: 14px;
}

.cw-home-options
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cw-home-option
{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 16px 0;
    padding: 6px 18px;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.cw-home-option:hover
{
    text-decoration: none;
    transform: translateY(-2px);
}

.cw-home-option-icon
{
    margin-bottom: 8px;
    font-size: 34px;
    opacity: 0.85;
}

.cw-home-option-text
{
    font-size: 19px;
    font-weight: 300;
    letter-spacing: 0.4px;
}

.cw-home-option-hint
{
    margin-top: 2px;
    font-size: 12px;
    font-weight: 300;
    color: #9aa5b4;
}

.cw-home-option-new,
.cw-home-option-new:hover
{
    color: #6b92c9;
}

.cw-home-option-join,
.cw-home-option-join:hover
{
    color: #5fa59d;
}

.cw-home-option-daily,
.cw-home-option-daily:hover
{
    color: #c4955a;
}

.cw-home-option:hover .cw-home-option-icon,
.cw-home-option:hover .cw-home-option-text
{
    opacity: 1;
}

.cw-home-footer
{
    margin-top: 22px;
    font-size: 12px;
    color: #888;
}

.cw-loading
{
    padding: 48px 16px;
    text-align: center;
    color: #888;
}

.cw-clue-text
{
    padding: 14px 16px;
    font-size: 18px;
    line-height: 1.35;
    color: #222;
    background: #f6f8fb;
    border-bottom: 1px solid #e3e8ef;
}

.cw-video-wrap
{
    background: #111;
}

.cw-video-box
{
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.cw-video-box iframe,
.cw-video-box video
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.cw-sound-box
{
    padding: 10px 14px;
    background: #f6f8fb;
    border-bottom: 1px solid #e3e8ef;
}

.cw-sound-box audio
{
    display: block;
    width: 100%;
}

/* ---- home page: puzzle of the day and the information cards ---- */
.cw-home-info
{
    margin-top: 16px;
    padding: 20px 22px;
}

.cw-home-info-title
{
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
}

.cw-home-steps,
.cw-home-points
{
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
    color: #445;
}

.cw-home-steps li,
.cw-home-points li
{
    margin-bottom: 8px;
}

.cw-home-points
{
    list-style: none;
    padding-left: 0;
}

.cw-home-points i
{
    width: 22px;
    margin-right: 4px;
    color: #6b92c9;
    text-align: center;
}

.cw-home-question
{
    padding: 6px 0;
    border-bottom: 1px solid #eceff1;
    font-size: 14px;
}

.cw-home-question summary
{
    cursor: pointer;
    font-weight: 600;
    color: #345;
}

.cw-home-question p
{
    margin: 6px 0 2px 0;
    color: #556;
}
/* ---- on-screen keyboard (Hindi and Marathi) ---- */
.cw-keyboard
{
    flex: 0 0 auto;
    max-height: 42vh;
    overflow-y: auto;
    background: #e9ecf0;
    padding: 4px 4px 2px 4px;
    border-top: 1px solid #c9ced6;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.cw-keyboard-row
{
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 4px;
}
.cw-key
{
    flex: 1 0 8%;
    min-width: 30px;
    height: 36px;
    padding: 0 2px;
    border: 1px solid #b9bfc9;
    border-radius: 5px;
    background: #fff;
    font-size: 18px;
    line-height: 1;
    font-family: "Nirmala UI", "Noto Sans Devanagari", Mangal, Arial, sans-serif;
    color: #222;
}
.cw-key:active
{
    background: #ffd54f;
}
.cw-key-wide
{
    flex: 2 0 14%;
}
.cw-keyboard-marks .cw-key
{
    font-size: 17px;
}
/* ---- small text links (under a text box, in the top bar) ---- */
.cw-small-link
{
    font-size: 12px;
    color: #1565c0;
    cursor: pointer;
}

.cw-below-input
{
    margin-top: 1px;
    line-height: 1.2;
}

.cw-link-gap
{
    display: inline-block;
    width: 14px;
}

.cw-game-code-block
{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}