/* Ghatan (v8.7) · Games (assets/js/games.js) */
.gg { --gg-r: 16px; position: relative; color: var(--text-1, #141a23); }
.gg__hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: .9rem; }
.gg__tile { position: relative; display: grid; align-content: start; gap: .5rem; min-height: 210px; padding: 1.4rem 1.3rem 1.2rem; border: 1px solid var(--border, rgba(16,24,44,.12)); border-radius: var(--gg-r); background: var(--bg-card, var(--bg, #fff)); color: inherit; text-align: start; font: inherit; cursor: pointer; overflow: hidden; transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .3s; animation: gg-up .5s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 60ms); }
.gg__tile::before { content: ""; position: absolute; inset: auto -30% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gold, #b8973a) 16%, transparent), transparent 70%); opacity: 0; transition: opacity .4s; }
.gg__tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--gold, #b8973a) 60%, transparent); box-shadow: 0 22px 40px -28px rgba(14,28,47,.5); }
.gg__tile:hover::before { opacity: 1; }
.gg__tile:focus-visible { outline: 2px solid var(--gold, #b8973a); outline-offset: 2px; }
.gg__ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--gold, #b8973a) 11%, transparent); color: var(--gold, #b8973a); margin-bottom: .35rem; }
.gg__ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.gg__tile strong { font: 650 1.15rem/1.2 var(--ff-display, system-ui); letter-spacing: -.01em; }
.gg__d { font-size: .875rem; line-height: 1.5; color: var(--text-2, #4a5260); }
.gg__best { margin-top: auto; padding-top: .6rem; font: 600 .6875rem/1 var(--ff-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--gold, #b8973a); }
.gg__best--new { color: var(--text-1, #141a23); }
@keyframes gg-up { from { opacity: 0; transform: translateY(10px); } }
.gg__stage { border: 1px solid var(--border, rgba(16,24,44,.12)); border-radius: calc(var(--gg-r) + 4px); background: var(--bg-card, var(--bg, #fff)); overflow: hidden; }
.gg__stage.is-in { animation: gg-up .45s cubic-bezier(.22,1,.36,1); }
.gg__top { display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border, rgba(16,24,44,.12)); }
.gg__back { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem .45rem .55rem; border: 1px solid var(--border, rgba(16,24,44,.15)); border-radius: 999px; background: none; color: var(--text-2, #4a5260); font: 600 .8125rem/1 var(--ff-body, system-ui); cursor: pointer; }
.gg__back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.gg__back:hover { color: var(--text-1, #141a23); border-color: var(--gold, #b8973a); }
[dir="rtl"] .gg__back svg { transform: scaleX(-1); }
.gg__title { margin: 0; font: 650 1.05rem/1.2 var(--ff-display, system-ui); }
.gg__meta { margin-inline-start: auto; font: 600 .75rem/1 var(--ff-mono, monospace); letter-spacing: .06em; color: var(--text-3, #6b7280); }
.gg__body { padding: clamp(1.1rem, 3vw, 2rem); }
.gg__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.4rem; }
.gg__chips button { padding: .45rem .8rem; border: 1px solid var(--border, rgba(16,24,44,.15)); border-radius: 999px; background: none; color: var(--text-2, #4a5260); font: 600 .78rem/1 var(--ff-body, system-ui); cursor: pointer; }
.gg__chips button i { font-style: normal; opacity: .6; margin-inline-start: .2rem; }
.gg__chips button[aria-pressed="true"] { background: var(--gold, #b8973a); border-color: var(--gold, #b8973a); color: #0e1c2f; }
/* the card */
.gg__cardwrap { display: grid; justify-items: center; gap: 1rem; }
.gg__card { position: relative; width: min(520px, 100%); aspect-ratio: 8 / 5; border: 0; padding: 0; background: none; cursor: pointer; perspective: 1400px; font: inherit; color: inherit; }
.gg__face { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: .8rem; padding: 1.6rem 1.8rem; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--gold, #b8973a) 35%, var(--border, transparent)); background: linear-gradient(160deg, color-mix(in srgb, var(--gold, #b8973a) 7%, var(--bg-card, #fff)), var(--bg-card, #fff) 60%); box-shadow: 0 30px 60px -36px rgba(14,28,47,.5); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s cubic-bezier(.3,.7,.2,1); text-align: center; }
.gg__face::after { content: ""; position: absolute; inset: 8px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--gold, #b8973a) 16%, transparent); pointer-events: none; }
.gg__face--b { transform: rotateY(180deg); }
.gg__card.is-flip .gg__face--f { transform: rotateY(-180deg); }
.gg__card.is-flip .gg__face--b { transform: rotateY(0); }
.gg__deck { font: 600 .625rem/1 var(--ff-mono, monospace); letter-spacing: .16em; text-transform: uppercase; color: var(--gold, #b8973a); }
.gg__term { font: 700 clamp(1.4rem, 3.4vw, 2rem)/1.15 var(--ff-display, system-ui); letter-spacing: -.02em; }
.gg__def { font-size: clamp(.95rem, 1.8vw, 1.05rem); line-height: 1.6; color: var(--text-2, #4a5260); max-width: 42ch; }
.gg__hint { font-size: .75rem; color: var(--text-3, #6b7280); }
.gg__keys { margin: 0; font-size: .75rem; color: var(--text-3, #6b7280); }
@media (hover: none) { .gg__keys { display: none; } }
@media (max-width: 560px) { .gg__card { aspect-ratio: 4 / 5; } }
/* buttons */
.gg__row { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1rem; }
.gg__btn { min-height: 44px; padding: 0 1.3rem; border: 1px solid var(--border, rgba(16,24,44,.18)); border-radius: 999px; background: none; color: var(--text-1, #141a23); font: 600 .9rem/1 var(--ff-body, system-ui); cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.gg__btn:hover { border-color: var(--gold, #b8973a); }
.gg__btn:active { transform: scale(.97); }
.gg__btn--gold { background: var(--gold, #b8973a); border-color: var(--gold, #b8973a); color: #0e1c2f; }
.gg__btn--gold:hover { background: var(--gold-light, #cba94b); }
.gg__btn--pass { min-width: 140px; }
.gg__row--big .gg__btn { min-width: 150px; min-height: 52px; font-size: 1rem; }
.gg__btn.is-right { background: #2f8a55; border-color: #2f8a55; color: #fff; }
.gg__btn.is-wrong { background: #b44a4a; border-color: #b44a4a; color: #fff; }
/* quiz */
.gg__bar { height: 3px; border-radius: 3px; background: var(--border, rgba(16,24,44,.1)); margin-bottom: 1.4rem; overflow: hidden; }
.gg__bar i { display: block; height: 100%; background: var(--gold, #b8973a); transition: width .4s ease; }
.gg__q { margin: 0 0 1.2rem; font: 650 clamp(1.1rem, 2.4vw, 1.35rem)/1.35 var(--ff-display, system-ui); max-width: 52ch; }
.gg__opts { display: grid; gap: .55rem; }
.gg__opts--2 { grid-template-columns: 1fr 1fr; }
.gg__opt { display: flex; align-items: center; gap: .8rem; min-height: 52px; padding: .7rem 1rem; border: 1px solid var(--border, rgba(16,24,44,.15)); border-radius: 12px; background: var(--bg, transparent); color: inherit; text-align: start; font: 500 .95rem/1.35 var(--ff-body, system-ui); cursor: pointer; transition: border-color .2s, background .2s; }
.gg__opts--2 .gg__opt { justify-content: center; font: 650 1.1rem/1 var(--ff-display, system-ui); }
.gg__opt span { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border, rgba(16,24,44,.2)); font: 600 .72rem/1 var(--ff-mono, monospace); color: var(--text-3, #6b7280); }
.gg__opt:hover:not(:disabled) { border-color: var(--gold, #b8973a); }
.gg__opt:disabled { cursor: default; }
.gg__opt.is-right { border-color: #2f8a55; background: color-mix(in srgb, #2f8a55 12%, transparent); }
.gg__opt.is-right span { background: #2f8a55; border-color: #2f8a55; color: #fff; }
.gg__opt.is-wrong { border-color: #b44a4a; background: color-mix(in srgb, #b44a4a 10%, transparent); }
.gg__why { margin-top: 1.2rem; padding: 1rem 1.2rem; border-inline-start: 3px solid var(--gold, #b8973a); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--gold, #b8973a) 7%, transparent); animation: gg-up .35s ease; }
.gg__why p { margin: 0 0 .7rem; line-height: 1.6; color: var(--text-2, #4a5260); }
.gg__verdict { font: 700 1rem/1.2 var(--ff-display, system-ui) !important; }
.gg__verdict.is-ok { color: #2f8a55 !important; } .gg__verdict.is-no { color: #b44a4a !important; }
/* numbers games */
.gg__intro { max-width: 52ch; } .gg__intro p { margin: 0 0 1.2rem; line-height: 1.65; color: var(--text-2, #4a5260); }
.gg__clock { height: 4px; border-radius: 4px; background: var(--border, rgba(16,24,44,.1)); margin-bottom: 1.4rem; overflow: hidden; }
.gg__clock i { display: block; height: 100%; width: 100%; background: var(--gold, #b8973a); transition: width 1s linear; }
.gg__given { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-bottom: 1.2rem; border: 1px solid var(--border, rgba(16,24,44,.12)); border-radius: 14px; overflow: hidden; background: var(--border, rgba(16,24,44,.12)); }
.gg__given--4 { grid-template-columns: repeat(4, 1fr); }
.gg__given > div { display: grid; gap: .35rem; padding: 1rem; background: var(--bg-card, #fff); }
.gg__given span { font: 600 .625rem/1 var(--ff-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3, #6b7280); }
.gg__given strong { font: 700 clamp(1.1rem, 2.6vw, 1.5rem)/1.1 var(--ff-display, system-ui); letter-spacing: -.01em; }
.gg__given .is-ask { background: color-mix(in srgb, var(--gold, #b8973a) 10%, var(--bg-card, #fff)); }
.gg__given .is-ask strong { color: var(--gold, #b8973a); }
.gg__streak { min-height: 1.2em; margin: .8rem 0 0; text-align: center; font: 700 .8rem/1 var(--ff-mono, monospace); letter-spacing: .1em; color: var(--gold, #b8973a); }
@media (max-width: 560px) { .gg__given, .gg__given--4 { grid-template-columns: 1fr 1fr; } .gg__opts--2 { grid-template-columns: 1fr; } }
/* lease match */
.gg__lede { margin: 0 0 1rem; color: var(--text-2, #4a5260); }
.gg__match { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 1rem; }
.gg__col { display: grid; gap: .5rem; align-content: start; }
.gg__m { padding: .75rem .9rem; border: 1px solid var(--border, rgba(16,24,44,.15)); border-radius: 12px; background: var(--bg, transparent); color: inherit; text-align: start; font: 500 .875rem/1.45 var(--ff-body, system-ui); cursor: pointer; transition: border-color .2s, background .2s, opacity .3s; }
.gg__m--t { font: 650 .95rem/1.3 var(--ff-display, system-ui); }
.gg__m:hover:not(:disabled) { border-color: var(--gold, #b8973a); }
.gg__m.is-sel { border-color: var(--gold, #b8973a); background: color-mix(in srgb, var(--gold, #b8973a) 12%, transparent); box-shadow: inset 0 0 0 1px var(--gold, #b8973a); }
.gg__m.is-done { border-color: #2f8a55; background: color-mix(in srgb, #2f8a55 9%, transparent); opacity: .6; cursor: default; }
.gg__m.is-shake { animation: gg-shake .4s ease; border-color: #b44a4a; }
@keyframes gg-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@media (max-width: 640px) { .gg__match { grid-template-columns: 1fr; } }
/* the end of a game */
.gg__end { display: grid; justify-items: center; gap: .4rem; padding: 1.5rem 0; text-align: center; animation: gg-up .45s ease; }
.gg__k { margin: 0; font: 600 .6875rem/1 var(--ff-mono, monospace); letter-spacing: .18em; text-transform: uppercase; color: var(--gold, #b8973a); }
.gg__score { margin: 0; font: 700 clamp(3rem, 8vw, 4.5rem)/1 var(--ff-display, system-ui); letter-spacing: -.03em; }
.gg__score small { font-size: .35em; color: var(--text-3, #6b7280); letter-spacing: 0; }
.gg__sub { margin: 0; color: var(--text-2, #4a5260); max-width: 40ch; }
@media (prefers-reduced-motion: reduce) { .gg__tile, .gg__stage.is-in, .gg__why, .gg__end { animation: none; } .gg__face { transition: none; } }
html[data-motion="off"] .gg__face { transition: none; }