/* ── Connections Game ── */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&family=Amiri:wght@400;700&display=swap');

:root {
    --cg-yellow: #f9df6d;
    --cg-green:  #a0c35a;
    --cg-blue:   #b0c4ef;
    --cg-purple: #ba81c5;
    --cg-bg:     #F9F9F9;
    --cg-text:   #1a1a1a;
    --cg-border: #d4d4d4;
    --cg-tile-bg:       #efefe6;
    --cg-tile-hover:    #dedede;
    --cg-tile-selected: #1a1a1a;
    --cg-tile-sel-text: #ffffff;
    --cg-radius: 8px;
    --cg-font-ui:      'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    --cg-font-display: 'Amiri', 'Cairo', Georgia, serif;
}

#cg-game-root * { box-sizing: border-box; }

/* Root is LTR — title and chrome stay left-aligned / centered as designed */
#cg-game-root {
    font-family: var(--cg-font-ui);
    max-width: 500px;
    margin: 0 auto;
    padding: 12px 8px 32px;
    color: var(--cg-text);
    background: var(--cg-bg);
    user-select: none;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Header — LTR, centered, no RTL override */
.cg-header {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cg-border);
    margin-bottom: 16px;
    direction: ltr;
}
.cg-header h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 2px;
    letter-spacing: .5px;
}
.cg-header p {
    font-size: 13px;
    color: #666;
    margin: 0;
}

/* Solved rows — category name and words are Arabic, so RTL */
.cg-solved-rows { margin-bottom: 6px; }
.cg-solved-row {
    border-radius: var(--cg-radius);
    padding: 14px 16px;
    margin-bottom: 6px;
    text-align: center;
    animation: cg-pop-in .35s cubic-bezier(.18,.89,.32,1.28) both;
    direction: rtl;
}
.cg-solved-row.yellow { background: var(--cg-yellow); }
.cg-solved-row.green  { background: var(--cg-green);  }
.cg-solved-row.blue   { background: var(--cg-blue);   }
.cg-solved-row.purple { background: var(--cg-purple); }
.cg-solved-row-name {
    font-family: var(--cg-font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 4px;
    line-height: 1.5;
}
.cg-solved-row-words {
    font-family: var(--cg-font-ui);
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 0;
}

/* Tile Grid */
.cg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 14px;
}
.cg-tile {
    background: var(--cg-tile-bg);
    border-radius: var(--cg-radius);
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Arabic font for tile words */
    font-family: var(--cg-font-ui);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;       /* never add letter-spacing to Arabic */
    text-transform: none;    /* never transform Arabic text */
    cursor: pointer;
    padding: 10px 6px;
    line-height: 1.5;        /* Arabic needs more line-height */
    transition: background .15s, transform .1s, box-shadow .15s;
    border: none;
    outline: none;
    overflow-wrap: break-word;
    word-break: normal;
    /* dir=auto is set in JS per tile so Arabic and Latin both render correctly */
}
.cg-tile:hover:not(.selected):not(.disabled) {
    background: var(--cg-tile-hover);
}
.cg-tile.selected {
    background: var(--cg-tile-selected);
    color: var(--cg-tile-sel-text);
}
.cg-tile.disabled { pointer-events: none; opacity: .5; }
.cg-tile.shake  { animation: cg-shake .5s; }
.cg-tile.bounce { animation: cg-bounce .6s cubic-bezier(.18,.89,.32,1.28); }

/* Controls — LTR, centered */
.cg-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    direction: ltr;
}
.cg-btn {
    font-family: var(--cg-font-ui);
    font-size: 14px;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 100px;
    border: 2px solid var(--cg-text);
    background: transparent;
    color: var(--cg-text);
    cursor: pointer;
    transition: background .15s, color .15s;
    letter-spacing: 0;
    line-height: 1.4;
}
.cg-btn:hover { background: var(--cg-text); color: #fff; }
.cg-btn:disabled { opacity: .4; pointer-events: none; }
.cg-btn.primary { background: var(--cg-text); color: #fff; }
.cg-btn.primary:hover { background: #333; }

/* Mistakes — LTR chrome, dots neutral */
.cg-mistakes {
    text-align: center;
    font-size: 13px;
    margin-bottom: 14px;
    min-height: 22px;
    direction: ltr;
}
.cg-dots {
    display: inline-flex;
    gap: 6px;
    margin-left: 6px;
    vertical-align: middle;
}
.cg-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #333;
    display: inline-block;
    transition: background .3s, transform .3s;
}
.cg-dot.used { background: #ccc; transform: scale(.75); }

/* Toast */
.cg-toast-wrap {
    position: relative; height: 36px; margin-bottom: 4px;
    display: flex; align-items: center; justify-content: center;
}
.cg-toast {
    background: var(--cg-text);
    color: #fff;
    padding: 8px 18px;
    border-radius: 100px;
    font-family: var(--cg-font-ui);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s, transform .2s;
    pointer-events: none;
    white-space: nowrap;
}
.cg-toast.show { opacity: 1; transform: translateY(0); }

/* Result / Share — centered, LTR chrome */
.cg-result {
    text-align: center;
    padding: 20px 10px 10px;
    animation: cg-fade-in .4s ease;
    direction: ltr;
}
.cg-result h3 {
    font-size: 20px;
    margin: 0 0 6px;
    font-weight: 700;
}
.cg-result p { font-size: 14px; color: #555; margin: 0 0 18px; }

.cg-emoji-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-bottom: 18px;
    direction: ltr;
}
.cg-emoji-row { font-size: 22px; letter-spacing: 2px; }

.cg-share-btn {
    background: var(--cg-text);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: 13px 32px;
    font-family: var(--cg-font-ui);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    line-height: 1.4;
    letter-spacing: 0;
}
.cg-share-btn:hover { background: #333; }
.cg-copied-msg { font-size: 13px; color: #555; margin-top: 10px; }

/* Loading / Error */
.cg-loading, .cg-error {
    text-align: center;
    padding: 40px 20px;
    color: #888;
    font-size: 15px;
}
.cg-error { color: #b32d2e; }

/* ── Keyframes ────────────────────────────────────────────────────── */
@keyframes cg-shake {
    0%,100% { transform: translateX(0); }
    15%      { transform: translateX(-6px); }
    30%      { transform: translateX(6px); }
    45%      { transform: translateX(-5px); }
    60%      { transform: translateX(5px); }
    75%      { transform: translateX(-3px); }
    90%      { transform: translateX(3px); }
}
@keyframes cg-bounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.12); }
    60%  { transform: scale(.95); }
    80%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}
@keyframes cg-pop-in {
    from { opacity: 0; transform: scale(.85); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes cg-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Responsive */
@media (max-width: 400px) {
    .cg-tile { min-height: 66px; font-size: 12px; }
    .cg-btn  { padding: 10px 16px; font-size: 13px; }
}