/* Circle generator — GameDailys magazine system, same as crossplay. */
.cg-tool{margin-top:26px}
.cg-hero{border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:26px 0 22px}
.cg-hero .eyebrow{font:10px var(--type-data);letter-spacing:.18em;text-transform:uppercase;color:var(--site-accent);margin:0 0 10px}
.cg-hero h1{font-size:clamp(28px,4.6vw,44px);line-height:1.15;margin:0 0 12px;font-weight:800}
.cg-hero p{max-width:var(--measure);font-size:14px;line-height:1.9;color:var(--muted);margin:0}

.cg-builder{margin-top:22px;border:1px solid #ccd3bd;border-top:4px solid #2b4e3e;background-color:#e8ecdf;background-image:linear-gradient(90deg,rgba(45,70,50,.035) 1px,transparent 1px),linear-gradient(rgba(45,70,50,.035) 1px,transparent 1px);background-size:16px 16px;padding:20px 20px 16px;box-shadow:4px 4px 0 rgba(54,77,45,.055)}
.cg-io{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end}
.cg-pane{display:flex;flex-direction:column;gap:10px;min-width:0}
.cg-pane>h2{font:10px var(--type-data);letter-spacing:.12em;text-transform:uppercase;color:#617153;margin:0 0 2px;font-weight:400}
.cg-pane label{display:block}
.cg-pane label>span{display:block;font:10px var(--type-data);color:#617153;margin-bottom:5px}
.cg-pane select,.cg-pane input{width:100%;border:1px solid #b9c2ae;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;padding:9px 10px;border-radius:0;min-height:40px}
.cg-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;border-top:1px solid #bdc8b1;padding-top:14px}
.cg-actions button{border:1px solid var(--site-accent);padding:10px 18px;font-size:13px;font-weight:700;cursor:pointer;border-radius:0}
.cg-actions [data-cg-share],.cg-actions [data-cg-copy]{background:var(--site-accent);color:var(--accent-ink)}
.cg-actions [data-cg-reset]{background:var(--surface);color:var(--site-accent)}
.cg-actions button:active{transform:translateY(1px)}
.cg-actions button:disabled{opacity:.45;cursor:not-allowed}
.cg-actions button:focus-visible,.cg-pane select:focus-visible,.cg-pane input:focus-visible,.cg-preset:focus-visible{outline:2px solid var(--site-accent);outline-offset:2px}
.cg-presets{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cg-presets>span{font:10px var(--type-data);color:#617153}
.cg-preset{border:1px solid #b9c2ae;background:var(--surface);font-size:11px;padding:7px 12px;cursor:pointer;color:var(--ink)}
.cg-preset:hover{border-color:var(--site-accent);color:var(--site-accent)}

.cg-result{margin-top:22px;border:1px solid var(--line);border-top:2px solid var(--site-accent);background:var(--surface);padding:20px}
.cg-stat-label{font:10px var(--type-data);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cg-big{display:block;font-size:clamp(26px,4.6vw,40px);font-weight:800;line-height:1.15;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.cg-sub{font-size:12px;color:var(--muted)}
.cg-hint{margin:0;font-size:13px;color:var(--muted)}

.cg-canvas{margin-top:18px;border:1px solid var(--line);background:var(--surface);padding:18px;overflow-x:auto}
.cg-grid{display:grid;gap:1px;width:max-content;margin:0 auto}
.cg-row{display:contents}
.cg-row i{display:block;width:var(--cell,14px);height:var(--cell,14px);background:var(--canvas);border:1px solid rgba(120,130,110,.18)}
.cg-row i.on{background:var(--site-accent);border-color:var(--site-accent)}

.cg-layers-wrap{margin-top:18px;border:1px solid var(--line);background:var(--surface);padding:18px}
.cg-layers-wrap h2{font-size:15px;font-weight:800;margin:0 0 12px}
.cg-layers{margin:0;padding:0;list-style:none;columns:2;column-gap:32px;font-size:12px}
.cg-layers li{display:flex;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line);break-inside:avoid}
.cg-layers li b{flex:0 0 52px;font:10px var(--type-data);letter-spacing:.06em;color:var(--muted);font-weight:400;padding-top:2px}
.cg-layers li span{font-variant-numeric:tabular-nums}
.cg-layers li.cg-empty span{color:var(--muted)}

.cg-seo{margin-top:34px;border-top:1px solid var(--line)}
.cg-seo section{margin-top:26px}
.cg-seo h2{font-size:16px;font-weight:800;margin:0 0 12px}
.cg-seo p{max-width:var(--measure);font-size:13px;line-height:1.9;color:var(--muted);margin:0 0 10px}
.cg-table{width:100%;max-width:640px;border-collapse:collapse;font-size:12.5px}
.cg-table th,.cg-table td{border:1px solid var(--line);padding:8px 12px;text-align:left;font-variant-numeric:tabular-nums}
.cg-table th{font:10px var(--type-data);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:400;background:var(--canvas)}
.cg-faq details{border-bottom:1px solid var(--line);padding:14px 0}
.cg-faq summary{font-size:13px;font-weight:700;cursor:pointer}
.cg-faq p{margin:10px 0 0}
.cg-links{display:flex;flex-wrap:wrap;gap:10px 22px}
.cg-links a{display:inline-block;font-size:12px;font-weight:700;color:var(--site-accent)}

@media(prefers-color-scheme:dark){
  .cg-builder{background-color:#2d3529;border-color:#49563d}
  .cg-pane>h2,.cg-pane label>span,.cg-presets>span{color:#b4c3a4}
  .cg-pane select,.cg-pane input,.cg-preset{background:#272b25;border-color:#4e5d41}
  .cg-actions{border-color:#4e5d41}
  .cg-row i{border-color:rgba(192,211,179,.14)}
}
@media(max-width:780px){
  .cg-builder{padding:16px 14px}
  .cg-io{grid-template-columns:1fr}
  .cg-layers{columns:1}
}