.color-pop-page main{max-width:800px;margin:auto;padding:20px 18px 36px}.cp-header{display:flex;justify-content:space-between;font-size:14px}.cp-header a,.cp-guide a{color:#315fa6}.cp-heading{text-align:center;margin:22px 0 16px}.cp-heading h1{font-size:36px;letter-spacing:-1px;margin:0;color:#52528b}.cp-heading p{color:#65708a;margin:7px 0;font-size:15px}.cp-game{max-width:480px;margin:auto;padding:16px;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-lg)}.cp-toolbar{display:flex;gap:24px;align-items:center}.cp-toolbar div{display:grid;gap:2px}.cp-toolbar small{color:#6b748c;font-size:11px;text-transform:uppercase;letter-spacing:1px}.cp-toolbar strong{font-size:23px;color:#4b5184}.cp-toolbar button{margin-left:auto;font-size:12px}.cp-game button{min-height:42px;border-radius:12px;padding:8px 14px}.cp-goal{display:grid;gap:7px;margin:12px 0;font-size:13px;color:#59627f}.cp-goal progress{width:100%;height:7px;border:0;border-radius:6px;overflow:hidden;accent-color:#a480dc}.cp-goal progress::-webkit-progress-bar{background:#eeebf8}.cp-goal progress::-webkit-progress-value{background:linear-gradient(90deg,#a480dc,#ea86a6)}.cp-stage{position:relative;border:1px solid #e0e5f4;border-radius:18px;overflow:hidden}.cp-stage canvas{display:block;width:100%;height:auto;aspect-ratio:420/620;touch-action:none;cursor:crosshair}.cp-stage canvas:focus-visible{outline:3px solid #6677ae;outline-offset:-3px}.cp-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#f5f8ffb8;padding:18px}.cp-overlay[hidden]{display:none}.cp-overlay>div{padding:24px 18px;border-radius:22px;text-align:center;background:#fff;box-shadow:0 8px 30px #65618c20;width:100%}.cp-overlay h2{font-size:25px;margin:8px 0}.cp-overlay p{color:#616b85;line-height:1.6;font-size:14px}.cp-badge{color:#d9a345;font-size:34px}.cp-overlay button,.cp-controls [data-cp=fire]{background:#7666b7;color:white;border-color:#7666b7}.cp-status{min-height:2.6em;font-size:13px;line-height:1.4;color:#59627f;margin:12px 0 7px}.cp-controls{display:flex;gap:10px}.cp-controls button{flex:1}.cp-controls [data-cp=fire]{flex:2;font-weight:800}.cp-help{color:#6b748c;font-size:12px;line-height:1.6;margin:10px 0 0}.cp-help span{display:block}.cp-game button:disabled{opacity:.45;cursor:default}.cp-game dialog{max-width:340px;width:calc(100% - 36px);border:1px solid var(--line);border-radius:20px;padding:24px;color:var(--ink)}.cp-game dialog::backdrop{background:#2d314255}.cp-game dialog h2{margin-top:0;font-size:22px}.cp-game dialog p{font-size:14px;line-height:1.6}.cp-guide{font-size:15px;line-height:1.8;margin-top:28px}.cp-guide h2{font-size:22px}.color-pop-page #site-footer{position:static;padding:18px;line-height:2}.color-pop-page #site-footer a{display:inline-block}@media(max-width:520px){.color-pop-page main{padding:14px 10px 28px}.cp-heading{margin:16px 0 12px}.cp-heading h1{font-size:30px}.cp-game{padding:12px;border-radius:20px}.cp-toolbar{gap:20px}.cp-toolbar strong{font-size:20px}.cp-heading p{font-size:14px}} 

@media(min-width:651px){.cp-stage{width:min(100%,calc((100svh - 330px)*.6774));min-width:250px;margin-inline:auto}.cp-game{max-width:420px}.cp-heading{margin:14px 0 12px}.cp-heading h1{font-size:32px}}
/* Override the shared arcade canvas height cap: never distort the hex grid. */
.cp-stage canvas{max-height:none;max-width:100%}
@media(max-width:650px){.cp-stage{width:min(100%,calc((100svh - 380px)*.6774));min-width:min(240px,100%);margin-inline:auto}}