/* Sajha Games (2026-11-06). Colours come from the site tokens so dark mode follows; the Kite Dodger canvas draws its own sky. */
.gm-hero { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.gm-hero h1 { margin: 0; }
.gm-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.gm-card { background: var(--card); border: 1px solid var(--border); border-radius: .9rem; padding: 1.1rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: .6rem; }
.gm-card-head { display: flex; align-items: center; gap: .75rem; }
.gm-card-ico { font-size: 2.2rem; line-height: 1; }
.gm-card h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.gm-top { list-style: none; margin: 0; padding: 0; }
.gm-top li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--border); }
.gm-pos { width: 1.6rem; text-align: center; font-weight: 700; color: var(--muted-foreground); }
.gm-top li:nth-child(1) .gm-pos { color: #c9971b; }
.gm-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-pts { font-weight: 700; font-variant-numeric: tabular-nums; }
.gm-guest { font-size: .72rem; color: var(--muted-foreground); margin-left: .25rem; }
.gm-empty { color: var(--muted-foreground); font-size: .92rem; padding: .4rem 0; }

.gm-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.gm-tabs a { padding: .35rem .85rem; border-radius: 2rem; border: 1px solid var(--border); text-decoration: none; color: var(--foreground); background: var(--card); font-size: .92rem; }
.gm-tabs a.active { background: var(--primary-solid); color: #fff; border-color: var(--primary-solid); }
.gm-table { width: 100%; max-width: 640px; }
.gm-table td { padding: .5rem .4rem; border-top: 1px solid var(--border); vertical-align: middle; }
.gm-table tr:first-child td { border-top: 0; }
.gm-table .gm-detail { color: var(--muted-foreground); font-size: .8rem; }
.gm-mine { background: color-mix(in srgb, var(--primary-solid) 10%, transparent); border-radius: .5rem; padding: .6rem .8rem; margin-bottom: .8rem; max-width: 640px; }

/* play area */
.gm-stage { max-width: 460px; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; padding: 1rem; min-height: 22rem; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.gm-intro { text-align: center; padding: 1rem .5rem; }
.gm-big-emoji { font-size: 3rem; line-height: 1.1; margin-bottom: .3rem; }
.gm-note { color: var(--muted-foreground); font-size: .9rem; }
.gm-error { color: #c0392b; font-weight: 600; }
.gm-hud { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: 1.05rem; }
.gm-score span { color: var(--muted-foreground); font-size: .85rem; }
.gm-score b { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.gm-streak { color: #c9561b; font-weight: 700; font-size: .95rem; min-height: 1.2em; }
.gm-time { font-weight: 800; font-size: 1.4rem; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.gm-time.gm-low { color: #d6342f; }
.gm-bar { height: .45rem; background: var(--secondary); border-radius: 1rem; overflow: hidden; margin: .5rem 0 .8rem; }
.gm-bar-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #2e9b4f, #f2c230, #d6342f); transition: width .1s linear; }
.gm-cat { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-foreground); }
.gm-q { font-size: 1.2rem; font-weight: 700; line-height: 1.3; margin: .2rem 0 .9rem; min-height: 3.2rem; }
.gm-opts { display: grid; gap: .55rem; }
.gm-opt { display: flex; align-items: center; gap: .7rem; text-align: left; width: 100%; padding: .7rem .8rem; border: 2px solid var(--border); border-radius: .75rem; background: var(--background); color: var(--foreground); font-size: 1rem; min-height: 3rem; transition: background .12s, border-color .12s; }
.gm-opt:hover:not(:disabled) { border-color: var(--primary-solid); }
.gm-key { flex: 0 0 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--secondary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }
.gm-opt.gm-right { background: #d7f3de; border-color: #2e9b4f; color: #14532d; }
.gm-opt.gm-wrong { background: #fbdcd9; border-color: #d6342f; color: #7a1a14; }
:root[data-bs-theme="dark"] .gm-opt.gm-right { background: #17452a; color: #d7f3de; }
:root[data-bs-theme="dark"] .gm-opt.gm-wrong { background: #5a1d19; color: #fbdcd9; }
.gm-flash { height: 1.6rem; text-align: center; font-weight: 800; margin-top: .6rem; }
.gm-flash-ok { color: #2e9b4f; }
.gm-flash-bad { color: #d6342f; }

.gm-result { text-align: center; padding: .5rem; }
.gm-result-label { color: var(--muted-foreground); font-size: .9rem; }
.gm-result-score { font-size: 3.4rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gm-result-detail { color: var(--muted-foreground); margin-bottom: .6rem; }
.gm-saved { color: #2e9b4f; font-weight: 700; margin: .3rem 0; }
.gm-ranks { display: flex; gap: .8rem; justify-content: center; margin: .5rem 0 .8rem; }
.gm-ranks > div { flex: 1; background: var(--secondary); border-radius: .7rem; padding: .5rem; display: flex; flex-direction: column; }
.gm-ranks span { font-size: .75rem; color: var(--muted-foreground); text-transform: uppercase; }
.gm-ranks b { font-size: 1.5rem; }
.gm-ranks small { color: var(--muted-foreground); }
.gm-label { display: block; text-align: left; font-size: .85rem; color: var(--muted-foreground); margin: .6rem 0 .25rem; }
.gm-namerow { display: flex; gap: .5rem; }
.gm-actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: .9rem; }

.gm-canvas-wrap { position: relative; }
.gm-canvas-wrap canvas { width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: .7rem; display: block; background: #8fc7ef; touch-action: none; user-select: none; -webkit-user-select: none; }
.gm-canvas-hint { position: absolute; left: 0; right: 0; bottom: 22%; text-align: center; color: #fff; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.6); transition: opacity .6s; pointer-events: none; }
@media (max-width: 575.98px) {
    .gm-stage { padding: .7rem; border-radius: .8rem; }
    .gm-result-score { font-size: 2.8rem; }
}

/* drawn icons (flag and kite emoji are missing on many Windows computers) */
.gm-card-ico, .gm-big-ico { display: inline-block; background-repeat: no-repeat; background-position: center; background-size: contain; flex: 0 0 auto; }
.gm-card-ico { width: 2.6rem; height: 2.6rem; }
.gm-big-ico { width: 4.2rem; height: 4.2rem; margin: 0 auto .5rem; display: block; }
.gm-ico-trivia { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><circle cx='24' cy='24' r='22' fill='%232f6fd6'/><circle cx='24' cy='24' r='22' fill='none' stroke='%23d6342f' stroke-width='3'/><text x='24' y='34' font-size='30' font-weight='700' text-anchor='middle' fill='white' font-family='Arial,sans-serif'>?</text></svg>"); }
.gm-ico-kite { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M24 3 L38 20 L24 34 Z' fill='%23f2c230'/><path d='M24 3 L10 20 L24 34 Z' fill='%23d6342f'/><path d='M24 34 L38 20 L24 20 Z' fill='%23f4f4f4'/><path d='M24 34 L10 20 L24 20 Z' fill='%232f6fd6'/><path d='M24 3 L38 20 L24 34 L10 20 Z M24 3 V34 M10 20 H38' fill='none' stroke='%23333' stroke-width='1.2'/><path d='M24 34 q-6 4 0 8 t0 6' fill='none' stroke='%23d6342f' stroke-width='2'/></svg>"); }
.gm-ico-hunger { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M6 32 Q6 8 24 8 Q42 8 42 32 Q24 40 6 32 Z' fill='%23fff6e6' stroke='%23c9a56b' stroke-width='2'/><path d='M14 10 L17 22 M24 8 V22 M34 10 L31 22' fill='none' stroke='%23c9a56b' stroke-width='2' stroke-linecap='round'/><circle cx='39' cy='9' r='3.2' fill='%23f08a1c'/><circle cx='9' cy='8' r='2.4' fill='%23d6342f'/></svg>"); }