/* Gamification plugin — structural styles. Colours come from the active theme's tokens. */
.gm-root {
    --gm-primary: var(--color-theme-primary, var(--theme-primary, #4f46e5));
    --gm-on-primary: var(--color-theme-on-primary, var(--theme-on-primary, #fff));
    --gm-text: var(--color-theme-text, var(--theme-text, #18181b));
    --gm-muted: var(--color-theme-muted, var(--theme-text-muted, #71717a));
    --gm-border: var(--color-theme-border, var(--theme-border, #e4e4e7));
    --gm-surface: var(--color-theme-surface, var(--theme-surface, #fff));
    position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.gm-root[hidden] { display: none; }
.gm-root * { box-sizing: border-box; }
html.gm-open { overflow: hidden; }
.gm-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.gm-dialog { position: relative; display: grid; grid-template-columns: 1fr; gap: 1.25rem; width: min(52rem, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1.75rem; border-radius: 1.25rem; background: var(--gm-surface); color: var(--gm-text); box-shadow: 0 25px 60px rgba(0, 0, 0, .25); }
@media (min-width: 768px) { .gm-dialog { grid-template-columns: 1fr 1fr; align-items: center; } }
.gm-close { position: absolute; top: .6rem; right: .9rem; border: 0; background: none; color: var(--gm-muted); font-size: 1.75rem; line-height: 1; cursor: pointer; }
.gm-board { display: flex; justify-content: center; }
.gm-wheel-wrap { position: relative; width: min(20rem, 70vw); aspect-ratio: 1; }
.gm-wheel { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 6px var(--gm-primary), 0 10px 30px rgba(0, 0, 0, .2); transform-origin: 50% 50%; }
.gm-wheel-label { fill: #fff; font: 600 8px/1 system-ui, sans-serif; paint-order: stroke; stroke: rgba(0, 0, 0, .25); stroke-width: .6px; }
.gm-wheel-hub { fill: var(--gm-surface); stroke: var(--gm-primary); stroke-width: 3; }
.gm-pointer { position: absolute; top: -.6rem; left: 50%; z-index: 1; width: 0; height: 0; transform: translateX(-50%); border-left: .9rem solid transparent; border-right: .9rem solid transparent; border-top: 1.6rem solid var(--gm-text); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.gm-card { position: relative; width: min(18rem, 75vw); aspect-ratio: 16 / 10; border-radius: 1rem; overflow: hidden; background: linear-gradient(135deg, var(--gm-primary), color-mix(in srgb, var(--gm-primary) 60%, #000)); }
.gm-card-prize { display: flex; align-items: center; justify-content: center; height: 100%; padding: 1rem; color: var(--gm-on-primary); font-size: 1.6rem; font-weight: 800; text-align: center; }
.gm-card-cover { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; transition: opacity .4s; }
.gm-card-cover.is-cleared { opacity: 0; pointer-events: none; }
.gm-title { margin: 0 0 .4rem; font-family: var(--font-title, inherit); font-size: 1.5rem; font-weight: 700; }
.gm-text { margin: 0 0 1rem; color: var(--gm-muted); font-size: .95rem; line-height: 1.55; }
.gm-small { font-size: .8125rem; }
.gm-form { display: flex; flex-direction: column; gap: .7rem; }
.gm-input { width: 100%; padding: .75rem .9rem; border: 1px solid var(--gm-border); border-radius: .7rem; background: transparent; color: inherit; font: inherit; }
.gm-check { display: flex; align-items: flex-start; gap: .5rem; color: var(--gm-muted); font-size: .8125rem; line-height: 1.4; cursor: pointer; }
.gm-check input { margin-top: .15rem; accent-color: var(--gm-primary); }
.gm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gm-error { margin: 0; color: #b91c1c; font-size: .8125rem; }
.gm-button { display: inline-flex; align-items: center; justify-content: center; padding: .8rem 1.4rem; border: 0; border-radius: 999px; background: var(--gm-primary); color: var(--gm-on-primary); font: inherit; font-weight: 700; cursor: pointer; }
.gm-button:disabled { opacity: .6; cursor: default; }
.gm-button-small { padding: .45rem .9rem; font-size: .8125rem; }
.gm-code { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .75rem; padding: .75rem 1rem; border: 2px dashed var(--gm-primary); border-radius: .8rem; }
.gm-code span { flex: 1; font-family: ui-monospace, monospace; font-size: 1.35rem; font-weight: 800; letter-spacing: .12em; }