/* learn.shareyourgroup.com/mathgames: big, calm, touch-friendly */
.game{background:var(--surface);border:2px solid var(--teal);border-radius:18px;padding:16px;margin:16px 0;min-height:340px;max-width:640px;margin-left:auto;margin-right:auto;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.game button{font-family:inherit;cursor:pointer;touch-action:manipulation;color:var(--ink)}
.g-load{color:var(--soft);text-align:center;padding-top:120px}
.g-cls{display:inline-block;font-size:.82rem;font-weight:700;border:1px solid var(--line);border-radius:99px;padding:2px 10px;margin-left:6px;color:var(--accent);white-space:nowrap}
.g-lab{font-weight:700;margin:10px 0 6px}
.g-levels,.g-modes{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.g-levels button,.g-modes button{text-align:left;min-height:64px;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--field);display:flex;flex-direction:column;gap:2px}
.g-levels b,.g-modes b{font-size:1.02rem}.g-levels span,.g-modes span{font-size:.88rem;color:var(--soft)}.g-levels em{font-size:.8rem;font-style:normal;color:var(--accent);font-weight:700}
.g-levels button[aria-pressed=true],.g-modes button[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--field))}
.g-start{width:100%;min-height:58px;font-size:1.2rem!important;margin-top:16px;color:var(--accent-ink)!important}
.g-top{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--soft);font-weight:700;font-size:.95rem;min-height:40px}
.g-clock{font-family:var(--mono);color:var(--accent)}
.g-quit{min-height:40px;padding:6px 14px;border-radius:99px;border:1px solid var(--line);background:none;font-size:.88rem;color:var(--soft)!important}
.g-q{font:700 clamp(1.5rem,6.5vw,2.3rem)/1.25 var(--font-head);text-align:center;margin:.5em 0 .4em;overflow-wrap:anywhere}
.g-q b{color:var(--accent)}
.g-pic{display:flex;justify-content:center}
.g-svg{width:100%;max-width:300px;height:auto;display:block}
.g-svg.dots circle{fill:var(--accent)}
.g-svg.clock{max-width:230px}.clock .face{fill:var(--field);stroke:var(--ink);stroke-width:4}.clock text{font:700 17px var(--font);fill:var(--ink)}.clock .tick{stroke:var(--soft);stroke-width:1.5}
.clock .hh{stroke:var(--ink);stroke-width:7;stroke-linecap:round}.clock .mh{stroke:var(--accent);stroke-width:4.5;stroke-linecap:round}.clock .pin{fill:var(--ink)}
.g-svg.pie{max-width:210px}.pie .on{fill:var(--accent);stroke:var(--surface);stroke-width:3}.pie .off{fill:var(--surface2);stroke:var(--soft);stroke-width:2}
.g-svg.angle{max-width:280px}.angle line{stroke:var(--ink);stroke-width:4;stroke-linecap:round}.angle .arc{fill:none;stroke:var(--accent);stroke-width:3}.angle circle{fill:var(--ink)}
.g-svg.money{max-width:340px}.money .coin{fill:#d9b44a;stroke:#8a6d1c;stroke-width:3}.money .note{stroke:#555;stroke-width:2}.money .n20{fill:#f3c98b}.money .n50{fill:#9fd6d2}.money .n100{fill:#c9b6e4}.money text{font:700 15px var(--font);fill:#1b1b1b}
.g-choices{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin:12px 0 4px}
.g-choices.two button{min-height:96px;font-size:clamp(1.5rem,7vw,2.2rem)}
.g-choices button,.g-grid button,.g-tiles button,.g-ops button{min-height:68px;border-radius:14px;border:2px solid var(--field-line);background:var(--field);font:700 clamp(1.25rem,5.5vw,1.7rem) var(--mono)}
.g-choices button:active,.g-grid button:active,.g-pad button:active,.g-tiles button:active{transform:scale(.97)}
.game button.good{background:#1f9d55;border-color:#1f9d55;color:#fff}
.game button.bad{background:#c0392b;border-color:#c0392b;color:#fff}
.game button.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,var(--field))}
.g-fb{text-align:center;font-weight:700;min-height:2.6em;margin:.5em 0 0}.g-fb.good{color:var(--ok)}.g-fb.bad{color:var(--bad)}
.g-typed{font:700 2.2rem/1.2 var(--mono);text-align:center;min-height:54px;margin:0 auto 8px;max-width:220px;border-bottom:3px solid var(--accent)}
.g-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:330px;margin:0 auto}
.g-pad button{min-height:58px;font:700 1.4rem var(--mono);border-radius:12px;border:2px solid var(--field-line);background:var(--field)}
.g-pad .ok{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.g-pad .wide{grid-column:1/-1;font-size:1rem;min-height:46px}
.g-pad.small{max-width:290px;margin-top:12px}.g-pad.small button{min-height:48px;font-size:1.2rem}
.g-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
.g-grid.mem button{min-height:76px;font-size:clamp(.95rem,4.2vw,1.3rem);background:var(--surface2);padding:2px}.g-grid.mem button.up{background:var(--field)}
.g-grid button:disabled,.g-magic button:disabled{opacity:1}
.g-tiles{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}.g-tiles button{min-width:74px}
.g-ops{display:flex;gap:10px;justify-content:center;margin:6px 0}.g-ops button{min-width:62px;min-height:56px;border-radius:50%}
.g-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.game .btn.sm{min-height:44px}
.g-btns .btn{color:var(--accent-ink)}.g-btns .btn.ghost{color:var(--accent)}
.g-magic{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:260px;margin:10px auto}
.g-magic button{aspect-ratio:1;border-radius:12px;border:2px solid var(--field-line);background:var(--field);font:700 1.6rem var(--mono)}
.g-magic button.given{background:var(--surface2);border-color:var(--line)}
.g-done{text-align:center;padding:10px 0}.g-big{font:700 1.8rem var(--font-head);margin:.2em 0}.g-score{font:700 1.5rem var(--mono);margin:.2em 0}.g-new{color:var(--ok);font-weight:700}
.stars{font-size:2.4rem;color:#f5b301;letter-spacing:4px}.stars i{font-style:normal;color:var(--line)}
.g-review{text-align:left;background:var(--surface2);border-radius:12px;padding:6px 14px 10px;margin:12px 0}.g-review ul{margin:0;padding-left:1.1em;font-family:var(--mono);font-size:.95rem}
.gcards{list-style:none;padding:0;margin:12px 0 20px;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.gcards a{display:flex;flex-direction:column;gap:4px;height:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--ink)}
.gcards a:hover{border-color:var(--accent);box-shadow:var(--shadow)}.gcards b{font:700 1.08rem var(--font-head)}.gcards span{font-size:.92rem;color:var(--soft)}.gcards small{margin-top:auto;font-weight:700;color:var(--accent);font-size:.82rem}
.prose .acts,.wrap>.acts{display:flex}
@media (max-width:380px){.game{padding:12px 10px}.g-grid{gap:6px}.g-choices button,.g-grid button{min-height:60px}}
@media (prefers-reduced-motion:reduce){.game button:active{transform:none}}