/* The Forge (School Launch Algebra I side path): the pictures inside each station. The shared engine styles are in
   /courses/shared/shop-game-v2/shop-game.css; this file only adds the forge's picture pieces. No style attributes anywhere.
   Every text color here keeps at least 4.5:1 contrast on the background it sits on. */
.noscript{font:18px Georgia,serif;padding:24px;color:#1F1A15;background:#F1E8D8}
.sg-app .sg-title{letter-spacing:.01em}
.fg-svg{display:block;width:100%;height:auto;max-width:640px;margin:0 auto}
.fg-gridwrap{max-width:400px;margin:0 auto}
.fg-gridwrap.fg-tri{max-width:340px}
.fg-grid{max-width:400px}
.fg-nlwrap{margin:4px 0}
.fg-nl-small{display:block;width:100%;max-width:300px;height:auto}
.sg-app .sg-choices{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.sg-app .sg-choices:not(.sg-choices-wide) .sg-choice{white-space:nowrap}
.sg-app .sg-choices-wide{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.fg-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fg-center{justify-content:center;text-align:center}
.fg-cap{margin:0 0 10px;font-size:22px;font-weight:700;color:#1F1A15;text-align:center;font-variant-numeric:tabular-nums}
.fg-note{margin:10px 0 0;font-size:17px;font-weight:700;color:#4D4239;text-align:center}
.fg-hl{background:#F3E0A8;padding:2px 10px;border-radius:10px;border:2px solid #6B4A08;color:#1F1A15}
/* the slate: chalk on a dark slate board */
.fg-slate{background:#2F3B3A;border:6px solid #8C6A3E;border-radius:14px;padding:12px 18px 14px;color:#F4F1E8;box-shadow:inset 0 0 0 2px #1C1712;max-width:640px;margin:0 auto}
.fg-slate-title{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#D9E2D6;margin-bottom:6px}
.fg-slate-big{margin:4px 0 8px;font-size:26px;font-weight:700;color:#FFFFFF;font-variant-numeric:tabular-nums}
.fg-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fg-lines li{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;border-bottom:1px dashed #6E7F7C;padding-bottom:6px}
.fg-lines li:last-child{border-bottom:0}
.fg-move{flex:0 1 240px;font-size:15px;font-weight:700;color:#D9E2D6}
.fg-res{font-size:22px;font-weight:700;color:#FFFFFF;font-variant-numeric:tabular-nums}
.fg-chalk-note{margin:10px 0 0;font-size:15px;color:#D9E2D6}
/* systems: the key to the two lines */
.fg-key{display:inline-flex;align-items:center;gap:6px;font-size:18px;font-weight:700;color:#1F1A15;background:#FFFDF6;border:2px solid #CDBEA6;border-radius:999px;padding:4px 12px;margin-bottom:8px}
.fg-swatch{display:inline-block;width:22px;height:5px;border-radius:3px}
.fg-sw-red{background:#A8441C}.fg-sw-blue{background:#24496A}
/* exponents written out factor by factor */
.fg-facrow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 4px}
.fg-fac{display:inline-block;min-width:26px;padding:2px 6px;border-radius:8px;background:#F0C29A;border:2px solid #8A3410;color:#1F1A15;font-size:19px;font-weight:700;text-align:center}
.fg-fac-b{background:#CFDCE6;border-color:#24496A}
.fg-cancel{position:relative;opacity:.55}
.fg-cancel::after{content:"";position:absolute;left:-2px;right:-2px;top:48%;height:3px;background:#1F1A15;transform:rotate(-24deg)}
.fg-dot,.fg-op{font-size:20px;font-weight:700;color:#1F1A15}
.fg-op{margin:0 8px}
.fg-frac{display:inline-flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.fg-bar{height:3px;width:min(100%,420px);background:#1F1A15;border-radius:2px}
/* the box method */
.fg-area{margin:0 auto;border-collapse:separate;border-spacing:4px;font-size:22px;font-weight:700;color:#1F1A15;font-variant-numeric:tabular-nums}
.fg-area th{padding:6px 14px;color:#4D4239;font-size:20px}
.fg-area td{min-width:84px;height:62px;text-align:center;border:3px solid #1C1712;border-radius:8px;padding:4px 10px}
.fg-a1{background:#F0C29A}.fg-a2{background:#EBD397}.fg-a3{background:#C6DDB0}
.fg-corner{color:#4D4239}
/* factor pairs */
.fg-pairs{margin:0 auto;border-collapse:collapse;font-size:18px;font-weight:700;color:#1F1A15;font-variant-numeric:tabular-nums}
.fg-pairs th,.fg-pairs td{padding:5px 14px;border:2px solid #CDBEA6;text-align:center}
.fg-pairs th{background:#F3E9D6}
.fg-pairs tr.fg-hit td{background:#C6DDB0;border-color:#2E5824}
/* perfect squares */
.fg-sq{display:inline-block;min-width:44px;padding:6px 8px;border-radius:10px;border:2px solid #CDBEA6;background:#FFFFFF;color:#1F1A15;font-size:19px;font-weight:700;text-align:center}
.fg-sq-also{border-color:#24496A;background:#E6EEF4}
.fg-sq-on{border-color:#8A3410;background:#F0C29A;border-width:3px}
@media (max-width:560px){
  .fg-cap{font-size:19px}
  .fg-res{font-size:19px}
  .fg-area td{min-width:64px;height:52px}
  .fg-area{font-size:19px}
  .fg-nlwrap svg text{font-size:21px}
}
