:root {
  color-scheme: light;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ink:#18202a; --muted:#697586; --line:#d8dee7; --panel:rgba(255,255,255,.96);
  --canvas:#f7f9fc; --green-fill:rgba(34,197,94,.25); --cell-size:132px;
  --svg-scale:calc(var(--cell-size) / 273.067); --art-size:calc(433.067 * var(--svg-scale)); --art-offset:calc(-80 * var(--svg-scale));
  --editor-cell:360px; --editor-scale:calc(var(--editor-cell) / 273.067); --editor-art:calc(433.067 * var(--editor-scale)); --editor-offset:calc(-80 * var(--editor-scale));
}
* { box-sizing:border-box; }
button,input,code,output { font-family:inherit; }
html,body { width:100%; height:100%; }
body { margin:0; overflow:hidden; color:var(--ink); background:var(--canvas); }
button,input { font:inherit; }
button { color:inherit; }
.canvas { position:fixed; inset:0; overflow:hidden; cursor:grab; touch-action:none; background-color:var(--canvas); background-image:radial-gradient(circle,#d8e0e9 1px,transparent 1px); background-size:24px 24px; background-position:var(--grid-x,0) var(--grid-y,0); }
.canvas.is-panning { cursor:grabbing; }
.world { position:absolute; left:0; top:0; width:1px; height:1px; transform-origin:0 0; will-change:transform; }
.placement-layer,.piece-layer { position:absolute; left:0; top:0; width:1px; height:1px; pointer-events:none; }
.empty-hint { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); color:#8a96a6; font-size:14px; pointer-events:none; user-select:none; }

.toolbox { position:fixed; z-index:50; left:18px; top:18px; width:286px; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--panel); backdrop-filter:blur(14px); }
.toolbox-toggle { width:100%; height:42px; display:flex; align-items:center; justify-content:space-between; border:0; padding:0 14px; background:transparent; font-weight:650; cursor:pointer; }
.toolbox-toggle .chevron { transition:transform .18s ease; }
.toolbox.is-collapsed .chevron { transform:rotate(180deg); }
.toolbox-body { max-height:360px; padding:0 12px 12px; overflow:hidden; transition:max-height .2s ease,padding .2s ease,opacity .15s ease; }
.toolbox.is-collapsed .toolbox-body { max-height:0; padding-top:0; padding-bottom:0; opacity:0; }
.toolbox-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.toolbox-piece { position:relative; aspect-ratio:1; min-width:0; overflow:hidden; border:1px solid #dce2e9; border-radius:10px; background:#fbfcfe; }
.toolbox-piece:hover { border-color:#aab5c2; background:#fff; }
.toolbox-drag-area { position:absolute; inset:0; overflow:hidden; cursor:grab; touch-action:none; user-select:none; }
.toolbox-drag-area .piece-art { position:absolute; inset:8%; transform:rotate(var(--rotation)); transition:transform .14s ease; pointer-events:none; }
.toolbox-drag-area img { width:100%; height:100%; display:block; }
.toolbox-piece code { position:absolute; right:4px; bottom:3px; padding:1px 3px; border-radius:4px; background:rgba(255,255,255,.86); color:#6b7582; font-size:8px; pointer-events:none; }
.rotate-button { position:absolute; z-index:3; left:5px; top:5px; width:25px; height:25px; display:grid; place-items:center; border:1px solid #cbd3dd; border-radius:50%; background:rgba(255,255,255,.96); cursor:pointer; font-size:16px; line-height:1; }
.clear-canvas { position:fixed; right:18px; bottom:18px; z-index:50; border:1px solid #cbd3dd; border-radius:10px; padding:10px 14px; background:var(--panel); backdrop-filter:blur(12px); cursor:pointer; }

.canvas-piece,.placement-ghost { position:absolute; width:var(--cell-size); height:var(--cell-size); border:0; padding:0; background:transparent; }
.canvas-piece { pointer-events:auto; cursor:grab; }
.canvas-piece .piece-art,.placement-ghost .piece-art { position:absolute; left:var(--art-offset); top:var(--art-offset); width:var(--art-size); height:var(--art-size); transform:rotate(var(--rotation)); transform-origin:center; pointer-events:none; z-index:1; }
.canvas-piece .piece-outline { position:absolute; left:var(--art-offset); top:var(--art-offset); width:var(--art-size); height:var(--art-size); transform:rotate(var(--rotation)); transform-origin:center; overflow:visible; pointer-events:none; z-index:3; }
.canvas-piece img,.placement-ghost img { width:100%; height:100%; display:block; }
.piece-art svg { width:100%; height:100%; display:block; overflow:visible; }
.canvas-piece canvas { position:absolute; left:var(--art-offset); top:var(--art-offset); width:var(--art-size); height:var(--art-size); pointer-events:none; z-index:2; }
.piece-name-label { position:absolute; z-index:5; left:50%; top:calc(100% + 7px); transform:translateX(-50%); width:max-content; max-width:none; padding:4px 8px; border:2px solid #111; border-radius:6px; background:rgba(255,255,255,.96); color:#18202a; font:29.25px/1.1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; white-space:nowrap; overflow:visible; text-overflow:clip; opacity:0; pointer-events:none; }
.canvas-piece:hover .piece-name-label,.canvas-piece:focus-visible .piece-name-label { opacity:1; }
.placement-ghost { opacity:.75; pointer-events:none; }
.placement-ghost img { filter:invert(49%) sepia(58%) saturate(676%) hue-rotate(92deg) brightness(91%) contrast(88%); }
.placement-ghost::after { content:""; position:absolute; inset:0; border-radius:5px; background:var(--green-fill); }
.drag-preview { position:fixed; z-index:1000; width:var(--art-size); height:var(--art-size); pointer-events:none; opacity:.82; transform:translate(-50%,-50%); }
.drag-preview .piece-art { width:100%; height:100%; transform:rotate(var(--rotation)); }
.drag-preview img { width:100%; height:100%; display:block; }
.status { position:fixed; left:50%; bottom:18px; z-index:2100; transform:translateX(-50%); min-width:220px; max-width:70vw; padding:9px 13px; border-radius:999px; color:#fff; background:rgba(24,32,42,.9); text-align:center; font-size:13px; opacity:0; pointer-events:none; transition:opacity .15s ease; }
.status.visible { opacity:1; }
.reservation-layer { position:absolute; inset:0; pointer-events:none; z-index:4; }
.reservation-lock { position:absolute; width:var(--cell-size); height:var(--cell-size); border:2px dashed #2563eb; border-radius:16px; background:rgba(37,99,235,.12); display:grid; place-items:center; color:#123b86; font-size:11px; font-weight:700; text-align:center; }
.live-badge { position:fixed; left:18px; bottom:84px; z-index:60; display:flex; align-items:center; gap:7px; border:1px solid #cbd3dd; border-radius:999px; padding:8px 11px; background:rgba(255,255,255,.92); color:#4b5563; font-size:12px; box-shadow:0 5px 18px rgba(15,23,42,.08); }
.live-badge span { width:8px; height:8px; border-radius:50%; background:#94a3b8; }
.live-badge.is-live span { background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.15); }
.live-badge.is-connecting span { background:#f59e0b; }

.piece-inspector[hidden] { display:none; }
.piece-inspector {
  position:fixed;
  z-index:80;
  width:438px;
  overflow:hidden;
  border:2px solid #000;
  border-radius:24px;
  background:rgba(255,255,255,.96);
  box-shadow:none;
  backdrop-filter:blur(16px);
  font-family:inherit;
  animation:piece-inspector-in .16s cubic-bezier(.2,.8,.2,1);
}
.piece-inspector-header {
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:7px 10px 7px 18px;
  border-bottom:1px solid #d8dee7;
  background:rgba(248,250,252,.94);
  cursor:move;
  user-select:none;
  touch-action:none;
}
.piece-inspector-header div { min-width:0; }
.piece-inspector-header strong {
  display:block;
  overflow:hidden;
  color:#18202a;
  font-family:inherit;
  font-size:23px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.piece-inspector-close {
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:grid;
  place-items:center;
  border:2px solid #000;
  border-radius:15px;
  padding:0 0 2px;
  background:#fff;
  color:#526070;
  cursor:pointer;
  font:400 32px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.piece-inspector-close:hover { color:#18202a; background:#f1f5f9; }
.piece-inspector-stage {
  position:relative;
  height:417px;
  overflow:hidden;
  background-color:#fff;
  background-image:radial-gradient(circle,#d8e0e9 1px,transparent 1px);
  background-size:20px 20px;
}
.piece-inspector-piece {
  --inspector-cell:270px;
  --inspector-scale:calc(var(--inspector-cell) / 273.067);
  --inspector-art:calc(433.067 * var(--inspector-scale));
  --inspector-offset:calc(-80 * var(--inspector-scale));
  position:absolute;
  left:50%;
  top:50%;
  width:var(--inspector-cell);
  height:var(--inspector-cell);
  transform:translate(-50%,-50%);
}
.piece-inspector-piece .piece-art,
.piece-inspector-piece .piece-outline,
.piece-inspector-piece canvas {
  position:absolute;
  left:var(--inspector-offset);
  top:var(--inspector-offset);
  width:var(--inspector-art);
  height:var(--inspector-art);
  transform:rotate(var(--rotation));
  transform-origin:center;
  pointer-events:none;
}
.piece-inspector-piece .piece-art { z-index:1; }
.piece-inspector-piece canvas { z-index:2; }
.piece-inspector-piece .piece-outline { z-index:3; overflow:visible; }
.piece-inspector-piece.is-selected { z-index:2; }
@keyframes piece-inspector-in {
  from { opacity:0; transform:translateY(5px) scale(.975); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

.drawing-modal[hidden] { display:none; }
.drawing-modal {
  position:fixed;
  inset:0;
  z-index:2000;
  padding:0;
  background-color:var(--canvas);
  background-image:radial-gradient(circle,#d8e0e9 1px,transparent 1px);
  background-size:24px 24px;
  animation:drawing-focus-in .18s ease-out;
}
.drawing-dialog {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
}
.drawing-toolbar {
  position:absolute;
  z-index:20;
  left:50%;
  top:14px;
  transform:translateX(-50%);
  width:min(980px,calc(100vw - 28px));
  min-height:52px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 10px;
  border:1px solid rgba(190,200,212,.9);
  border-radius:18px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px);
  overflow-x:auto;
}
.color-palette { display:flex; align-items:center; gap:7px; flex:none; }
.color-swatch { width:28px; height:28px; flex:none; border:2px solid #fff; border-radius:50%; background:var(--swatch); cursor:pointer; box-shadow:0 0 0 1px #c8d0da; }
.color-swatch.selected { box-shadow:0 0 0 3px #2563eb; }
.toolbar-divider { width:1px; height:28px; flex:none; background:var(--line); }
.size-control { min-width:190px; display:flex; align-items:center; gap:8px; color:#4b5563; font-size:12px; font-weight:600; }
.size-control input { width:120px; }
.size-control output { width:24px; color:#6b7280; font-variant-numeric:tabular-nums; }
.icon-button { width:38px; height:38px; flex:none; display:grid; place-items:center; border:1px solid #cbd3dd; border-radius:11px; background:rgba(255,255,255,.94); cursor:pointer; }
.icon-button svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.icon-button.active { color:#fff; border-color:#334155; background:#334155; }
.icon-button:disabled { opacity:.38; cursor:default; }
.toolbar-spacer { flex:1; min-width:8px; }
.done-button { flex:none; border:0; border-radius:11px; padding:9px 17px; color:#fff; background:#2563eb; cursor:pointer; }
.drawing-stage-wrap {
  position:absolute;
  inset:0;
  overflow:hidden;
  padding:0;
  background:transparent;
  cursor:grab;
  touch-action:none;
}
.drawing-stage-wrap.is-panning { cursor:grabbing; }
.drawing-stage {
  position:absolute;
  left:50%;
  top:50%;
  flex:none;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  transform-origin:center;
  will-change:transform;
}
.editor-piece { position:absolute; width:var(--editor-cell); height:var(--editor-cell); }
.editor-piece .piece-art { position:absolute; left:var(--editor-offset); top:var(--editor-offset); width:var(--editor-art); height:var(--editor-art); transform:rotate(var(--rotation)); transform-origin:center; pointer-events:none; z-index:1; }
.editor-piece .piece-outline { position:absolute; left:var(--editor-offset); top:var(--editor-offset); width:var(--editor-art); height:var(--editor-art); transform:rotate(var(--rotation)); transform-origin:center; overflow:visible; pointer-events:none; z-index:3; }
.editor-piece img { width:100%; height:100%; display:block; }
.editor-piece canvas { position:absolute; left:var(--editor-offset); top:var(--editor-offset); width:var(--editor-art); height:var(--editor-art); pointer-events:none; z-index:2; }
.editor-piece.is-editable { z-index:3; }
.editor-piece.is-editable canvas { pointer-events:auto; cursor:crosshair; touch-action:none; }
.editor-piece.is-editable.eraser-mode canvas { cursor:not-allowed; }
.editor-piece.is-editable.fill-mode canvas { cursor:cell; }
.editor-piece:not(.is-editable) { opacity:1; }
.piece-layer.is-editor-context {
  z-index:1;
  transform-origin:0 0;
  pointer-events:none;
}
.piece-layer.is-editor-context .canvas-piece {
  pointer-events:none;
  cursor:default;
}
.piece-layer.is-editor-context .canvas-piece.is-editor-active-source {
  visibility:hidden;
}
.piece-layer.is-editor-context .piece-name-label {
  display:none;
}
@keyframes drawing-focus-in {
  from { opacity:0; transform:scale(.985); }
  to { opacity:1; transform:scale(1); }
}

@media (max-width:700px) {
  .toolbox { width:250px; }
  .drawing-toolbar { top:8px; width:calc(100vw - 12px); gap:7px; border-radius:14px; }
  .color-swatch { width:24px; height:24px; }
  .size-control { min-width:145px; }
  .size-control input { width:78px; }

}

/* UI refinement pass */
.canvas { background-image:radial-gradient(circle,#bfcbd8 1.25px,transparent 1.35px); background-size:20px 20px; }
.toolbox { width:318px; cursor:default; }
.toolbox-toggle { cursor:move; user-select:none; }
.toolbox-body { max-height:410px; padding:0 14px 14px; }
.toolbox-grid { gap:10px; }
.toolbox-piece { border-radius:12px; }
.toolbox-drag-area .piece-art { inset:5%; }
.rotate-button { width:28px; height:28px; }
.canvas-actions { position:fixed; right:18px; bottom:18px; z-index:50; display:flex; gap:8px; align-items:center; }
.clear-canvas { position:static; }
.canvas-icon-button { width:42px; height:42px; border:1px solid #cbd3dd; border-radius:10px; background:var(--panel); backdrop-filter:blur(12px); cursor:pointer; font-size:22px; line-height:1; }
.drawing-toolbar { width:min(1100px,calc(100vw - 20px)); min-height:48px; gap:6px; padding:6px 8px; overflow:visible; flex-wrap:nowrap; }
.color-palette { gap:5px; min-width:0; }
.color-swatch,.custom-color { width:25px; height:25px; }
.custom-color { position:relative; flex:none; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px #c8d0da; background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red); cursor:pointer; overflow:hidden; }
.custom-color.selected { box-shadow:0 0 0 3px #2563eb; }
.custom-color input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.custom-color span { position:absolute; inset:5px; border-radius:50%; background:var(--custom-color,#06b6d4); border:1px solid rgba(255,255,255,.9); pointer-events:none; }
.size-control { min-width:130px; gap:5px; }
.size-control input { width:72px; }
.icon-button { width:34px; height:34px; border-radius:9px; }
.icon-button svg { width:19px; height:19px; }
.informational-tool { position:relative; cursor:help; }
.informational-tool::after {
  content:attr(data-tooltip);
  position:absolute;
  z-index:60;
  top:calc(100% + 8px);
  left:50%;
  width:max-content;
  max-width:min(300px,calc(100vw - 24px));
  padding:6px 9px;
  border:1px solid #111;
  border-radius:7px;
  background:#fff;
  color:#18202a;
  font:11px/1.35 system-ui,sans-serif;
  white-space:normal;
  text-align:center;
  opacity:0;
  transform:translate(-50%,-3px);
  pointer-events:none;
  transition:opacity .12s ease,transform .12s ease;
}
.informational-tool:hover::after,
.informational-tool:focus-visible::after { opacity:1; transform:translate(-50%,0); }
.done-button { padding:8px 13px; }
.cancel-button { border:1px solid #aeb8c5; border-radius:9px; padding:8px 13px; background:#fff; color:#374151; cursor:pointer; font:600 13px system-ui,sans-serif; }
.cancel-button:hover { background:#f3f4f6; }
.piece-name-control { display:flex; align-items:center; gap:6px; min-width:150px; color:#4b5563; font:12px system-ui,sans-serif; }
.piece-name-control input { width:120px; border:1px solid #aeb8c5; border-radius:7px; padding:6px 8px; background:#fff; color:#18202a; font:12px system-ui,sans-serif; }
.piece-name-control input:focus { outline:2px solid #2563eb; outline-offset:1px; }
.toolbar-divider { height:25px; }
.brush-cursor { position:fixed; z-index:30; border:1.5px dashed #111827; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); mix-blend-mode:difference; }
@media (max-width:900px) {
  .drawing-toolbar { gap:4px; padding:5px 6px; }
  .color-swatch,.custom-color { width:22px; height:22px; }
  .size-control { min-width:112px; }
  .size-control input { width:58px; }
  .icon-button { width:31px; height:31px; }
  .done-button { padding:7px 10px; }
  .cancel-button { padding:7px 10px; }
  .toolbar-divider { display:none; }
}
@media (max-width:650px) {
  .drawing-toolbar { flex-wrap:wrap; justify-content:center; width:calc(100vw - 12px); }
  .toolbar-spacer { display:none; }
  .done-button { margin-left:2px; }
}

/* Requested visibility, fit, and toolbox sizing refinements */
.toolbox {
  width: 396px;
  border-color: #111;
}
.toolbox-body {
  max-height: 430px;
  padding: 0 16px 16px;
}
.toolbox-grid {
  gap: 12px;
}
.toolbox-piece {
  height: 132px;
  aspect-ratio: auto;
  border-color: #c9d0d9;
}
.toolbox-drag-area .piece-art {
  inset: 7px 7px 38px 7px;
}
.rotate-button {
  left: 7px;
  top: auto;
  bottom: 6px;
  width: 30px;
  height: 30px;
  border-color: #111;
  background: #fff;
}
.toolbox-piece code {
  right: 7px;
  bottom: 9px;
  font-size: 9px;
}
.clear-canvas,
.canvas-icon-button {
  border-color: #111;
}
.brush-cursor {
  border: 2px dashed rgba(15, 23, 42, .98);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), 0 0 0 2px rgba(15, 23, 42, .20);
  mix-blend-mode: normal;
}
@media (max-width:700px) {
  .toolbox { width: min(396px, calc(100vw - 24px)); }
  .toolbox-piece { height: 122px; }
}


/* Toolbox label and hand-drawn outline refinement */
.toolbox-drag-area .piece-art { inset: 7px 7px 43px 7px; }
.toolbox-piece code { display:none !important; }
.rotate-button {
  left:50%;
  right:auto;
  bottom:7px;
  top:auto;
  width:auto;
  min-width:88px;
  height:31px;
  padding:0 12px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1.5px solid #111;
  border-radius:999px;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
}
.rotate-button > span:first-child { font-size:17px; line-height:1; }


/* Clean thin UI containers and category tabs */
.toolbox {
  width:396px;
  border:1px solid #cbd3dd;
  border-radius:14px;
  box-shadow:none;
}
.toolbox-body { max-height:560px; padding:0 16px 16px; overflow:hidden; }
.toolbox-tabs {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  margin:0 0 12px;
}
.toolbox-tab {
  min-width:0;
  border:1px solid #d2d9e2;
  border-radius:8px;
  padding:7px 6px;
  background:#f7f9fc;
  color:#5e6978;
  cursor:pointer;
  font-size:12px;
  white-space:nowrap;
}
.toolbox-tab:hover { background:#fff; border-color:#aeb8c5; }
.toolbox-tab.selected { background:#fff; border-color:#111; color:#111; font-weight:700; }
.toolbox-grid { gap:12px; }
.toolbox-grid.is-piece-list {
  display:flex;
  max-height:378px;
  flex-direction:column;
  gap:6px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:3px;
  scrollbar-gutter:stable;
}
.piece-list-item {
  width:100%;
  min-height:40px;
  display:flex;
  align-items:center;
  gap:9px;
  flex:0 0 auto;
  border:1px solid #c9d0d9;
  border-radius:9px;
  padding:5px 8px;
  background:#fbfcfe;
  cursor:pointer;
  text-align:left;
}
.piece-list-item:hover { border-color:#111; background:#fff; }
.piece-list-item:focus-visible { outline:2px solid #2563eb; outline-offset:1px; }
.piece-list-helper {
  margin:1px 4px 2px;
  color:#7b8796;
  font-size:11px;
  line-height:1.3;
  text-align:center;
}
.piece-list-controls {
  width:100%;
  display:flex;
  align-items:stretch;
  gap:6px;
  flex:0 0 auto;
}
.piece-list-search {
  width:auto;
  min-width:0;
  min-height:38px;
  flex:1 1 auto;
  border:1px solid #aeb8c5;
  border-radius:9px;
  padding:7px 10px;
  background:#fff;
  color:#18202a;
  font-size:13px;
}
.piece-list-search::placeholder { color:#8a96a6; }
.piece-list-search:focus {
  border-color:#2563eb;
  outline:2px solid rgba(37,99,235,.22);
  outline-offset:0;
}
.piece-list-results {
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  gap:6px;
}
.piece-list-item.random-piece-button {
  width:auto;
  min-height:38px;
  flex:0 0 120px;
  justify-content:center;
  border-color:#111;
  background:linear-gradient(110deg,#ffd9eb,#fff0ad,#d2ffdf,#d7f1ff,#eadcff);
  font-size:14px;
  font-weight:800;
  padding-inline:8px;
  text-align:center;
  white-space:nowrap;
}
.piece-list-item.random-piece-button:hover {
  background:linear-gradient(110deg,#ffc7e1,#ffe682,#bcffd0,#bfe9ff,#dcc8ff);
}
.piece-list-thumbnail {
  --list-cell:26px;
  --list-scale:calc(var(--list-cell) / 273.067);
  --list-art:calc(433.067 * var(--list-scale));
  --list-offset:calc(-80 * var(--list-scale));
  position:relative;
  width:var(--list-cell);
  height:var(--list-cell);
  flex:0 0 var(--list-cell);
}
.piece-list-thumbnail .piece-art,
.piece-list-thumbnail .piece-outline,
.piece-list-thumbnail canvas {
  position:absolute;
  left:var(--list-offset);
  top:var(--list-offset);
  width:var(--list-art);
  height:var(--list-art);
  pointer-events:none;
}
.piece-list-thumbnail .piece-art,
.piece-list-thumbnail .piece-outline {
  transform:rotate(var(--rotation));
  transform-origin:center;
}
.piece-list-thumbnail .piece-art { z-index:1; }
.piece-list-thumbnail canvas { z-index:2; }
.piece-list-thumbnail .piece-outline { z-index:3; overflow:visible; }
.piece-list-label {
  min-width:0;
  overflow:hidden;
  font-size:14px;
  font-weight:650;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.piece-list-empty {
  margin:18px 8px;
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
  text-align:center;
}
.world.is-focusing-piece {
  transition:transform .38s cubic-bezier(.22,.8,.25,1);
}
.canvas-piece.is-list-focused {
  z-index:8;
  filter:drop-shadow(0 0 7px rgba(37,99,235,.85));
}
.toolbox-piece, .toolbox-piece:nth-child(even) {
  height:132px;
  aspect-ratio:auto;
  border:1px solid #c9d0d9;
  border-radius:12px;
  box-shadow:none;
}
.toolbox-piece:hover { border-color:#9ca8b6; }
.rotate-button {
  border:1px solid #cbd3dd;
  border-radius:999px;
  box-shadow:none;
}
.clear-canvas, .canvas-icon-button {
  border:1px solid #cbd3dd;
  border-radius:10px;
  box-shadow:none;
}
@media (max-width:700px) {
  .toolbox { width:min(396px,calc(100vw - 24px)); }
  .toolbox-tab { font-size:10px; padding-inline:2px; }
  .toolbox-grid.is-piece-list { max-height:286px; }
}

/* Black border pass — preserve thin, clean geometry */
.toolbox,
.toolbox-piece,
.toolbox-piece:nth-child(even),
.toolbox-tab,
.rotate-button,
.clear-canvas,
.canvas-icon-button,
.drawing-toolbar,
.icon-button {
  border-color:#111;
}

.toolbox-piece:hover,
.toolbox-tab:hover {
  border-color:#111;
}

/* Keep color controls visually independent from the black control borders. */
.color-swatch,
.custom-color {
  border-color:#fff;
}

/* Main-page primary controls: 2× the original 1px border width. */
#toolbox,
#homeButton,
#clearButton {
  border-width: 2px;
  border-style: solid;
  border-color: #111;
}


/* Outer paint toolbar container: 2× the original 1px border width. */
.drawing-toolbar {
  border-width: 2px;
  border-style: solid;
  border-color: #111;
}


/* Fixed 25 × 20 puzzle board and archive */
.canvas { background:#fff; }
.board-surface {
  position:absolute; left:0; top:0; width:3300px; height:2640px;
  box-sizing:border-box; border:2px solid #111; background-color:#f7f9fc;
  background-image:
    linear-gradient(rgba(126,143,163,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,143,163,.13) 1px, transparent 1px),
    radial-gradient(circle, #b8c4d1 1.2px, transparent 1.35px);
  background-size:132px 132px,132px 132px,20px 20px;
  pointer-events:none; z-index:0;
}
.board-overview {
  position:absolute;
  left:0;
  top:0;
  z-index:0;
  width:3300px;
  height:2640px;
  pointer-events:none;
}
.board-overview.is-editor-context {
  transform-origin:0 0;
}
.placement-layer { z-index:1; }
.piece-layer { z-index:2; }
.archive-panel { left:auto; right:18px; top:18px; width:318px; border:2px solid #000; }
.archive-list { display:grid; gap:10px; max-height:390px; overflow:auto; padding-right:2px; }
.archive-empty { color:#6b7582; font-size:12px; padding:10px 4px; }
.archive-item { display:grid; grid-template-columns:108px minmax(0,1fr); gap:10px; align-items:center; width:100%; border:1px solid #000; border-radius:10px; padding:7px; background:#fff; text-align:left; cursor:pointer; font-family:inherit; }
.archive-item:hover { background:#f7f9fc; }
.archive-thumbnail { width:108px; height:86px; display:block; border:1px solid #111; border-radius:4px; object-fit:cover; background:#fff; }
.archive-meta strong { display:block; font-size:12px; line-height:1.25; }
.archive-meta small { display:block; margin-top:4px; color:#687384; font-size:10px; }
.board-readonly .placement-layer { display:none; }
.board-readonly .canvas-piece { cursor:grab; }


/* 500-board interaction refinements */
.canvas { background:#fff; background-image:none; }
.instruction-popout {
  position:fixed;
  z-index:55;
  left:18px;
  bottom:18px;
  display:flex;
  align-items:center;
  gap:10px;
}
.instruction-button {
  width:54px;
  height:54px;
  flex:0 0 54px;
  display:grid;
  place-items:center;
  border:2px solid #66717f;
  border-radius:50%;
  background:#8b96a3;
  color:#fff;
  font:700 30px/1 Georgia, serif;
  cursor:help;
  box-shadow:none;
}
.instruction-button:hover,
.instruction-button:focus-visible {
  background:#747f8c;
  outline:none;
}
.board-instructions {
  max-width:min(760px,calc(100vw - 100px));
  padding:9px 13px;
  color:#4f5a68;
  background:rgba(255,255,255,.97);
  border:1px solid #9aa5b2;
  border-radius:10px;
  font-size:14px;
  text-align:left;
  white-space:nowrap;
  user-select:none;
  opacity:0;
  transform:translateX(-18px) scale(.97);
  transform-origin:left center;
  pointer-events:none;
  transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1);
}
.instruction-button:hover + .board-instructions,
.instruction-button:focus-visible + .board-instructions {
  opacity:1;
  transform:translateX(0) scale(1);
}
.empty-hint { display:none !important; }
.board-surface {
  border-width:4px;
  background-color:#f7f9fc;
  background-image:
    linear-gradient(rgba(126,143,163,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,143,163,.14) 1px, transparent 1px),
    radial-gradient(circle, #91a4b8 1.7px, transparent 1.95px);
  background-size:132px 132px,132px 132px,33px 33px;
  background-position:0 0,0 0,0 0;
}
#clearButton { position:fixed; top:18px; right:18px; bottom:auto; }
.data-mode-toggle { position:fixed; top:62px; right:18px; z-index:50; border:1px solid #cbd3dd; border-radius:10px; padding:10px 14px; background:var(--panel); backdrop-filter:blur(12px); cursor:pointer; }
#productionToggleButton[hidden] { display:none; }
#homeButton { position:fixed; right:18px; bottom:18px; z-index:51; }
#homeButton::after {
  content:attr(data-tooltip);
  position:absolute;
  right:0;
  bottom:calc(100% + 8px);
  padding:5px 8px;
  border:1px solid #111;
  border-radius:7px;
  background:#fff;
  font-size:11px;
  white-space:nowrap;
  opacity:0;
  transform:translateY(3px);
  pointer-events:none;
  transition:opacity .12s ease,transform .12s ease;
}
#homeButton:hover::after { opacity:1; transform:translateY(0); }
.archive-panel {
  left:auto;
  right:76px;
  top:auto;
  bottom:18px;
  width:318px;
  max-height:min(470px,calc(100vh - 90px));
}
.archive-panel .toolbox-body { max-height:410px; }
.archive-panel.is-collapsed .toolbox-body { max-height:0; }
.placement-ghost { opacity:.48; }
.placement-ghost.is-hovered { opacity:.95; filter:saturate(1.35) brightness(1.12); }
.snap-shadow {
  position:absolute;
  width:var(--cell-size);
  height:var(--cell-size);
  pointer-events:none;
  opacity:.62;
  z-index:4;
}
.snap-shadow .piece-art {
  position:absolute;
  left:var(--art-offset);
  top:var(--art-offset);
  width:var(--art-size);
  height:var(--art-size);
  transform:rotate(var(--rotation));
  transform-origin:center;
}
.snap-shadow img { width:100%; height:100%; display:block; filter:grayscale(1) brightness(.82) opacity(.72); }
.snap-shadow::after { content:""; position:absolute; inset:0; border-radius:5px; background:rgba(80,88,98,.22); }
.snap-shadow.is-valid { opacity:1; }
.snap-shadow.is-valid img { filter:invert(47%) sepia(91%) saturate(1116%) hue-rotate(92deg) brightness(108%) contrast(95%); }
.snap-shadow.is-valid::after { background:rgba(44,255,104,.42); }
@media (max-width:1100px) {
  .board-instructions { max-width:calc(100vw - 96px); font-size:12px; white-space:normal; }
}

/* Mobile canvas pass: keep the board visible and make controls feel native on iOS. */
:root {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

button,input,code,output {
  font-family:inherit;
}

.piece-name-label {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

.mobile-placement-hint {
  display:none;
}

@media (max-width:700px) {
  .world {
    /* Avoid one enormous DPR-scaled compositor surface for the full board. */
    will-change:auto;
  }

  .piece-inspector {
    width:min(438px,calc(100vw - 20px));
  }

  .piece-inspector-piece {
    --inspector-cell:clamp(155px,calc(100vw - 165px),270px);
  }

  body {
    -webkit-text-size-adjust:100%;
  }

  #toolbox {
    left:8px;
    right:8px;
    top:auto;
    bottom:calc(8px + env(safe-area-inset-bottom));
    width:auto;
    max-height:min(52vh,390px);
    border-radius:16px;
  }

  #toolbox .toolbox-toggle {
    height:44px;
    padding:0 13px;
    font-size:15px;
  }

  #toolbox .toolbox-body {
    max-height:min(calc(52vh - 44px),346px);
    max-height:min(calc(52dvh - 44px),346px);
    padding:0 10px 10px;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
  }

  #toolbox.is-collapsed .toolbox-body {
    max-height:0;
    padding-top:0;
    padding-bottom:0;
  }

  #toolbox .toolbox-tabs {
    position:sticky;
    top:0;
    z-index:2;
    padding:4px 0 8px;
    background:var(--panel);
  }

  #toolbox .toolbox-tab {
    min-height:34px;
    font-size:11px;
  }

  #toolbox .toolbox-grid {
    gap:8px;
  }

  #toolbox .toolbox-piece,
  #toolbox .toolbox-piece:nth-child(even) {
    height:auto;
    aspect-ratio:1;
    border-radius:10px;
  }

  #toolbox .toolbox-drag-area .piece-art {
    inset:5%;
  }

  #toolbox .toolbox-drag-area {
    touch-action:pan-y;
  }

  #toolbox .rotate-button {
    left:3px;
    top:3px;
    width:22px;
    height:22px;
    min-width:22px;
    min-height:22px;
    padding:0;
    overflow:hidden;
    transform:none;
    font-size:0;
  }

  #toolbox .rotate-button span:first-child {
    display:block;
    font-size:13px;
    line-height:20px;
  }

  .mobile-placement-hint {
    position:fixed;
    left:50%;
    bottom:calc(78px + env(safe-area-inset-bottom));
    z-index:45;
    display:block;
    width:calc(100vw - 32px);
    margin:0;
    transform:translateX(-50%);
    color:#7b8794;
    font-size:11px;
    line-height:1.3;
    text-align:center;
    pointer-events:none;
  }

  #toolbox:not(.is-collapsed) ~ .mobile-placement-hint {
    display:none;
  }

  #archivePanel {
    left:50%;
    right:auto;
    top:8px;
    bottom:auto;
    width:112px;
    max-height:min(48vh,360px);
    border-radius:14px;
    transform:translateX(-50%);
  }

  #archivePanel:not(.is-collapsed) {
    width:min(280px,calc(100vw - 32px));
  }

  #archivePanel .toolbox-body {
    max-height:min(40vh,300px);
    padding:0 10px 10px;
    overflow-y:auto;
  }

  #archivePanel.is-collapsed .toolbox-body {
    max-height:0;
    padding-top:0;
    padding-bottom:0;
  }

  #archivePanel .toolbox-toggle {
    height:40px;
    font-size:14px;
  }

  #clearButton {
    top:8px;
    right:8px;
    padding:8px 10px;
    font-size:12px;
  }

  .data-mode-toggle {
    top:52px;
    right:8px;
    padding:8px 10px;
    font-size:12px;
  }

  .live-badge {
    display:none;
  }

  .instruction-popout {
    display:none;
  }

  #homeButton {
    left:calc(50% + 64px);
    right:auto;
    top:8px;
    bottom:auto;
    width:112px;
    height:40px;
    border-radius:14px;
    font-size:18px;
  }
}