/* Rubik's Cube games: recognition trainer, move detective, notation quiz. Loaded on /play pages in the "cube" category. */
.cg-play{display:grid;gap:14px;justify-items:center;padding:clamp(10px,2vw,20px)}
.cg-pic{width:min(260px,70vw);padding:14px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.cg-pic .cube-top{display:block;width:100%;height:auto}
.cg-prompt{margin:0;font:600 clamp(17px,2.4vw,22px)/1.4 var(--sans);text-align:center}
.cg-prompt code{padding:4px 12px;border-radius:10px;background:var(--c-soft,#DDF3EF);color:var(--c-ink,#09574E);font:800 1.15em ui-monospace,Menlo,Consolas,monospace}
.cg-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(520px,100%)}
.cg-choices.wide{grid-template-columns:1fr}
.cg-opt,.cg-mv{padding:13px 14px;border-radius:14px;border:1.5px solid var(--line-2);background:var(--card);color:var(--ink);font:700 16px/1.3 var(--sans);cursor:pointer;text-align:center;transition:transform .12s,border-color .12s,background .12s}
.cg-opt:hover:not(:disabled),.cg-mv:hover:not(:disabled){border-color:var(--c-cubing,#0B7A6E);transform:translateY(-1px)}
.cg-opt code,.cg-mv{font-family:ui-monospace,Menlo,Consolas,monospace}
.cg-opt.good{background:#DDF3EF;border-color:#0B7A6E}.cg-opt.bad{background:#FBE8E2;border-color:#C24A2C;color:#8F2F18}
.cg-opt:disabled,.cg-mv:disabled{opacity:.55;cursor:default}
.cg-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.cg-msg{margin:0;min-height:1.5em;text-align:center;font-weight:600}.cg-msg.good{color:#09574E}.cg-msg.bad{color:#8F2F18}
.cg-more{display:grid;gap:8px;justify-items:center;text-align:center}.cg-more p{margin:0}
.cg-more code,code.alg{padding:4px 10px;border-radius:9px;background:#DDF3EF;color:#09574E;font:700 .95em ui-monospace,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.cg-nets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(780px,100%)}
.cg-nets figure,.cg-mine{margin:0;display:grid;gap:6px;justify-items:center;padding:10px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.cg-nets figcaption,.cg-mine figcaption{font:700 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--c-cubing-ink,#09574E)}
.cg-net .cube-net{--fw:clamp(38px,7.4vw,64px)}
.cg-mine{width:min(390px,100%)}
.cg-chosen{margin:0;font-weight:700;font-family:ui-monospace,Menlo,Consolas,monospace;text-align:center}
.cg-pad{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;width:min(560px,100%)}
.cg-pad .cg-mv{padding:11px 4px;font-size:15px}
.cg-net i.chg{outline:2px solid #C24A2C;outline-offset:-2px}
@media(max-width:560px){.cg-nets{grid-template-columns:1fr}.cg-choices{grid-template-columns:1fr}.cg-pad{grid-template-columns:repeat(4,minmax(0,1fr))}}