/* Color Gates. Board positions are cell units in --x/--y times --c, so a resize only rewrites --c. */
:root{
  --cg-tray:#1f2633; --cg-tray-2:#273042; --cg-grid:rgba(255,255,255,.055); --cg-wall:#0f131b;
  --cg-c0:#e5483f; --cg-c1:#2f7fe3; --cg-c2:#f3c331; --cg-c3:#2fa45b; --cg-c4:#9a5bd3; --cg-c5:#f08a24;
  --cg-ink:var(--ink,#211c17); --cg-soft:var(--ink-soft,#6a6253); --cg-accent:var(--crimson,#8e1d1d);
  --cg-card:var(--tile,#f7f0df); --cg-line:var(--line,rgba(33,28,23,.16));
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --cg-tray:#151a24; --cg-tray-2:#1c2330; --cg-wall:#05070b; }
}

/* symbols: one mask per color so color is never the only signal */
.cg-c0{ --cg-col:var(--cg-c0); --cg-sym:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3C/svg%3E") }
.cg-c1{ --cg-col:var(--cg-c1); --cg-sym:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='4' y='4' width='12' height='12' rx='1.5'/%3E%3C/svg%3E") }
.cg-c2{ --cg-col:var(--cg-c2); --cg-sym:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3 17.5 16.5h-15z'/%3E%3C/svg%3E") }
.cg-c3{ --cg-col:var(--cg-c3); --cg-sym:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5 17.5 10 10 17.5 2.5 10z'/%3E%3C/svg%3E") }
.cg-c4{ --cg-col:var(--cg-c4); --cg-sym:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m10 2 2.4 5.2 5.6.6-4.2 3.8 1.2 5.6L10 14.4l-5 2.8 1.2-5.6L2 7.8l5.6-.6z'/%3E%3C/svg%3E") }
.cg-c5{ --cg-col:var(--cg-c5); --cg-sym:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 3h5v4.5H17v5h-4.5V17h-5v-4.5H3v-5h4.5z'/%3E%3C/svg%3E") }

.cg-game, .cg-editor{ --c:44px; position:relative; color:var(--cg-ink); font-family:var(--ui,Inter,system-ui,sans-serif); }

/* HUD */
.cg-hud{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:space-between; margin:0 auto 10px; max-width:calc(var(--c) * 9); }
.cg-stat{ font-size:15px; color:var(--cg-soft); font-variant-numeric:tabular-nums }
.cg-stat b{ color:var(--cg-ink); font-size:19px }
.cg-over .cg-stat b{ color:var(--cg-accent) }
.cg-tools{ display:flex; gap:6px }
.cg-tool{ min-width:40px; height:40px; border-radius:12px; border:1px solid var(--cg-line); background:var(--cg-card); color:var(--cg-ink);
  font:600 17px/1 var(--ui,Inter,system-ui,sans-serif); cursor:pointer; touch-action:manipulation; }
.cg-tool:hover{ border-color:var(--cg-accent); color:var(--cg-accent) }
.cg-tool:disabled{ opacity:.4; cursor:default; color:var(--cg-ink); border-color:var(--cg-line) }
.cg-tool:focus-visible, .cg-btn:focus-visible, .cg-chip:focus-visible{ outline:3px solid color-mix(in srgb, var(--cg-accent) 60%, transparent); outline-offset:2px }

/* stage + board */
.cg-stage{ position:relative; display:flex; justify-content:center; padding:16px; margin:0 auto; width:max-content; max-width:100%;
  background:var(--cg-tray); border-radius:22px; box-shadow:0 18px 40px -26px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06); }
.cg-board{ position:relative; width:calc(var(--c) * var(--w)); height:calc(var(--c) * var(--h)); border-radius:10px;
  background-color:var(--cg-tray-2);
  background-image:linear-gradient(var(--cg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--cg-grid) 1px, transparent 1px);
  background-size:var(--c) var(--c); user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.cg-wall{ position:absolute; left:0; top:0; width:var(--c); height:var(--c);
  transform:translate(calc(var(--x) * var(--c)), calc(var(--y) * var(--c)));
  background:repeating-linear-gradient(45deg, var(--cg-wall) 0 6px, #2a303b 6px 9px); border-radius:6px; box-shadow:inset 0 0 0 2px rgba(0,0,0,.35) }

/* gates: bars just outside the board edge */
.cg-gate{ position:absolute; background:var(--cg-col); border-radius:6px; box-shadow:0 0 12px -2px var(--cg-col); }
.cg-gate.cg-s0{ left:calc(var(--a) * var(--c) + 3px); top:-12px; width:calc(var(--n) * var(--c) - 6px); height:9px }
.cg-gate.cg-s2{ left:calc(var(--a) * var(--c) + 3px); bottom:-12px; width:calc(var(--n) * var(--c) - 6px); height:9px }
.cg-gate.cg-s1{ top:calc(var(--a) * var(--c) + 3px); right:-12px; height:calc(var(--n) * var(--c) - 6px); width:9px }
.cg-gate.cg-s3{ top:calc(var(--a) * var(--c) + 3px); left:-12px; height:calc(var(--n) * var(--c) - 6px); width:9px }
.cg-gate i{ position:absolute; inset:0; margin:auto; width:9px; height:9px; display:none; background:#fff;
  -webkit-mask:var(--cg-sym) center/contain no-repeat; mask:var(--cg-sym) center/contain no-repeat; opacity:.9 }
.cg-sym .cg-gate i{ display:block }
.cg-gate.cg-pop{ animation:cgPop .45s ease-out }
@keyframes cgPop{ 0%{ filter:brightness(1) } 30%{ filter:brightness(1.9); transform:scale(1.12) } 100%{ filter:brightness(1); transform:none } }
.cg-spark{ position:absolute; left:50%; top:50%; width:7px; height:7px; border-radius:50%; background:var(--cg-col); pointer-events:none;
  animation:cgSpark .55s ease-out forwards }
@keyframes cgSpark{ to{ transform:translate(calc(var(--dx) * 34px), calc(var(--dy) * 34px)) scale(.2); opacity:0 } }

/* blocks */
.cg-block{ position:absolute; left:0; top:0; width:calc(var(--bw) * var(--c)); height:calc(var(--bh) * var(--c));
  transform:translate3d(calc(var(--x) * var(--c)), calc(var(--y) * var(--c)), 0);
  transition:transform .075s linear; touch-action:none; cursor:grab; outline:none; z-index:2; will-change:transform; pointer-events:none }
/* only the CELLS take the pointer: an L's bounding box overlaps its neighbours */
.cg-block .cg-cell{ position:absolute; pointer-events:auto; touch-action:none; background:var(--cg-col);
  background-image:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 45%, rgba(0,0,0,.12));
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18) }
.cg-sym .cg-block .cg-cell::after{ content:""; position:absolute; inset:0; margin:auto; width:42%; height:42%;
  background:rgba(255,255,255,.55); -webkit-mask:var(--cg-sym) center/contain no-repeat; mask:var(--cg-sym) center/contain no-repeat }
.cg-c2.cg-block .cg-cell::after{ background:rgba(60,40,0,.45) }
.cg-block.cg-axh .cg-cell{ background-image:repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 3px, transparent 3px 11px), linear-gradient(180deg, rgba(255,255,255,.25), rgba(0,0,0,.1)) }
.cg-block.cg-axv .cg-cell{ background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 3px, transparent 3px 11px), linear-gradient(180deg, rgba(255,255,255,.25), rgba(0,0,0,.1)) }
.cg-axis{ position:absolute; left:4px; top:2px; font:700 15px/1 system-ui,sans-serif; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.55); pointer-events:none }
.cg-block.cg-lift{ cursor:grabbing; z-index:5; filter:drop-shadow(0 8px 10px rgba(0,0,0,.45)) }
.cg-block:focus-visible .cg-cell{ box-shadow:inset 0 0 0 3px #fff }
.cg-block.cg-exit{ transition:transform .28s cubic-bezier(.5,0,.9,.6), opacity .28s ease-in; opacity:0 }
.cg-block.cg-exit .cg-cell, .cg-static .cg-cell{ pointer-events:none }
.cg-block.cg-bump{ animation:cgBump .24s ease }
@keyframes cgBump{ 30%{ filter:brightness(1.25) } 60%{ filter:brightness(.85) } }
.cg-block.cg-hinted .cg-cell, .cg-gate.cg-hinted{ animation:cgPulse 1s ease-in-out 3 }
@keyframes cgPulse{ 50%{ box-shadow:0 0 0 4px #fff, 0 0 18px #fff } }
.cg-ghost{ position:absolute; left:0; top:0; pointer-events:none; z-index:1;
  transform:translate(calc(var(--x) * var(--c)), calc(var(--y) * var(--c))) }
.cg-ghost span{ position:absolute; width:calc(var(--c) - 6px); height:calc(var(--c) - 6px); margin:3px; border:2px dashed #fff; border-radius:8px; opacity:.8 }

/* start cover (daily): the board stays hidden until the clock starts */
.cg-covered .cg-board > *{ visibility:hidden }
.cg-cover{ position:absolute; inset:0; display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; z-index:9; text-align:center; padding:16px }
.cg-cover-sub{ margin:0; color:#cfd6e2; font-size:13px }

/* messages, buttons, states */
.cg-msg{ min-height:1.4em; text-align:center; font-size:14px; color:var(--cg-soft); margin:10px 0 0 }
.cg-msg.warn{ color:var(--cg-accent) }
.cg-msg.ok{ color:#2c8a4d; font-weight:600 }
.cg-btn{ font:600 15px/1.1 var(--ui,Inter,system-ui,sans-serif); padding:11px 18px; border-radius:999px; cursor:pointer; touch-action:manipulation;
  border:1px solid var(--cg-line); background:var(--cg-card); color:var(--cg-ink); }
.cg-btn:hover{ border-color:var(--cg-accent); color:var(--cg-accent) }
.cg-btn:disabled{ opacity:.45; cursor:default }
.cg-primary{ background:var(--cg-accent); border-color:var(--cg-accent); color:#fff; box-shadow:0 8px 22px -12px var(--cg-accent) }
.cg-primary:hover{ color:#fff; filter:brightness(1.07) }
.cg-link{ background:none; border:0; padding:4px; font:inherit; color:var(--cg-soft); text-decoration:underline; cursor:pointer }
.cg-chip{ font:600 14px/1 var(--ui,Inter,system-ui,sans-serif); padding:9px 14px; border-radius:999px; border:1px solid var(--cg-line);
  background:var(--cg-card); color:var(--cg-soft); cursor:pointer }
.cg-chip[aria-pressed="true"], .cg-chip[aria-checked="true"]{ background:var(--cg-accent); border-color:var(--cg-accent); color:#fff }
.cg-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; min-height:300px;
  padding:40px 20px; color:var(--cg-soft); border:1px dashed var(--cg-line); border-radius:18px; background:var(--cg-card) }
.cg-state p{ margin:0; font-size:16px; max-width:34ch }
.cg-state.cg-err{ border-style:solid; border-color:color-mix(in srgb, var(--cg-accent) 40%, var(--cg-line)) }
.cg-spin{ width:30px; height:30px; border-radius:50%; border:3px solid var(--cg-line); border-top-color:var(--cg-accent); animation:cgSpin .8s linear infinite }
@keyframes cgSpin{ to{ transform:rotate(360deg) } }

.cg-daily-head{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; margin:0 0 12px }
.cg-sub{ color:var(--cg-soft); font-size:14px }
.cg-pill{ font:700 12px/1 var(--ui,Inter,system-ui,sans-serif); letter-spacing:.06em; text-transform:uppercase; padding:6px 10px; border-radius:999px; background:var(--cg-tray); color:#fff }
.cg-lv-easy.cg-pill{ background:#2c8a4d } .cg-lv-medium.cg-pill{ background:#b07a12 } .cg-lv-hard.cg-pill{ background:var(--cg-accent) }
.cg-levels{ display:flex; gap:6px }

/* the goal line: color + a slow shimmer (house rule) */
.cg-goal{ font-weight:700; background:linear-gradient(90deg, var(--cg-c0), var(--cg-c5), var(--cg-c2), var(--cg-c3), var(--cg-c1), var(--cg-c4), var(--cg-c0));
  background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:cgShimmer 9s linear infinite }
@keyframes cgShimmer{ to{ background-position:300% 0 } }
.cg-goal-mini{ text-align:center; margin:0 0 10px; font-size:15px } .cg-goal-mini small{ color:var(--cg-soft) }

/* win panel */
.cg-win{ margin:18px auto 0; max-width:480px; text-align:center; padding:18px 16px; border-radius:18px; background:var(--cg-card); border:1px solid var(--cg-line);
  animation:cgRise .35s ease-out }
@keyframes cgRise{ from{ transform:translateY(8px); opacity:0 } }
.cg-win-h{ font:600 22px/1.2 var(--display,"EB Garamond",Georgia,serif); margin:0 0 6px }
.cg-xp{ font:700 13px/1 var(--ui,Inter,system-ui,sans-serif); color:var(--gold,#a9802f); margin-left:6px }
.cg-win-line{ margin:0; font-variant-numeric:tabular-nums; color:var(--cg-ink) }
.cg-win-sub{ margin:4px 0 12px; color:var(--cg-soft); font-size:14px }
.cg-win-actions{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:12px }
.cg-lb{ text-align:left; margin:8px 0 }
.cg-lb-soon{ text-align:center; color:var(--cg-soft); font-size:13.5px; margin:6px 0 }
.cg-replay{ text-align:center; margin:10px 0 0 }

/* settings */
.cg-settings{ position:fixed; inset:0; z-index:2147482000; background:rgba(10,8,6,.5); display:flex; align-items:flex-end; justify-content:center; padding:16px }
@media (min-width:600px){ .cg-settings{ align-items:center } }
.cg-set-card{ width:min(420px, 100%); max-height:85vh; overflow:auto; background:var(--paper,#f3ead6); color:var(--cg-ink); border-radius:18px; padding:16px 18px 18px;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.6); font-family:var(--ui,Inter,system-ui,sans-serif) }
.cg-set-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:17px }
.cg-set-row{ display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--cg-line); font-size:15px; cursor:pointer }
.cg-set-row input{ width:20px; height:20px; margin:0; flex:none; accent-color:var(--cg-accent) }
.cg-set-row small{ display:block; color:var(--cg-soft); font-size:12.5px }
.cg-set-log{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:4px 0 10px } .cg-set-log small{ color:var(--cg-soft) }
.cg-set-help{ font-size:14px; color:var(--cg-soft); border-top:1px solid var(--cg-line); padding-top:10px; margin:0 }
.cg-set-ver{ font-size:11.5px; color:var(--cg-soft); opacity:.75; margin:10px 0 0 }

/* editor */
.cg-ed-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; margin:0 0 10px }
.cg-ed-lab{ font-weight:600; color:var(--cg-soft); font-size:14px }
.cg-ed-size{ display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--cg-soft) } .cg-ed-size b{ min-width:1.2em; text-align:center; color:var(--cg-ink) }
.cg-ed-size .cg-tool{ min-width:34px; height:34px }
.cg-swatch{ width:38px; height:38px; border-radius:50%; border:3px solid transparent; background:var(--cg-col); cursor:pointer; position:relative }
.cg-swatch i{ position:absolute; inset:0; margin:auto; width:16px; height:16px; background:rgba(255,255,255,.7); -webkit-mask:var(--cg-sym) center/contain no-repeat; mask:var(--cg-sym) center/contain no-repeat }
.cg-swatch[aria-checked="true"]{ border-color:var(--cg-ink); box-shadow:0 0 0 2px var(--paper,#f3ead6) inset }
.cg-shape{ padding:6px; border-radius:10px; border:1px solid var(--cg-line); background:var(--cg-card); cursor:pointer }
.cg-shape.on{ border-color:var(--cg-accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--cg-accent) 35%, transparent) }
.cg-mini{ position:relative; display:block; width:calc(var(--mw) * 9px); height:calc(var(--mh) * 9px) }
.cg-mini i{ position:absolute; width:8px; height:8px; left:calc(var(--mx) * 9px); top:calc(var(--my) * 9px); background:var(--cg-ink); border-radius:2px }
.cg-ed-tip{ text-align:center; font-size:13.5px; color:var(--cg-soft); margin:0 0 10px; min-height:1.3em }
.cg-ed-stage{ padding:22px }
.cg-ed-cell{ position:absolute; left:0; top:0; width:var(--c); height:var(--c); border:0; background:transparent; cursor:pointer; padding:0;
  transform:translate(calc(var(--x) * var(--c)), calc(var(--y) * var(--c))) }
.cg-ed-cell:hover{ background:rgba(255,255,255,.08) }
.cg-ed-board .cg-wall, .cg-ed-board .cg-block{ pointer-events:none }
.cg-block.cg-static{ transition:none; cursor:default }
.cg-slot{ position:absolute; padding:0; border:1px dashed rgba(255,255,255,.25); background:transparent; border-radius:5px; cursor:pointer }
.cg-slot.cg-s0{ left:calc(var(--a) * var(--c) + 3px); top:-19px; width:calc(var(--c) - 6px); height:15px }
.cg-slot.cg-s2{ left:calc(var(--a) * var(--c) + 3px); bottom:-19px; width:calc(var(--c) - 6px); height:15px }
.cg-slot.cg-s1{ top:calc(var(--a) * var(--c) + 3px); right:-19px; height:calc(var(--c) - 6px); width:15px }
.cg-slot.cg-s3{ top:calc(var(--a) * var(--c) + 3px); left:-19px; height:calc(var(--c) - 6px); width:15px }
.cg-slot[class*="cg-c"]{ background:var(--cg-col); border-style:solid; border-color:var(--cg-col) }
.cg-ed-status{ text-align:center; min-height:1.4em; margin:12px 0 0; font-size:14.5px; color:var(--cg-soft) }
.cg-ed-status.warn{ color:var(--cg-accent) } .cg-ed-status.ok{ color:#2c8a4d; font-weight:600 }
.cg-ed-actions{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:12px }
.cg-ed-minor .cg-btn{ font-size:13.5px; padding:8px 14px }

@media (prefers-reduced-motion: reduce){
  .cg-goal{ animation:none; background-position:0 0 }
  .cg-block, .cg-block.cg-exit{ transition:none }
  .cg-gate.cg-pop, .cg-win, .cg-block.cg-hinted .cg-cell, .cg-gate.cg-hinted{ animation:none }
  .cg-spin{ animation-duration:1.8s }
}