:root{--cclash-bg-top: #071a38;--cclash-bg-mid: #15366f;--cclash-bg-bottom: #0f2648;--cclash-card: rgba(7, 18, 38, .86);--cclash-ink: #f3f7ff;--cclash-muted: #bccbea;--cclash-border: rgba(255, 255, 255, .2);--cclash-shadow: 0 14px 30px rgba(3, 7, 14, .38)}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Trebuchet MS,Segoe UI,sans-serif;color:var(--cclash-ink);background:radial-gradient(circle at 10% 5%,rgba(129,208,255,.25),transparent 45%),radial-gradient(circle at 85% 10%,rgba(255,129,130,.18),transparent 40%),linear-gradient(180deg,var(--cclash-bg-top),var(--cclash-bg-mid) 54%,var(--cclash-bg-bottom))}.cclash{width:min(980px,100%);margin:0 auto;padding:1rem .85rem 1.6rem;display:grid;gap:.95rem}.cclash__hero,.cclash__panel,.cclash__notes,.cclash__seo{border-radius:16px;border:1px solid var(--cclash-border);box-shadow:var(--cclash-shadow)}.cclash__hero{padding:1rem 1rem 1.1rem;background:#050e1eb8}.cclash__eyebrow{margin:0;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cclash-muted)}.cclash h1{margin:.38rem 0 0;font-size:clamp(1.8rem,5.1vw,2.7rem);line-height:1.08}.cclash__lead{margin:.7rem 0 0;color:#d7e6ff;line-height:1.42;max-width:64ch}.cclash__panel{background:var(--cclash-card);padding:.86rem}.cclash__hud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem .85rem;margin-bottom:.66rem}.cclash__hud p{margin:0;color:#dbe7ff;font-weight:600}.cclash__canvas-wrap{position:relative;width:100%;aspect-ratio:3 / 4;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.28);background:#050c19}#cclash-canvas{display:block;width:100%;height:100%;touch-action:none}.cclash__overlay{position:absolute;inset:0;display:grid;place-items:center;background:#0207108f;padding:.9rem}.cclash__overlay.is-hidden{display:none}.cclash__overlay-card{width:min(100%,420px);border-radius:14px;border:1px solid rgba(126,205,255,.44);background:#040d1eeb;box-shadow:0 11px 26px #04091280;padding:.95rem;text-align:center}.cclash__overlay-card h2{margin:0}.cclash__overlay-card p{margin:.62rem 0 0;color:#d5e6ff;line-height:1.38}#cclash-start{margin-top:.86rem;border:0;min-height:44px;border-radius:10px;width:min(220px,100%);font-size:1rem;font-weight:700;color:#08243e;background:linear-gradient(180deg,#bff0ff,#70d4ff);cursor:pointer}#cclash-start:hover{filter:brightness(1.05)}.cclash__feedback{margin:.7rem 0 0;min-height:1.35rem;color:#dce9ff;font-weight:700}.cclash__feedback.is-good{color:#a8ffc2}.cclash__feedback.is-bad{color:#ffb4bd}.cclash__controls{margin-top:.74rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.54rem}.cclash__color-btn{border:0;border-radius:12px;min-height:48px;color:#fff;font-weight:700;font-size:.95rem;cursor:pointer;transition:transform .12s ease,filter .12s ease}.cclash__color-btn:hover{transform:translateY(-1px);filter:brightness(1.04)}.cclash__color-btn:active{transform:translateY(1px)}.cclash__color-btn[data-color=red]{background:linear-gradient(180deg,#ff7c7e,#d33c52)}.cclash__color-btn[data-color=green]{background:linear-gradient(180deg,#5fe29c,#21995f)}.cclash__color-btn[data-color=blue]{background:linear-gradient(180deg,#6ca8ff,#2f61da)}.cclash__color-btn[data-color=yellow]{background:linear-gradient(180deg,#ffd86e,#d79a1f);color:#352508}.cclash__notes,.cclash__seo{background:#040e1fad;padding:.92rem}.cclash__notes h2,.cclash__seo h2{margin-top:0}.cclash__notes ol{margin:.5rem 0;padding-left:1.08rem}.cclash__notes li{margin:.34rem 0;line-height:1.38}.cclash__hint{margin:.34rem 0 0;color:var(--cclash-muted)}kbd{border:1px solid rgba(255,255,255,.3);border-radius:5px;padding:0 .35rem;background:#ffffff14}@media(min-width:720px){.cclash{padding:1.15rem}.cclash__canvas-wrap,.cclash__controls{max-width:520px;margin-inline:auto}}@media(min-width:920px){.cclash{grid-template-columns:1.3fr 1fr;grid-template-areas:"hero hero" "panel notes" "panel seo"}.cclash__hero{grid-area:hero}.cclash__panel{grid-area:panel}.cclash__notes{grid-area:notes}.cclash__seo{grid-area:seo}}