:root{--bg:#181828;--panel:#f8f0d8;--ink:#181828;--muted:#784028;--line:#181828;--shadow:#080810;--code:#f0e8c8;--add:#206830;--del:#a82038;--hunk:#2858a8;--accent:#f8c040;--warn:#883810;--focus:#2858a8;--px:3px;color-scheme:dark}
:root[data-theme="dark"]{--bg:#181828;--panel:#f8f0d8;--ink:#181828;--muted:#784028;--line:#181828;--shadow:#080810;--code:#f0e8c8;--add:#206830;--del:#a82038;--hunk:#2858a8;--accent:#f8c040;--warn:#883810;--focus:#2858a8;color-scheme:dark}
/* CodeWizards · the room is the screen (step 6, final art).
   One rule rules them all: every pixel of art (the room, the logo, the scrolls' rolls and edges, the
   icons, the pixel font, the cursor) is drawn at the same size, --px, the room's whole scale. Only the
   text you read at length (diffs, the chronicle, notes) is set in an ordinary font. */
*{box-sizing:border-box;cursor:inherit}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);overflow:hidden;font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:var(--px) solid var(--accent);outline-offset:var(--px)}

/* The screen: the room's canvas, then one CRT over the whole window, then the interface. */
.screen{position:fixed;left:0;top:0;width:720px;height:633px;z-index:0}
.screen canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
#bloom{mix-blend-mode:screen;filter:blur(calc(var(--px) * 1.5)) brightness(1.3);opacity:.28;pointer-events:none}
.crt{position:fixed;inset:0;z-index:9;pointer-events:none}   /* over everything, the interface too: one screen */
.crt div{position:absolute;inset:0}
.crt .scan{background:repeating-linear-gradient(to bottom,rgba(0,0,0,.16) 0,rgba(0,0,0,.16) calc(var(--px) / 2),transparent calc(var(--px) / 2),transparent var(--px))}
.crt .mask{background:repeating-linear-gradient(to right,rgba(255,64,64,.035) 0 1px,rgba(64,255,64,.035) 1px 2px,rgba(64,64,255,.035) 2px 3px)}
.crt .vig{background:radial-gradient(ellipse at 50% 46%,transparent 58%,rgba(0,0,0,.6) 100%)}
@media (prefers-reduced-motion:no-preference){.crt .scan{animation:flick 7s steps(1) infinite}}
@keyframes flick{0%,96%{opacity:1}97%{opacity:.82}98%{opacity:1}}

/* The pixel font: its design em is 8 px, so at 8 x --px each of its pixels is one room pixel. */
.pixel,.title,.roomline,.paper h3,.hist summary{font-family:"CW Pixel",ui-monospace,monospace;-webkit-font-smoothing:none;font-smooth:never;font-weight:400}
.pixel{font-size:calc(var(--px) * 8);line-height:calc(var(--px) * 7);letter-spacing:0;text-transform:uppercase;color:var(--ink);
  padding:var(--px) calc(var(--px) * 3);border:var(--px) solid var(--line);border-radius:0;background:#f0c080;
  box-shadow:inset var(--px) var(--px) 0 #f8f0d8,inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #c07840;min-height:0}
.pixel:active:not(:disabled){box-shadow:inset var(--px) var(--px) 0 #c07840,inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #f8f0d8}
.pixel:disabled{opacity:.45}
.cast,.found-go{background:var(--accent);box-shadow:inset var(--px) var(--px) 0 #fff8c0,inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #e86020}
.review .ok:not(:disabled){background:#58a850;box-shadow:inset var(--px) var(--px) 0 #d8f0c0,inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #285838}
.review .no:not(:disabled){background:#d84848;box-shadow:inset var(--px) var(--px) 0 #f8d050,inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #882838}
.review .halt:not(:disabled){background:#9ca0b8}

/* The room's name and the way to another room, above the spell book. */
.roomline{position:fixed;z-index:4;display:flex;align-items:center;justify-content:center;gap:calc(var(--px) * 4);
  font-size:calc(var(--px) * 8);line-height:calc(var(--px) * 7);color:#f8f0d8;text-transform:uppercase;white-space:nowrap}
.roomline #mode{color:#c0a0e8}
.roomline .pixel{display:inline-flex;align-items:center;gap:var(--px)}
/* Sound (step 7): effects, music and the review bell, each a small pixel button; then the volume. */
.soundset{display:inline-flex;align-items:center;gap:var(--px);margin-right:auto}
.pixel.icon{padding:var(--px);line-height:0}
.pixel.icon [class*="ico-"]::before{margin:0}
.pixel.icon[aria-pressed="false"]{opacity:.5}
#vol{width:calc(var(--px) * 20);min-width:calc(var(--px) * 8);flex:0 1 auto;accent-color:var(--accent);height:calc(var(--px) * 4)}
.grimoire .cast{flex:0 0 auto}

/* The spell book: a long, low strip of parchment between two rolls, under the room's front corner. */
.grimoire{position:fixed;z-index:4;display:flex;flex-direction:column;justify-content:center;gap:calc(var(--px) * 2);height:calc(var(--px) * 28);
  padding:0 calc(var(--px) * 9);background:var(--vroll) left top/calc(var(--px) * 7) calc(var(--px) * 8) repeat-y,var(--vroll) right top/calc(var(--px) * 7) calc(var(--px) * 8) repeat-y,
  var(--parch) 0 0/calc(var(--px) * 16) calc(var(--px) * 16) repeat;image-rendering:pixelated;
  border-top:var(--px) solid var(--line);border-bottom:var(--px) solid var(--line)}
.grimoire .row{display:flex;align-items:center;gap:calc(var(--px) * 3);width:100%}
.grimoire .choices{justify-content:flex-end;min-width:0}
.grimoire .pick{display:flex;align-items:center;gap:var(--px);flex:0 1 auto;min-width:0}
.grimoire select{font:14px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;width:calc(var(--px) * 18);min-width:calc(var(--px) * 11);flex:0 1 auto;
  padding:0 var(--px);height:calc(var(--px) * 10);border:var(--px) solid var(--line);border-radius:0;background:var(--code);color:var(--ink)}
.grimoire input{flex:1 1 auto;min-width:0;width:100%;height:calc(var(--px) * 12);font:18px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding:0 calc(var(--px) * 2);border:var(--px) solid var(--line);border-radius:0;background:var(--code);color:var(--ink)}
.grimoire .cast{height:calc(var(--px) * 10)}
.hint{position:fixed;z-index:4;margin:0;font-size:13px;color:#c0a0e8;text-align:center}
.tower .hint,.paper .hint{position:static;color:var(--muted);text-align:left}

/* A scroll: a roll on top (drag it to move the scroll, press it to roll the paper up), the paper, and a
   roll below (drag it to make the scroll longer or shorter; near its right end, wider too). */
.scroll{position:fixed;z-index:5;display:flex;flex-direction:column;width:calc(var(--px) * 80);min-width:calc(var(--px) * 40);
  filter:drop-shadow(var(--px) var(--px) 0 rgba(8,8,16,.6))}
.scroll.dragging{z-index:6}
.roll{flex:0 0 auto;height:calc(var(--px) * 7);display:flex;align-items:center;justify-content:center;user-select:none;touch-action:none;
  background:var(--roll-l) left top/calc(var(--px) * 5) 100% no-repeat,var(--roll-r) right top/calc(var(--px) * 5) 100% no-repeat,
  var(--roll-m) left top/calc(var(--px) * 8) 100% repeat-x;background-clip:border-box;image-rendering:pixelated}
.roll .title{font-size:calc(var(--px) * 8);line-height:calc(var(--px) * 6);height:calc(var(--px) * 6);color:var(--ink);text-transform:uppercase;
  padding:0 calc(var(--px) * 2) 0 var(--px);display:inline-flex;align-items:center;gap:var(--px);white-space:nowrap;overflow:hidden;
  background:var(--panel);box-shadow:0 0 0 var(--px) var(--line)}
.paper{flex:1 1 auto;min-height:0;overflow:auto;margin:0 calc(var(--px) * 2);padding:calc(var(--px) * 3) calc(var(--px) * 5);
  background:var(--parch) 0 0/calc(var(--px) * 16) calc(var(--px) * 16) repeat;image-rendering:pixelated;
  border-style:solid;border-width:0 calc(var(--px) * 3);border-image:var(--edges) 3 / 0 calc(var(--px) * 3) stretch;
  scrollbar-width:thin;scrollbar-color:#c07840 transparent}
.scroll.rolled .paper{display:none}
.scroll.rolled{height:auto!important}
.scroll.rolled .roll.bottom{margin-top:calc(var(--px) * -2)}
.paper h3{font-size:calc(var(--px) * 8);line-height:calc(var(--px) * 7);text-transform:uppercase;color:var(--muted);margin:calc(var(--px) * 2) 0}
.paper h3:first-child{margin-top:0}

/* Inside the paper: ordinary, readable text. */
.tasks{list-style:none;margin:0;padding:0}
.tasks li{margin:0 0 calc(var(--px) * 2)}
.task{display:flex;gap:calc(var(--px) * 2);align-items:center;width:100%;text-align:left;font:13px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:transparent;border:var(--px) solid #c07840;border-radius:0;padding:calc(var(--px) * 1.5) calc(var(--px) * 2);color:var(--ink)}
.task[aria-current="true"]{background:#f8e8b8;border-color:var(--line);box-shadow:inset 0 0 0 var(--px) var(--accent)}
.task .tt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.task .tt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.task .tt small,.task .tok small{color:var(--muted)}
.task .tok{font:12px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap}
.emb{width:calc(var(--px) * 5);height:calc(var(--px) * 5);flex:0 0 auto;shape-rendering:crispEdges}
.emb.ph{display:inline-block;border:var(--px) dotted var(--muted)}
.st{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.st-review,.st-pending,.st-waiting,.st-blocked{color:var(--warn)}
.st-done,.st-approved{color:var(--add)}
.st-failed,.st-error,.st-cancelled{color:var(--del)}
.hist{margin:calc(var(--px) * 2) 0}
.hist summary{font-size:calc(var(--px) * 8);line-height:calc(var(--px) * 7);text-transform:uppercase;color:var(--muted);list-style-position:inside}
.empty{color:var(--muted);font-style:italic;margin:0}
textarea,#found-path{width:100%;font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;border:var(--px) solid var(--line);border-radius:0;background:var(--code);color:var(--ink);padding:calc(var(--px) * 2)}
.mini{margin-top:calc(var(--px) * 2)}
.files{max-height:40vh;overflow:auto;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.files details{margin-left:10px}
.fbtn{display:block;width:100%;padding:1px 4px;border:0;background:none;text-align:left;font:inherit;color:var(--ink)}
.fbtn:hover,.fbtn:focus-visible{background:var(--code)}
.cm{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:calc(var(--px) * 3) 0 var(--px)}
.review{display:flex;flex-wrap:wrap;gap:calc(var(--px) * 2);margin:calc(var(--px) * 2) calc(var(--px) * -2) 0;
  position:sticky;bottom:calc(var(--px) * -3);padding:calc(var(--px) * 2);background:var(--parch) 0 0/calc(var(--px) * 16) calc(var(--px) * 16) repeat;
  border-top:var(--px) dashed #c07840}   /* the judgement is always at hand, even with a long diff */
.review .pixel{flex:1 1 auto;white-space:nowrap;padding:var(--px)}   /* they wrap rather than clip their words */
.deliv .dt{font:600 15px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;margin:0 0 4px}
.deliv p{margin:4px 0;font-size:13px}
.deliv .model{font:12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.reason{color:var(--muted);font-size:12px}
.done-note{border:var(--px) solid var(--add);padding:calc(var(--px) * 2);background:#f0f8e0}
.done-note.wait{border-color:var(--warn);background:#f8f0d0}
.done-note code{font-size:12px;word-break:break-all}
.diff,.code{white-space:pre;overflow-x:auto;font:12.5px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--code);padding:6px;border:var(--px) solid var(--line);max-height:50vh;margin:4px 0}
.diff .add{color:var(--add)}.diff .del{color:var(--del)}.diff .hunk{color:var(--hunk)}
.dfile{margin:0 0 6px}.dfile summary{font-size:13px}.dfile summary code{font-weight:700}
.n-add{color:var(--add)}.n-del{color:var(--del)}
.code .ln{display:inline-block;min-width:3.5ch;margin-right:1ch;color:var(--muted);text-align:right;user-select:none}
.mana{list-style:none;margin:0 0 4px;padding:0}
.mana li{display:grid;grid-template-columns:auto auto 1fr auto;gap:calc(var(--px) * 2);align-items:center;font-size:13px}
.mana .gname{font-weight:600}
.mana .bar{height:calc(var(--px) * 3);background:var(--code);border:var(--px) solid var(--line)}
.mana .fill{display:block;height:100%}
.mana .quota{grid-column:1/-1;color:var(--muted);font-size:12px}
.status{margin:4px 0;font-size:12px;color:var(--muted)}
.log{list-style:none;margin:6px 0 0;padding:6px;font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--code);border:var(--px) solid var(--line);max-height:none}
.log li{word-break:break-word}
.log time{color:var(--muted)}
.log .ev-task b,.log .ev-review b{color:var(--warn)}
.log .ev-agent b{color:var(--hunk)}

/* The icons: 8 x 8 pixels, each one room pixel (images in ui.gen.css). */
[class*="ico-"]::before{content:"";display:inline-block;flex:0 0 auto;width:calc(var(--px) * 8);height:calc(var(--px) * 8);margin-right:var(--px);vertical-align:middle;background:0 0/100% 100% no-repeat;image-rendering:pixelated}

/* La Torre: a large scroll unrolled in the middle of the screen. */
.tower{position:fixed;inset:0;z-index:8;display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;background:rgba(8,8,16,.72);overflow:auto}
.tower[hidden]{display:none}
.tower .scroll{position:relative;width:min(92vw,calc(var(--px) * 150));z-index:auto}
.tower-rooms{list-style:none;margin:0;padding:0}
.tower-rooms li{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:var(--px) dotted var(--muted)}
.tower-rooms li small{color:var(--muted);word-break:break-all}
.tower-rooms li.here b::after{content:" (aquí)";font-weight:400;color:var(--muted)}
.kinds{border:0;padding:6px 0;margin:0;display:flex;flex-direction:column;gap:4px;font-size:14px}
.found-go{width:100%}

/* Narrow screens: the room on top, the spell book and the scrolls one under another. */
body.stacked{overflow:auto}
body.stacked .screen{position:relative}
body.stacked .crt{position:fixed}
body.stacked .roomline,body.stacked .grimoire,body.stacked .hint{position:relative;left:auto!important;top:auto!important;width:auto!important;margin:8px}
body.stacked .scroll{position:relative;left:auto!important;top:auto!important;width:auto!important;height:auto!important;margin:8px}
body.stacked .paper{max-height:60vh}
[hidden]{display:none!important}
/* Step 7: the maker as data on the blackboard, and the notice in The Tower. */
.dm .maker{color:var(--muted)}
.tower .fine{font-size:12px;margin-top:calc(var(--px) * 3)}