/* Interviewpedia v34.0 practice game. Uses the site's colour tokens so light and dark both work. */
.gm-home{box-sizing:border-box;width:100%;max-width:none;margin:24px 0;padding:20px 18px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow-wrap:anywhere}
.gm-home[hidden]{display:none}
.gm-head .eyebrow{margin:0 0 4px}
.gm-home h2{margin:0;font:700 clamp(22px,5.4vw,28px)/1.2 var(--font-body)}
.gm-h3{margin:22px 0 10px;font:700 16px/1.3 var(--font-body)}
.gm-h4{margin:18px 0 6px;font:700 15px/1.3 var(--font-body)}
.gm-ctx{margin:8px 0 14px;color:var(--muted);font:500 15px/1.4 var(--font-body)}
.gm-done{margin:8px 0 12px;font:600 15px/1.4 var(--font-body)}
.gm-home .actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 6px}
.gm-reveal .gm-sub,.gm-sum .gm-sub{color:var(--muted)}
.gm-sub{margin:6px 0 10px;color:var(--muted);font:400 14px/1.5 var(--font-body)}
.gm-note{margin:12px 0 0;color:var(--muted);font:400 13px/1.5 var(--font-body)}
.gm-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 0}
.gm-links .linkbtn{min-height:44px}

/* weekly goal */
.gm-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:16px 0 6px;padding:0;list-style:none}
.gm-day{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;max-height:44px;border-radius:12px;background:var(--surface-2);color:var(--muted);font:600 14px/1 var(--font-body);border:1px solid var(--line)}
.gm-day.is-on{background:var(--gold);color:var(--gold-ink);border-color:transparent}
.gm-day.is-today{outline:2px solid var(--focus);outline-offset:2px}
.gm-weektxt{margin:6px 0 0;color:var(--muted);font:400 14px/1.4 var(--font-body)}
.gm-pace{margin:12px 0 0;font:400 14px/1.5 var(--font-body)}

/* role path */
.gm-path{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.gm-step{box-sizing:border-box;display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;width:100%;min-height:56px;padding:8px 10px;text-align:left;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);border-radius:14px;font:inherit;cursor:pointer}
.gm-step:hover{border-color:var(--edge)}
.gm-step:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.gm-n{grid-row:1/3;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--tag-bg);color:var(--tag-ink);font:700 13px/1 var(--font-body)}
.gm-nm{font:700 14px/1.2 var(--font-body)}
.gm-st{color:var(--muted);font:400 12px/1.3 var(--font-body)}
.gm-step.is-done{border-color:var(--gold)}
.gm-step.is-done .gm-n{background:var(--gold);color:var(--gold-ink)}
.gm-step.is-next{border-color:var(--edge);box-shadow:inset 0 0 0 1px var(--edge)}
@media (min-width:480px){.gm-path{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* reveal panel */
.gm-reveal,.gm-sum{color:var(--ink);text-align:left}
.gm-reveal *,.gm-sum *{box-sizing:border-box}
.gm-reveal{margin:18px 0;padding:16px;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;overflow-wrap:anywhere}
.gm-reveal h4,.gm-sum h4{margin:0 0 6px;color:var(--ink);font:700 16px/1.3 var(--font-body)}
.gm-delta{margin:0 0 12px;color:var(--ink);font:600 15px/1.5 var(--font-body)}
.gm-mix{margin:12px 0 0;padding:10px 12px;background:var(--status-bg);color:var(--status-ink);border-radius:12px;font:500 14px/1.5 var(--font-body)}
.gm-badge{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;padding:12px;background:var(--gold);color:var(--gold-ink);border-radius:12px;font:500 14px/1.5 var(--font-body)}
.gm-medal{flex:none;font-size:20px;line-height:1.2}
.gm-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:10px 0 0;padding:0;list-style:none}
@media (min-width:640px){.gm-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gm-card{box-sizing:border-box;position:relative;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;min-width:0}
.gm-card b{display:block;margin:2px 0 4px;color:var(--ink);font:700 14px/1.35 var(--font-body)}
.gm-tag{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--tag-bg);color:var(--tag-ink);font:600 11px/1.5 var(--font-body)}
.gm-quote{margin:0;color:var(--muted);font:italic 400 13px/1.5 var(--font-body)}
.gm-card.is-up{border-color:var(--gold)}
.gm-card.is-up.is-new .gm-tag{background:var(--gold);color:var(--gold-ink)}
.gm-card.is-held{opacity:.85;border-style:dashed}
.gm-card.is-down{padding:0;border-style:dashed}
.gm-flip{box-sizing:border-box;display:block;width:100%;min-height:44px;padding:12px;text-align:left;background:transparent;color:var(--ink);border:0;border-radius:14px;font:inherit;cursor:pointer}
.gm-flip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.gm-say{display:block;margin-top:4px;font:400 13px/1.5 var(--font-body)}
.gm-hint{display:block;margin-top:4px;color:var(--muted);font:400 12px/1.3 var(--font-body)}
.gm-card.is-open{border-style:solid}

/* round summary */
.gm-sum{margin:18px 0;padding:16px;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;text-align:left;overflow-wrap:anywhere}
.gm-sumline{margin:4px 0;color:var(--ink);font:400 15px/1.5 var(--font-body)}
.gm-come{margin:10px 0 8px;color:var(--ink);font:600 15px/1.5 var(--font-body)}

/* dialogs */
.gm-dlg{box-sizing:border-box;width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:0;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.gm-dlg::backdrop{background:rgba(20,0,48,.55)}
.gm-dlg-in{display:flex;flex-direction:column;max-height:calc(100dvh - 32px)}
.gm-dlg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 8px}
.gm-dlg-head h3{margin:0;font:700 18px/1.3 var(--font-body)}
.gm-x{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ink);font:400 26px/1 var(--font-body);cursor:pointer}
.gm-x:focus-visible{outline:2px solid var(--focus)}
.gm-dlg-body{padding:0 18px 18px;overflow:auto;overflow-wrap:anywhere}
.gm-dlg-body .actions{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 6px}
.gm-field{display:block;margin:12px 0 4px;font:600 14px/1.4 var(--font-body)}
.gm-dlg select{box-sizing:border-box;width:100%;min-height:44px;padding:8px 10px;background:var(--surface);color:var(--ink);border:1px solid var(--edge);border-radius:12px;font:400 15px var(--font-body)}
.gm-check{display:flex;gap:8px;align-items:center;min-height:44px;font:400 14px/1.4 var(--font-body)}
.gm-cv{display:block;width:100%;height:auto;aspect-ratio:1200/630;border-radius:12px;border:1px solid var(--line)}
.gm-coll{margin:0;padding:0;list-style:none}
.gm-coll>li{padding:12px 0;border-top:1px solid var(--line)}
.gm-coll>li:first-child{border-top:0}
.gm-collq{margin:0 0 4px;font:600 14px/1.4 var(--font-body)}
.gm-collm{margin:0 0 6px;color:var(--muted);font:400 13px/1.4 var(--font-body)}
.gm-bdg{color:var(--status-ink);background:var(--status-bg);padding:1px 8px;border-radius:999px;font:600 12px/1.5 var(--font-body)}
.gm-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.gm-chip{padding:3px 10px;border-radius:999px;background:var(--tag-bg);color:var(--tag-ink);font:500 12px/1.5 var(--font-body)}
.gm-qfn{margin:0 0 6px;color:var(--muted);font:500 13px/1.4 var(--font-body)}
.gm-qfq{margin:0 0 12px;font:700 19px/1.4 var(--font-body)}
.gm-qfa{margin:0 0 8px;padding:12px;background:var(--surface-2);border-radius:12px;font:400 16px/1.5 var(--font-body)}
@media (prefers-reduced-motion:no-preference){.gm-step,.gm-card{transition:border-color .15s}}

.gm-sum .actions{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 0}
.stage .gm-sum .btn:not(.primary),.gm-sum .btn:not(.primary){background:var(--btn2-bg);color:var(--btn2-ink);border-color:var(--btn2-edge)}

/* Desktop: two columns so the card matches the page width instead of becoming a tall strip. */
.gm-col{min-width:0}
.gm-b .gm-h3:first-child{margin-top:0}
@media (min-width:900px){
  .gm-home{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:40px;align-items:start;padding:26px 28px}
  .gm-home[hidden]{display:none}
  .gm-b{padding-left:36px;border-left:1px solid var(--line)}
  .gm-week{max-width:420px}
}
@media (min-width:1200px){.gm-home{padding:28px 32px}}