/* Pixel Art (/pixel-art). The editor shell is Worlds' own /app.css with Worlds' markup and class names (docs/EDITOR-UI.md):
   #app grid, .top, .panel/.sec, .toolstrip, .view-dock, .statusbar, buttons, .check, .seg, .pill, .schem-list. This file
   only adds what a 2D pixel editor needs on top: the canvas and its checkerboard, the tiled view, the colour pair, shades
   and palette swatches, the first-run card, the Export / AI pop-overs and the two choice dialogs. Every colour is an
   app.css token. The words are in locales/en.json (pages.pixel_art.*, browser.public.site.pixel.art.*). */
.pixel-art {
  --px-checker-a: #2c3131;              /* the see-through checkerboard under the drawing */
  --px-checker-b: #1d2121;
  --px-grid: rgba(255, 255, 255, 0.16); /* grid lines between pixels */
  --px-cursor: #ffd166;                 /* the keyboard pixel cursor */
}
.pixel-art [hidden] { display: none !important; }

/* site.js still runs here (sign-in, API, toasts), but an editor shows none of the website around it: no nav, footer,
   news bar or support button. The sprite, tooltips and toasts are the only other things on the page. */
body.pixel-art > :not(#app):not(svg):not(.tip):not(.toasts):not(script):not(noscript) { display: none !important; }
.px-file { display: none; }

/* the title's detail line: kind · size, then the save state */
#docInfo { display: flex; gap: 8px; min-width: 0; font: 11px/1.2 var(--font-body); color: var(--text-dim); white-space: nowrap; overflow: hidden; }
#kindInfo:empty { display: none; }
#status { overflow: hidden; text-overflow: ellipsis; color: var(--text-faint); }
#status[data-kind=problem] { color: var(--rose); }
#name { font-family: var(--font-display); font-weight: 400; font-size: 14px; letter-spacing: 0.01em; }
#sizeChip:empty { display: none; }
#aiBtn { cursor: var(--cur-pointer, pointer); }

/* tool options in the strip: Worlds' brush row (size slider, shape button) plus the mirror toggle */
.px-opts { grid-template-columns: auto 1fr 18px auto auto; }
.toolstrip .px-opts { grid-template-columns: auto 96px 12px auto auto; }
.toolstrip .px-opts #shapeBtn { height: 28px; min-width: 64px; }
#mirrorBtn[aria-pressed=true] { color: var(--amber); background: rgba(63, 214, 200, 0.14); border-color: rgba(63, 214, 200, 0.5); }
.px-glyph { font: 600 16px/1 var(--font-mono); }

/* ---------- the stage: the drawing, centred, scrolling when zoomed past the window ---------- */
.px-stage { position: absolute; inset: 42px 0 0; overflow: auto; display: grid; place-items: center; padding: 24px 24px 48px; touch-action: none; }
.px-stage[data-pan] { cursor: grab; }
/* the canvas is z-index 1 inside the stage, so the floating zoom dock (phones) sits above it */
.stage > .view-dock { z-index: 3; }
.px-stage[data-pan] canvas { pointer-events: none; }
.px-canvas-wrap { position: relative; box-shadow: 0 0 0 1px var(--border-strong), 0 18px 48px -18px #000; }
.px-canvas-wrap { background: repeating-conic-gradient(var(--px-checker-a) 0 25%, var(--px-checker-b) 0 50%) 0 0 / calc(var(--px-check, 8px) * 2) calc(var(--px-check, 8px) * 2); }
.px-canvas { display: block; image-rendering: pixelated; touch-action: none; cursor: crosshair; position: relative; z-index: 1; }
.px-canvas:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.px-cursor { position: absolute; z-index: 2; pointer-events: none; box-shadow: 0 0 0 2px var(--px-cursor), 0 0 0 3px #000; }
/* Tiled: the canvas itself draws nine copies (pixel-art.js paint), the middle one outlined */
#app[data-state=start] .px-stage, #app[data-state=loading] .px-stage { visibility: hidden; }
/* nothing is open yet: no name, no previews */
#app:not([data-state=editor]) .top .title, #app:not([data-state=editor]) .px-previews, #app:not([data-state=editor]) #sizeChip { visibility: hidden; }

/* ---------- first run: a card in the stage, like Worlds' "Connect your AI" ---------- */
.px-start {
  position: absolute; z-index: 5; left: 50%; top: calc(50% + 21px); transform: translate(-50%, -50%);
  width: min(620px, calc(100% - 40px)); max-height: calc(100% - 90px); overflow: auto; padding: 26px 28px;
}
#app:not([data-state=start]) .px-start { display: none; }
.px-start h2 { margin: 0 0 6px; font: 600 20px/1.2 var(--font-display); }
.px-lede { margin: 0 0 18px; color: var(--text-dim); }
.px-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.px-card {
  height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); cursor: var(--cur-pointer, pointer);
}
.px-card:hover { background: rgba(63, 214, 200, 0.08); border-color: rgba(63, 214, 200, 0.45); }
.px-card strong { font-weight: 600; }
.px-card span:not(.px-card-art) { color: var(--text-dim); font-size: 12px; line-height: 1.4; white-space: normal; }
.px-card-art { width: 36px; height: 36px; image-rendering: pixelated; }
.px-art-block { background: repeating-conic-gradient(#8a8a8a 0 25%, #6d6d6d 0 50%) 0 0 / 12px 12px; }
.px-art-item { background: radial-gradient(circle at 50% 50%, #e0a030 0 34%, transparent 36%), repeating-conic-gradient(var(--px-checker-a) 0 25%, var(--px-checker-b) 0 50%) 0 0 / 12px 12px; }
.px-art-import { background: linear-gradient(var(--amber), var(--amber)) 50% 20% / 4px 46% no-repeat, linear-gradient(var(--amber), var(--amber)) 50% 86% / 70% 4px no-repeat; }
.px-size { width: max-content; }
.px-size button[aria-checked=true] { background: rgba(63, 214, 200, 0.14); color: #3fd6c8; border-color: var(--border); }

/* ---------- keyboard-only users and guests at the cap ---------- */
.px-capbar { position: absolute; z-index: 4; top: 54px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--glass); border: 1px solid rgba(63, 214, 200, 0.45); box-shadow: var(--shadow-float); }
.px-capbar p { margin: 0; }

/* ---------- left panel: the previews ---------- */
.px-previews { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 8px; }
.px-fig { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.px-fig figcaption { font: 10.5px/1.2 var(--font-mono); color: var(--text-faint); }
.px-native, .px-tile { image-rendering: pixelated; background: repeating-conic-gradient(var(--px-checker-a) 0 25%, var(--px-checker-b) 0 50%) 0 0 / 8px 8px; box-shadow: 0 0 0 1px var(--border); }
.px-native { width: 32px; }
.px-resume { margin-top: 8px; }

/* ---------- right panel: the colour pair, shades and palette ---------- */
.px-colours { padding: 14px; border-bottom: 1px solid var(--border); }
.px-pair { position: relative; width: 74px; height: 62px; margin-bottom: 12px; }
.px-chip { position: absolute; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-strong); background: repeating-conic-gradient(var(--px-checker-a) 0 25%, var(--px-checker-b) 0 50%) 0 0 / 10px 10px; }
.px-chip i { position: absolute; inset: 3px; }
.px-fg { left: 0; top: 0; z-index: 1; box-shadow: 0 0 0 1px #000; }
.px-bg { left: 26px; top: 18px; }
.px-colours .field + .field { margin-top: 10px; }
#hex { width: 100%; font: 12px var(--font-mono); }
.px-ramp, .px-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(24px, 1fr)); gap: 3px; }
.px-palette { margin-bottom: 10px; max-height: 40vh; overflow-y: auto; }
.px-swatch { position: relative; height: 24px; width: auto; padding: 0; border: 1px solid var(--border); background: repeating-conic-gradient(var(--px-checker-a) 0 25%, var(--px-checker-b) 0 50%) 0 0 / 8px 8px; }
.px-swatch i { position: absolute; inset: 2px; }
.px-swatch:hover { border-color: var(--border-strong); }
.px-swatch[aria-checked=true] { border-color: #3fd6c8; box-shadow: 0 0 0 1px #3fd6c8; }
.px-limit { margin-top: 10px; }
.px-limit-canvas { width: 96px; image-rendering: pixelated; box-shadow: 0 0 0 1px var(--border); margin-bottom: 8px; }
.px-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- Export and AI help: pop-overs under the top bar's right side, like Worlds' Export menu ---------- */
.px-pop { position: absolute; z-index: 60; top: 58px; right: 12px; width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 80px); overflow: auto; padding: 14px 16px 16px; }
.px-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.px-pop h2 { margin: 0; font: 700 11px/1 var(--font-display); text-transform: uppercase; color: var(--text-faint); }
.px-pop p { margin: 0 0 10px; color: var(--text-dim); }
.px-pop .hint { margin: 8px 0 0; }
.px-mc { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.px-mc h3 { margin: 0 0 8px; font: 600 13px/1.3 var(--font-body); }
.px-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; color: var(--text-dim); }
.px-field select, .px-field input, #hex { height: 30px; padding: 0 8px; color: var(--text); background: var(--bg-2); border: 1px solid var(--border-strong); }
.px-checks { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 4px; font-size: 12px; }
.px-checks li::before { content: "✓ "; color: var(--teal); }
.px-checks li[data-ok=false]::before { content: "! "; color: #ffb86c; }
.px-copyline { display: flex; gap: 8px; align-items: center; }
.px-copyline code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-quote { padding: 8px 10px; border-left: 2px solid var(--amber); background: var(--surface); color: var(--text); }
.px-allowance { color: var(--amber) !important; }
.px-danger { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
#deleteBtn:hover { color: var(--rose); }

/* ---------- the two choices that need an answer first ---------- */
.px-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(5, 7, 8, 0.6); }
.px-modal-card { width: min(460px, calc(100vw - 32px)); padding: 20px 22px; }
.px-modal-card h2 { margin: 0 0 8px; font: 600 16px/1.3 var(--font-body); }
.px-modal-card p { color: var(--text-dim); margin: 0 0 14px; }

/* ---------- toasts: site.js's .toasts list, in Worlds' toast look (app.css .toast is a single hidden-until-shown toast) ---------- */
.pixel-art .toasts { position: fixed; z-index: 120; bottom: 40px; left: 50%; transform: translateX(-50%); display: grid; gap: 6px; width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.pixel-art .toasts .toast { position: static; transform: none; opacity: 1; display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.pixel-art .toasts .toast.error { border-color: rgba(255, 90, 110, 0.5); color: #ffc2cf; }
.pixel-art .toasts .toast > span { flex: 1; }
.pixel-art .toasts .toast.out { opacity: 0; transition: opacity 200ms; }

/* ---------- phone: Worlds' sheets (app.css) do the panels; the stage only gives room for the tab bar ---------- */
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .px-stage { inset: 0 0 calc(var(--nav-h, 56px) + var(--safe-b, 0px)); padding: 12px; }
  .px-start { top: 45%; padding: 18px; }
  .px-cards { grid-template-columns: 1fr; }
  .px-pop { top: 56px; left: 12px; right: 12px; width: auto; }
  .statusbar #hover { display: none; }
}