/* Riddles & Games: hub (/games), Kurdish Wordle (/games/wordle, js/wordle.js), scores, settings.
   Modern look uses the app's cream/gold/coffee palette; inside the classic book (.krd-classic-body)
   the same markup is re-inked onto graph paper at the bottom of this file. */

.gh, .gs, .gset, .kw-page {
    --g-bg: #f4eedd; --g-card: #fffdf6; --g-ink: #3b2c1c; --g-muted: #8a7a62; --g-line: #eadfc8;
    --g-dark: #43301f; --g-gold: #c9a24b; --g-orange: #e07b4c;
    --t-correct: #1f8a45; --t-present: #e9a800; --t-absent: #7d8a93; --t-key: #e8dcc2; --t-empty: #d9ccb0;
    max-width: 560px; margin-inline: auto; color: var(--g-ink);
    /* auto margins inside a column flexbox shrink an item to its content — that squeezed the whole
       keyboard to ~220px (18px keys). Always take the full row, capped by max-width. */
    width: 100%; box-sizing: border-box; align-self: center;
}

/* ---------- hub ---------- */
.gh { display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; }
.gh-head, .kw-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.gh-head h1, .gs-title, .kw-title { font-size: 20px; font-weight: 800; margin: 0; color: var(--g-dark); }
.gh-link { font-size: 13px; font-weight: 700; color: #a8842f; text-decoration: none; }
.gh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gh-stats > div { background: var(--g-card); border-radius: 16px; padding: 10px; text-align: center; display: flex; flex-direction: column; }
.gh-stats b { font-size: 20px; font-weight: 800; color: var(--g-dark); }
.gh-stats span { font-size: 11.5px; color: var(--g-muted); }
.gh-hot { color: var(--g-orange) !important; }
.gh-hero { border-radius: 22px; padding: 18px; background: linear-gradient(135deg, #63462f, #382515); color: #f5e9d3; display: flex; flex-direction: column; gap: 12px; }
.gh-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.gh-kicker { font-size: 12px; color: var(--g-gold); font-weight: 700; }
.gh-hero-title { font-size: 22px; font-weight: 800; }
.gh-pill { padding: 5px 12px; border-radius: 999px; background: rgba(201, 162, 75, .2); color: #e9cf8e; font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.gh-tiles { display: flex; gap: 5px; }
.gh-tiles span { width: 36px; height: 36px; border-radius: 6px; border: 2px solid rgba(245, 233, 211, .35); box-sizing: border-box; }
.gh-tiles span.c { background: var(--t-correct); border-color: var(--t-correct); }
.gh-tiles span.p { background: var(--t-present); border-color: var(--t-present); }
.gh-hero-actions, .gh-row { display: flex; gap: 8px; flex-wrap: wrap; }
.gh-play { flex: 1; min-height: 46px; border-radius: 14px; background: var(--g-gold); color: #2a1e14; font-size: 15px; font-weight: 800; display: grid; place-items: center; text-decoration: none; padding: 0 14px; }
.gh-ghost { min-height: 46px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(245, 233, 211, .35); color: #f5e9d3; font-size: 14px; font-weight: 700; display: grid; place-items: center; text-decoration: none; }
.gh-card { background: var(--g-card); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--g-ink); }
.gh-card-head { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; }
.gh-more { margin-inline-start: auto; font-size: 12.5px; color: #a8842f; font-weight: 700; text-decoration: none; }
.gh-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.gh-riddle { font-size: 16px; line-height: 1.8; margin: 0; }
.gh-btn { min-height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--g-line); background: #f1e9d8; color: var(--g-dark); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.gh-btn.gh-dark { background: var(--g-dark); color: #fbf4e4; border: 0; }
.gh-hint { margin: 0; color: #2a3f8f; }
.gh-answer { margin: 0; font-size: 22px; font-weight: 800; color: #a8352a; }
.gh-rowlink { flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; }
.gh-letter { width: 46px; height: 46px; border-radius: 14px; background: #f3e1dd; color: #a8352a; display: grid; place-items: center; font: 700 22px "Scheherazade New", serif; flex: none; }
.gh-grow { flex: 1; display: flex; flex-direction: column; }
.gh-grow small { color: var(--g-muted); }

/* ---------- scores & settings ---------- */
.gs, .gset { display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; }
.gs-hero { border-radius: 22px; padding: 16px 18px; background: linear-gradient(135deg, #63462f, #382515); color: #f5e9d3; display: flex; justify-content: space-between; align-items: center; }
.gs-kicker { font-size: 12px; color: var(--g-gold); font-weight: 700; }
.gs-points { font-size: 34px; font-weight: 800; line-height: 1.2; }
.gs-formula { font-size: 11.5px; color: #d9c7a6; }
.gs-streak { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--g-orange); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gs-streak b { font-size: 20px; }
.gs-streak span { font-size: 9.5px; color: #d9c7a6; }
.gs-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.gs-chip { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid #e3d7bd; background: var(--g-card); color: #7a6a52; font-size: 13px; cursor: pointer; }
.gs-chip[aria-pressed="true"] { background: var(--g-dark); color: #fbf4e4; border-color: var(--g-dark); font-weight: 800; }
.gs-card { background: var(--g-card); border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.gs-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; }
.gs-grid4 > div { display: flex; flex-direction: column; }
.gs-grid4 b { font-size: 22px; font-weight: 800; }
.gs-grid4 span, .gs-sub, .gs-muted { font-size: 12px; color: var(--g-muted); }
.gs-bar { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.gs-bar i { font-style: normal; width: 14px; text-align: center; }
.gs-bar div { background: #b7ab93; color: #fff; padding: 2px 8px; border-radius: 4px; font-weight: 700; min-width: 24px; box-sizing: border-box; }
.gs-recent { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 40px; border-bottom: 1px solid #efe6d2; font-size: 14px; }
.gs-recent:last-child { border-bottom: 0; }
.gs-plus { color: var(--t-correct); }
.gs-riddles { flex-direction: row; justify-content: space-between; font-size: 14px; }
.gs-empty { color: var(--g-muted); text-align: center; }
.gset-lab { display: flex; justify-content: space-between; align-items: baseline; }
.gset-lab small { color: var(--g-muted); }
.gset-chips { display: grid; gap: 6px; }
.gset-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gset-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gset-chips button { min-height: 46px; border-radius: 12px; font-size: 17px; font-weight: 800; border: 1px solid #e3d7bd; background: var(--g-card); color: var(--g-ink); cursor: pointer; }
.gset-chips button[aria-pressed="true"] { background: var(--g-dark); color: #fbf4e4; border-color: var(--g-dark); }
.gset-preview { display: flex; align-items: center; gap: 14px; background: #f7f0e0; border-radius: 14px; padding: 10px 12px; }
.gset-preview > div:last-child { display: flex; flex-direction: column; font-size: 13px; }
.gset-preview small { color: var(--g-muted); }
.gset-mini { display: grid; gap: 2px; flex: none; }
.gset-mini span { width: 9px; height: 9px; border-radius: 2px; background: #e3d7bd; display: block; }
.gset-mini span.c { background: var(--t-correct); } .gset-mini span.p { background: var(--t-present); } .gset-mini span.a { background: #b7ab93; }
.gset-sw { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 54px; border-bottom: 1px solid #efe6d2; }
.gset-sw:last-child { border-bottom: 0; }
.gset-sw label { display: flex; flex-direction: column; font-size: 14.5px; cursor: pointer; }
.gset-sw small { color: var(--g-muted); font-size: 12px; }
.gset-sw .form-check-input { width: 44px; height: 24px; margin: 0; flex: none; }
.gset-dict { flex-direction: row; align-items: flex-start; gap: 12px; }
.gset-dict > i { width: 40px; height: 40px; border-radius: 12px; background: #e7eee4; color: #2f6b3a; display: grid; place-items: center; flex: none; }
.gset-credit { display: block; margin-top: 6px; font-size: 11px; color: var(--g-muted); }
.gset-dict p { margin: 2px 0 0; font-size: 13px; line-height: 1.75; color: #5d4d37; }
.gset-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.gset-danger { min-height: 46px; border-radius: 14px; border: 1px solid #e3b7ae; background: transparent; color: #c0392b; font-size: 14.5px; font-weight: 700; cursor: pointer; padding: 0 14px; }
.gset-warn { color: #c0392b; margin: 0; font-size: 13.5px; }
.gset-ok { color: var(--t-correct); margin: 0; }

/* ---------- Wordle ---------- */
.kw-page { display: flex; flex-direction: column; gap: 6px; }
.kw-sub { font-size: 12.5px; color: var(--g-muted); }
.kw-head-links { display: flex; }
.kw-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--g-dark); font-size: 18px; font-weight: 800; border-radius: 10px; cursor: pointer; text-decoration: none; }
.kw { position: relative; display: flex; flex-direction: column; gap: 8px; }
.kw-page { gap: 2px; }
.kw-loading { text-align: center; color: var(--g-muted); }
.kw-modes { display: flex; justify-content: center; align-items: center; gap: 6px; }
.kw-mode { min-height: 34px; padding: 0 16px; border-radius: 999px; border: 1px solid #d9ccb0; background: transparent; color: #7a6a52; font: inherit; font-size: 13.5px; cursor: pointer; }
.kw-mode[aria-pressed="true"] { background: var(--g-dark); color: #fbf4e4; border-color: var(--g-dark); font-weight: 700; }
.kw-grid { display: grid; grid-template-rows: repeat(var(--tries), var(--tile, 52px)); gap: var(--gap, 6px); margin-inline: auto; }
.kw-row { display: grid; grid-template-columns: repeat(var(--len), var(--tile, 52px)); gap: var(--gap, 6px); direction: rtl; }
.kw-tile {
    width: var(--tile, 52px); height: var(--tile, 52px); box-sizing: border-box; border: 2px solid var(--t-empty); border-radius: 8px;
    display: grid; place-items: center; font-size: calc(var(--tile, 52px) * .52); font-weight: 800; line-height: 1; user-select: none; background: transparent; color: var(--g-ink);
}
.kw-tile.filled { border-color: var(--g-muted); background: var(--g-card); animation: kw-pop .1s ease-out; }
.kw-tile.correct { background: var(--t-correct); border-color: var(--t-correct); color: #fff; }
.kw-tile.present { background: var(--t-present); border-color: var(--t-present); color: #1a1300; }
.kw-tile.absent { background: var(--t-absent); border-color: var(--t-absent); color: #fff; }
.kw-tile.flip { animation: kw-flip .5s ease forwards; }
.kw-row.shake { animation: kw-shake .4s; }
.kw-row.win .kw-tile { animation: kw-bounce .5s ease; }
@keyframes kw-pop { 50% { transform: scale(1.08); } }
@keyframes kw-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes kw-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes kw-bounce { 40% { transform: translateY(-12px); } }
.kw-kb { display: flex; flex-direction: column; gap: 6px; direction: rtl; margin-top: 4px; }
.kw-kr { display: flex; gap: 4px; justify-content: center; width: 100%; }
.kw-key {
    flex: 1 1 0; min-width: 0; max-width: 48px; height: var(--key-h, 52px); border: 0; border-radius: 8px; background: var(--t-key); color: var(--g-ink);
    font: 700 1.15rem Vazirmatn, "Noto Sans Arabic", Tahoma, sans-serif; cursor: pointer; padding: 0; touch-action: manipulation;
}
.kw-key.wide { max-width: 76px; flex: 1.7 1 0; font-size: .85rem; }
.kw-key.correct { background: var(--t-correct); color: #fff; }
.kw-key.present { background: var(--t-present); color: #1a1300; }
.kw-key.absent { background: var(--t-absent); color: #fff; opacity: .85; }
.kw-key:active { filter: brightness(.9); }
.kw-toast {
    position: absolute; top: 44px; left: 50%; transform: translateX(-50%); background: var(--g-dark); color: #fbf4e4; padding: 10px 18px;
    border-radius: 8px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 5; white-space: nowrap;
}
.kw-toast.show { opacity: 1; }
.kw-modal { position: fixed; inset: 0; background: rgba(10, 18, 24, .55); display: grid; place-items: center; z-index: 1060; padding: 16px; }
.kw-modal[hidden] { display: none; }
.kw-card { position: relative; background: var(--g-card, #fffdf6); color: var(--g-ink, #3b2c1c); border-radius: 18px; padding: 22px; width: min(92vw, 400px); max-height: 85vh; overflow: auto; }
.kw-card h2 { font-size: 1.2rem; font-weight: 800; margin: 0 0 10px; }
.kw-card p { margin: .4em 0; line-height: 1.8; }
.kw-close { position: absolute; top: 8px; inset-inline-end: 8px; width: 40px; height: 40px; border: 0; background: none; font-size: 18px; cursor: pointer; color: inherit; }
.kw-muted { color: var(--g-muted); font-size: .9rem; }
.kw-ex { display: grid; grid-template-columns: repeat(5, 40px); gap: 4px; direction: rtl; margin: 8px 0; }
.kw-ex .kw-tile { width: 40px; height: 40px; font-size: 1.2rem; }
.kw-answer { font-size: 2rem; font-weight: 800; text-align: center; letter-spacing: 1px; }
.kw-gloss { text-align: center; color: var(--g-muted); margin-bottom: 8px; }
.kw-points { text-align: center; color: var(--t-correct); font-weight: 800; font-size: 1.1rem; }
.kw-sharegrid { text-align: center; white-space: pre-line; line-height: 1.25; margin: 8px 0 14px; }
.kw-actions { display: flex; gap: 8px; }
.kw-btn { flex: 1; min-height: 46px; border: 0; border-radius: 12px; font: 700 1rem Vazirmatn, Tahoma, sans-serif; cursor: pointer; background: var(--t-correct); color: #fff; }
.kw-btn.alt { background: var(--t-key); color: var(--g-ink); }
.kw-link { display: block; text-align: center; margin-top: 12px; color: #a8842f; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .kw-tile, .kw-row { animation: none !important; } }

/* ================= inside the classic book: ink, pencil washes and graph paper ================= */
.krd-classic-body .gh, .krd-classic-body .gs, .krd-classic-body .gset, .krd-classic-body .kw-page {
    --g-card: transparent; --g-ink: #2b2117; --g-muted: #6a563f; --g-dark: #2b2117; --g-line: #c3b28c;
    --t-correct: rgba(47, 107, 58, .6); --t-present: rgba(214, 160, 30, .6); --t-absent: rgba(120, 110, 95, .4); --t-key: #fbf6e8; --t-empty: #9fb0c2;
}
.krd-classic-body .gh-hero, .krd-classic-body .gs-hero { background: transparent; color: #2b2117; border: 1.5px solid #2b2117; border-radius: 4px; }
.krd-classic-body .gh-hero-title, .krd-classic-body .gs-points { font-family: "Scheherazade New", serif; color: #a8352a; }
.krd-classic-body .gh-play { background: radial-gradient(circle at 38% 34%, #c8493a, #8f2a20 70%); color: #f7e3c8; border-radius: 999px; }
.krd-classic-body .gh-ghost, .krd-classic-body .gh-pill { color: #2a3f8f; border: 1.5px solid #2a3f8f; background: transparent; }
.krd-classic-body .gs-card, .krd-classic-body .gh-card, .krd-classic-body .gh-stats > div { border-bottom: 1px dashed #c3b28c; border-radius: 0; padding-inline: 0; }
.krd-classic-body .gs-chip[aria-pressed="true"], .krd-classic-body .gset-chips button[aria-pressed="true"] {
    background: rgba(42, 63, 143, .09); color: #2a3f8f; border: 1.5px solid #2a3f8f; box-shadow: 0 0 0 2px #f7efd8, 0 0 0 3.5px #2a3f8f;
}
.krd-classic-body .gset-chips button, .krd-classic-body .gs-chip { background: transparent; border: 1.5px solid #2a3f8f; color: #2a3f8f; border-radius: 3px 7px 4px 8px; }
.krd-classic-body .gs-streak { border: 3px double #b98a2e; color: #b98a2e; }
.krd-classic-body .gs-streak span, .krd-classic-body .gs-formula { color: #6a563f; }
.krd-classic-body .gs-bar div { background: rgba(120, 110, 95, .3); color: #2b2117; border: 1px solid #6a563f; border-radius: 0; }
.krd-classic-body .gset-preview { background: transparent; border: 1px dashed #c3b28c; border-radius: 0; }
.krd-classic-body .kw-page { padding-bottom: 0; }
.krd-classic-body .kw { background-image: linear-gradient(#e3e8ee 1px, transparent 1px), linear-gradient(90deg, #e3e8ee 1px, transparent 1px); background-size: 18px 18px; padding: 8px 0; }
.krd-classic-body .kw-tile { border-radius: 3px; font-family: "Noto Naskh Arabic", serif; font-weight: 700; color: #2b2117 !important; }
.krd-classic-body .kw-tile.filled { background: transparent; border-color: #2b2117; }
.krd-classic-body .kw-key { border-radius: 7px; border: 1.5px solid #6a563f; box-shadow: 0 2px 0 #6a563f; color: #2b2117 !important; max-width: none; font-size: 1.05rem; }
.krd-classic-body .kw-key.wide { border-radius: 7px; max-width: none; }
.krd-classic-body .kw-kr { gap: 3px; }
.krd-classic-body .kw-head { margin-bottom: 0; }
.krd-classic-body .kw-title { font-size: 20px !important; margin: 0; }
.krd-classic-body .kw-title { font-family: "Noto Naskh Arabic", serif; font-size: 24px; }
.krd-classic-body .kw-mode[aria-pressed="true"] { background: transparent; color: #2a3f8f; border: 1.5px solid #2a3f8f; }
.krd-classic-body .kw-toast { background: #2b2117; color: #f7efd8; }
.krd-classic .kw-card { background: #fcf7e8; border-radius: 4px; border: 1.5px solid #2b2117; font-family: "Noto Naskh Arabic", "Vazirmatn", serif; }

/* modern home: the daily Wordle nudge */
.krd-wordle-nudge { display: flex; align-items: center; gap: 12px; background: #fffdf6; border: 1px dashed #c9a24b; border-radius: 20px; padding: 14px; color: #3b2c1c; text-decoration: none; }
.krd-wn-tiles { display: grid; grid-template-columns: repeat(3, 16px); gap: 3px; flex: none; }
.krd-wn-tiles i { height: 16px; border-radius: 3px; background: #ddd2bb; }
.krd-wn-tiles i.c { background: #1f8a45; } .krd-wn-tiles i.p { background: #e9a800; }
.krd-wn-text { flex: 1; display: flex; flex-direction: column; }
.krd-wn-text small { color: #8a7a62; }
.krd-wn-go { color: #a3937a; }
html[dir="ltr"] .krd-wn-go, html[dir="ltr"] .gh-rowlink .fa-chevron-left, html[dir="ltr"] .krd-link-card .fa-chevron-left { transform: scaleX(-1); }