:root {
  --blue: #1C6CF9;
  --pond: #A9D7FF;
  --green: #00A300;
  --light-green: #9BDE9B;
  --red: #FE0000;
  --white: #FFFFFF;
  --black: #000000;
  --border: 2px solid var(--black);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: var(--light-green);
  color: var(--black);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

button, input { font: inherit; }
button { color: inherit; }

.site-header {
  min-height: 86px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 14px 22px;
  border-bottom: var(--border);
  background: var(--light-green);
}

.arcade-link {
  justify-self: start;
  color: var(--black);
  font-weight: 900;
  letter-spacing: .04em;
  text-decoration: none;
}

.header-copy { text-align: center; }
.header-copy h1 { margin: 0; font-size: clamp(24px, 3vw, 42px); line-height: .95; letter-spacing: -.04em; }
.header-copy p { margin: 5px 0 0; font-size: 14px; }

.plain-button, .text-button {
  border: 0;
  background: transparent;
  padding: 8px 0;
  cursor: pointer;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-header .plain-button { justify-self: end; }
button:disabled { opacity: .35; cursor: default; }

main { width: 100%; }

.status-row {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 18px;
  border-bottom: var(--border);
  background: var(--white);
  font-size: 13px;
}
.status-row strong { margin-right: 8px; }
.status-actions { display: flex; align-items: center; gap: 14px; text-align: right; }
.remote-change { max-width: 520px; font-weight: 700; }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  min-height: calc(100vh - 136px);
}

.pond-shell {
  position: relative;
  overflow: hidden;
  background: var(--pond);
  border-right: var(--border);
  min-height: 620px;
  touch-action: none;
}

.pond-svg {
  width: 100%;
  height: 100%;
  min-height: 620px;
  display: block;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}
.pond-svg.pan-mode { cursor: grab; }
.pond-svg.panning { cursor: grabbing; }
.pond-svg.select-mode { cursor: default; }
.pond-background { fill: var(--pond); }

.grid-line { stroke: rgba(0,0,0,.06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.art-shape, .mini-shape { stroke: none; cursor: inherit; }
.art-shape, .mini-shape { stroke: var(--black); stroke-width: 6; stroke-linejoin: miter; }

.selection-box { fill: none; stroke: var(--black); stroke-width: 4; stroke-dasharray: 12 8; vector-effect: non-scaling-stroke; pointer-events: none; }

.zoom-controls {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  border: var(--border);
  background: var(--white);
}
.zoom-controls button {
  min-width: 42px;
  height: 38px;
  border: 0;
  border-right: 1px solid var(--black);
  background: var(--white);
  font-weight: 900;
  cursor: pointer;
}
.zoom-controls button:last-child { border-right: 0; }

.minimap-wrap {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: min(260px, 34vw);
  border: var(--border);
  background: var(--white);
  box-shadow: 4px 4px 0 rgba(0,0,0,.18);
}
#minimap { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; }
.mini-bg { fill: var(--pond); }

.mini-viewport { fill: rgba(255,255,255,.12); stroke: var(--black); stroke-width: 2; vector-effect: non-scaling-stroke; }

.tool-panel {
  background: var(--white);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tool-group { display: grid; gap: 8px; }
.tool-label { text-transform: uppercase; font-size: 11px; font-weight: 900; letter-spacing: .09em; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: var(--border); }
.segmented button, .shape-button, .compact-actions button {
  min-height: 42px;
  border: 0;
  border-right: 1px solid var(--black);
  background: var(--white);
  cursor: pointer;
  font-weight: 800;
}
.segmented button:last-child { border-right: 0; }
.segmented button.active, .shape-button.active { background: var(--black); color: var(--white); }

.shape-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shape-button { border: var(--border); display: grid; place-items: center; }
.shape-button svg { width: 34px; height: 34px; fill: currentColor; }

.palette { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.swatch {
  aspect-ratio: 1.45 / 1;
  border: var(--border);
  cursor: pointer;
  position: relative;
}
.swatch.active::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 3px solid var(--black);
  mix-blend-mode: difference;
}

.compact-actions { gap: 7px; }
.compact-actions > button, .undo-row { border: var(--border); }
.compact-actions > button { border: var(--border); background: var(--white); }
.undo-row { display: grid; grid-template-columns: 1fr 1fr; }
.undo-row button:first-child { border-right: 1px solid var(--black); }

.submit-card {
  margin-top: auto;
  border-top: var(--border);
  padding-top: 15px;
  display: grid;
  gap: 8px;
}
.submit-card label { font-size: 12px; font-weight: 900; }
.submit-card input { width: 100%; border: var(--border); padding: 10px; background: var(--white); }
.submit-button { border: var(--border); padding: 13px; background: var(--green); color: var(--white); font-weight: 900; cursor: pointer; }
.submit-card p { margin: 0; font-size: 11px; line-height: 1.35; }

.history-dialog, .snapshot-dialog {
  width: min(820px, calc(100vw - 24px));
  max-height: min(780px, calc(100vh - 24px));
  padding: 0;
  border: var(--border);
  background: var(--white);
  box-shadow: 8px 8px 0 var(--black);
}
.history-dialog::backdrop, .snapshot-dialog::backdrop { background: rgba(0,0,0,.45); }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 18px; border-bottom: var(--border); }
.dialog-head h2 { margin: 0; font-size: 24px; }
.dialog-head p { margin: 4px 0 0; font-size: 13px; }
.history-list { padding: 12px; display: grid; gap: 8px; max-height: 610px; overflow: auto; }
.history-item { width: 100%; display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; text-align: left; border: var(--border); padding: 12px; background: var(--white); cursor: pointer; }
.history-item strong { font-size: 15px; }
.history-item span { font-size: 12px; }
.snapshot-canvas-wrap { background: var(--pond); overflow: auto; }
#snapshotSvg { width: 100%; height: auto; display: block; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  background: var(--black);
  color: var(--white);
  padding: 10px 14px;
  font-weight: 800;
  font-size: 13px;
  transition: .18s ease;
  z-index: 20;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 860px) {
  .site-header { grid-template-columns: auto 1fr auto; min-height: 72px; padding: 10px 12px; }
  .arcade-link { font-size: 11px; }
  .header-copy h1 { font-size: 26px; }
  .header-copy p { display: none; }
  .workspace { display: block; }
  .pond-shell { min-height: 58vh; border-right: 0; border-bottom: var(--border); }
  .pond-svg { min-height: 58vh; }
  .tool-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .submit-card { margin-top: 0; grid-column: 1 / -1; }
  .status-row { align-items: flex-start; }
  .status-actions { display: block; }
  .remote-change { display: block; margin-bottom: 5px; }
}

@media (max-width: 540px) {
  .site-header { gap: 8px; }
  .site-header .plain-button { font-size: 12px; }
  .header-copy h1 { font-size: 22px; }
  .status-row { padding: 7px 10px; }
  .status-row > div:first-child span { display: block; margin-top: 2px; }
  .tool-panel { grid-template-columns: 1fr; }
  .minimap-wrap { width: 180px; }
  .zoom-controls { top: 8px; right: 8px; }
}

[hidden] { display: none !important; }
#ghostLayer { opacity: .48; pointer-events: none; }
.layer-row { display: grid; grid-template-columns: 1fr 1fr; border: var(--border); }
.layer-row button { padding: 8px 5px; font-size: 12px; }
.tool-note { margin: 0; font-size: 11px; line-height: 1.4; }
.pond-svg { position: absolute; inset: 0; min-height: 0; }
.pond-shell { height: max(620px, calc(100dvh - 136px)); }
@media (max-width: 860px) { .pond-shell { height: 58dvh; min-height: 320px; } }
button:focus-visible, input:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.palette { grid-template-columns: repeat(4, 1fr); }
kbd { font: inherit; font-size: 11px; border: 1px solid currentColor; padding: 1px 4px; margin-left: 5px; }

.connection-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; background: #fff; border-bottom: 2px solid #000; font-size: 14px; }
.connection-banner button, .export-actions button { background: #fff; border: 2px solid #000; padding: 8px 12px; font-weight: 800; cursor: pointer; }
.draft-warning { margin: 0; padding: 10px 18px; background: #fff; border-bottom: 2px solid #000; font-size: 13px; }
.export-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; background: #fff; border-bottom: 2px solid #000; padding: 8px 18px; font-size: 12px; }
.export-actions { display: flex; gap: 8px; }
.pond-shell { height: max(620px, calc(100dvh - 190px)); }
@media (max-width: 860px) { .pond-shell { height: 58dvh; min-height: 320px; } .export-bar, .connection-banner { padding: 8px 10px; } }

.mobile-canvas-actions { display: none; }
@media (max-width: 860px) {
  .mobile-canvas-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 10px; background: #fff; border-bottom: var(--border); }
  .mobile-canvas-actions button { min-height: 48px; touch-action: manipulation; font-weight: 700; }
}

/* Shared editor cleanup */
.arcade-link img{display:block;width:42px;height:42px}.header-copy p{display:block;margin:0 0 5px;font-size:13px}.site-header{min-height:80px}
.publish-bar{display:flex;justify-content:space-between;align-items:center;gap:18px;background:#fff;padding:12px 18px;border-bottom:var(--border)}
.publish-bar p{font-size:12px;margin:6px 0 0}.submit-button{min-height:46px;background:var(--blue);padding:11px 20px}.signature-field{display:grid;gap:4px;font-size:12px;font-weight:700;grid-template-columns:auto auto}.signature-field span{font-weight:400}.signature-field input{grid-column:1/-1;min-width:0;width:190px;padding:8px;border:var(--border);border-radius:0}
.remote-change{display:flex;align-items:center;gap:10px;text-align:left}.remote-change button,.history-navigation button{background:white;border:var(--border);padding:9px 12px;font-weight:700;cursor:pointer;flex-shrink:0}
.tool-panel{gap:13px}.tool-help{display:grid;gap:9px;border-top:var(--border);padding-top:12px}.pond-svg.select-mode .art-shape{cursor:move}.history-navigation{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:var(--border);font-size:12px}.snapshot-dialog{width:min(1200px,calc(100vw - 24px))}.toast{z-index:30}
@media(max-width:860px){.publish-bar{padding:10px;gap:12px;align-items:start}.publish-bar>div{flex:1}.submit-button{width:100%;font-size:14px;padding:10px}.signature-field{width:110px;display:block;font-size:11px}.signature-field span{display:block}.signature-field input{width:100%;margin-top:4px;font-size:13px}.status-row{flex-wrap:wrap;gap:6px}.status-actions{display:flex;flex-wrap:wrap;text-align:left;gap:8px}.remote-change{display:flex;flex-wrap:wrap;margin:0;max-width:none}.mobile-canvas-actions{grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:sticky;top:0;z-index:5;padding:0;border-bottom:var(--border)}.mobile-canvas-actions button{border:0;border-right:1px solid black;background:#fff;min-height:44px;font-size:12px;padding:4px}.mobile-canvas-actions button.active{background:#000;color:#fff}.mobile-canvas-actions button:last-child{border-right:0}.tool-panel{grid-template-columns:1fr 1fr}.compact-actions,.tool-help{grid-column:1/-1}.pond-shell{height:55dvh;min-height:300px}.tool-panel .segmented button{font-size:12px}.history-navigation{padding:8px}.history-navigation button{padding:9px}.header-copy h1{font-size:25px}}

/* Pond copy and compact layout */
.arcade-link{display:flex;align-items:center;gap:8px;letter-spacing:-.03em;line-height:1;font-size:16px}.arcade-link span{display:block}
.publish-bar{justify-content:flex-start}.publish-group{display:flex;align-items:flex-start;gap:18px;flex:none}.publish-group>div{min-width:240px}.signature-field{margin:0}.signature-field input::placeholder{color:#666;opacity:1}
[data-tool="select"]{font-size:12px!important;white-space:nowrap}
@media(max-width:860px){.publish-bar>.publish-group{flex:0 1 480px}.publish-group{flex-direction:column;gap:8px;width:100%}.publish-group>div{width:100%;min-width:0}.signature-field{display:flex;align-items:center;gap:5px;width:100%;font-size:12px;white-space:nowrap}.signature-field span{display:inline}.signature-field input{width:150px;margin:0 0 0 5px;padding:7px 9px}.pond-shell{height:45dvh;min-height:240px}.mobile-canvas-actions [data-tool="select"]{font-size:10px!important;padding:2px}.arcade-link{font-size:12px;gap:5px}.arcade-link img{width:34px;height:34px}}
@media(max-width:360px){.header-copy h1{font-size:21px}.header-copy p{font-size:11px}.arcade-link{font-size:11px;gap:3px}.arcade-link img{width:28px;height:28px}.site-header{padding-left:9px;padding-right:9px;gap:6px}}
@media(max-width:860px){.tool-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-group{min-width:0}.tool-panel .segmented button{padding:4px}.tool-panel [data-tool="select"]{font-size:10px!important}}