/* Courier Prime, self-hosted (SIL OFL, see app/assets/fonts/OFL.txt).
   Full character set, so no unicode-range splitting is needed. */
@font-face{
  font-family:'Courier Prime';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/CourierPrime-Regular-d987c46f.woff2") format('woff2');
}
@font-face{
  font-family:'Courier Prime';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/assets/CourierPrime-Bold-3274248a.woff2") format('woff2');
}
/* Built by script/icon_font/build.py. The glyphs sit on a 16px pixel grid, so
   the icon is only sharp at 16px and its multiples. */
@font-face{
  font-family:'Piskoviste Icons';
  font-style:normal;
  font-weight:400;
  font-display:block;
  src:url("/assets/piskoviste-icons-ef1b2e23.woff2") format('woff2');
}

:root{
  --paper:#F0F0EB;
  --white:#FFFFFF;
  --ink:#000000;
  --rule:#C9C9C1;
  --dim:#6B6B64;
  --ghost:#DEDED7;
  --cyan:#008CC2;
  --cyan-ink:#006F99;
  --magenta:#C21A72;
  --yellow:#FFE04A;
  --yellow-tint:#FFF5BF;
  --mono:'Courier Prime','Courier New',ui-monospace,monospace;
  --cell:1px;--thumb-cell:.5px;--stage-w:384;--stage-h:384;--grid-w:384;--grid-h:384;--prompt-size:26px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

.shell{max-width:804px;margin:0 auto;padding:0 18px 90px}

/* uppercase micro labels - the load-bearing typographic element */
.micro{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.micro b{font-weight:400;color:var(--ink)}
.micro .hot{color:var(--magenta)}

.head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:20px 0 10px;border-bottom:1px solid var(--ink);
}
.wordmark{font-size:19px;letter-spacing:.02em}
.wordmark strong{font-weight:700}

.name-icon{
  display:inline-block;vertical-align:middle;flex:0 0 auto;
  width:16px;height:16px;
  font-family:'Piskoviste Icons';font-size:16px;font-weight:400;font-style:normal;
  line-height:1;letter-spacing:0;color:var(--ink);
}

/* presence list - fixed outside the document flow, so a change in the
   number of people never shifts the content */
.sidebar{
  display:none;
  position:fixed;
  top:22px;
  left:calc(50% + 420px);
  width:150px;
  z-index:5;
}
.sidebar-head{padding-bottom:6px;border-bottom:1px solid var(--rule)}
.presence-list{
  margin-top:7px;
  display:flex;flex-direction:column;
  max-height:calc(100vh - 130px);
  overflow-y:auto;
}
.who{display:flex;align-items:center;gap:6px;font-size:12px;line-height:1;padding:2px 4px}
.who .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who.me{background:var(--yellow-tint);color:var(--ink)}

/* on narrow displays it moves into the status bar, which is fixed as well */
.presence-mini{display:flex;align-items:center;gap:5px;height:16px;overflow:hidden}

@media (min-width:1180px){
  .sidebar{display:block}
  .presence-mini{display:none}
}

/* task ticket */
.ticket{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--rule);
}
/* fixed heights keep the stage in the same place in every game */
.draw .ticket{height:40px;flex-wrap:nowrap;align-items:center;overflow:hidden}
.draw .serial{min-width:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.serial{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-ink)}
.clock{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.clock b{font-size:15px;letter-spacing:0;color:var(--ink)}
.clock.low b{color:var(--magenta)}

.prompt{padding:26px 0 20px}
.prompt h1{margin:0;font-size:var(--prompt-size);font-weight:700;line-height:1.2;letter-spacing:-.01em}
.draw .prompt{height:calc(46px + 2.4 * var(--prompt-size))}
.draw .prompt h1{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.prompt p{margin:8px 0 0;color:var(--dim);font-size:14px}
.intro{padding:26px 0 0}
.intro p{margin:0 0 10px;font-size:15px;line-height:1.5}
.intro + .prompt{padding-top:14px}
.game-hint{margin:8px 0 0;color:var(--dim);font-size:13px}
.draw .game-hint{height:2.9em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.quit{margin:26px 0 0}
.skip{margin:22px 0 0}
.quit a{color:var(--dim)}

/* stage - fixed size for the largest active grid; the plate sits in its center.
   --cell is a whole number of px, so every grid cell is an exact pixel block,
   except in a column narrower than the grid */
.draw{container-type:inline-size}
.stage{
  position:relative;display:grid;place-items:center;margin:0 auto;
  width:calc(var(--stage-w) * var(--cell));height:calc(var(--stage-h) * var(--cell));
}
@supports (width:round(down,10px,1px)) and (width:1cqw){
  .stage{
    /* whole px from 1px up; a column narrower than the grid gets the exact fraction */
    --cell:min(8px,100cqw / var(--stage-w),max(1px,round(down,100cqw / var(--stage-w),1px)));
    --thumb-cell:min(var(--cell) / 2,max(1px,round(down,var(--cell) / 2,1px)));
  }
}

/* desk - drawings and slips sent in this run of tasks, under the next plate */
#desk{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}

/* canvas - two layers, the lower one for the phase 2 underlay */
.plate,.sheet{
  position:relative;box-sizing:content-box;
  width:calc(var(--grid-w) * var(--cell));height:calc(var(--grid-h) * var(--cell));
  border:1px solid var(--ink);box-shadow:3px 3px 0 var(--rule);
  background:var(--white);line-height:0;
}
/* the 1px border lies outside the content box; the negative margin makes the
   margin box exactly grid * --cell, so the plate centers on the stage */
.stage > .plate,#desk > .sheet{margin:-1px}
/* isolate, so a flash on a sheet never paints over the next plate */
.sheet{grid-area:1/1;isolation:isolate}
.sheet img{
  display:block;width:100%;height:100%;
  image-rendering:pixelated;image-rendering:crisp-edges;
}
.plate.is-lifted{visibility:hidden}
.plate.is-dropping{animation:plate-drop .26s cubic-bezier(.2,.9,.25,1) both}
@keyframes plate-drop{from{transform:translateY(-18px);opacity:0}}
.plate canvas{
  display:block;width:100%;height:100%;
  image-rendering:pixelated;image-rendering:crisp-edges;
}
.plate .layer-bg{
  position:absolute;inset:0;z-index:0;
  background-size:100% 100%;
  background-repeat:no-repeat;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}
.plate .layer-bg.has-underlay{
  opacity:var(--underlay-opacity, .35);
  filter:grayscale(var(--underlay-gray, 1));
}
.plate .layer-bg.has-underlay.is-off{opacity:0;filter:none}
/* the last frame is an inline background-image, so !important is needed to keep
   it from showing under the frames drawn while the playback runs */
.plate .layer-bg.is-playing{background-image:none !important}
.plate .layer-draw{
  position:relative;z-index:1;
  cursor:crosshair;touch-action:none;
  user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
/* speed drawing fuse - reaches 8px past the plate, so the line axis sits 4px
   outside the frame; the controller sizes the rects to the plate */
.fuse{
  position:absolute;left:-8px;top:-8px;
  width:calc(100% + 16px);height:calc(100% + 16px);
  overflow:visible;pointer-events:none;z-index:2;
}
.fuse .ash{fill:none;stroke:var(--rule);stroke-width:1;stroke-dasharray:1 3}
.fuse .live{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:butt}
.fuse.low .live{stroke:var(--magenta)}
.fuse .core-o{fill:var(--ink)}
.fuse .core{fill:var(--yellow)}
.fuse .bits rect{fill:var(--magenta)}
.fuse .bits.a{animation:fuse-flicker .2s steps(1) infinite}
.fuse .bits.b{animation:fuse-flicker .2s steps(1) infinite reverse}
.fuse.frozen .bits{animation:none}
.fuse.done .spark{display:none}
@keyframes fuse-flicker{0%{opacity:1}50%{opacity:0}}
/* flashes - centered over the plate, the slip or the desk */
.flashes{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:12px;pointer-events:none;
}
.flash{
  width:max-content;max-width:100%;margin:0;
  background:var(--ink);color:var(--paper);font-size:14px;line-height:1.45;padding:8px 14px;
}
.flash h1{margin:0;font-size:inherit;font-weight:700;line-height:inherit}
.flash p{margin:0}
.flash.is-fading{animation:strip-out .3s ease 3s forwards}
/* the desk shows this flash; the new page keeps it for screen readers */
.flash.is-carried{
  position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;animation:none;
}

/* slip - the pot guess over the desk: the previous drawing at half cell and a text field */
.slip{
  box-sizing:border-box;height:100%;
  display:flex;flex-direction:column;gap:8px;
  padding:12px;line-height:1.45;overflow-x:hidden;overflow-y:auto;
}
.slip img.pixel{
  flex:none;width:calc(var(--grid-w) * var(--thumb-cell));height:auto;
  border:1px solid var(--rule);
}
.slip .field{flex:1;display:flex;flex-direction:column;min-height:0}
.slip .field label{margin:0}
.slip .field textarea{flex:1;min-height:3em;resize:none}
.slip .actions{margin-top:8px}
.sheet .slip{overflow-y:hidden}
.sheet .slip .actions,.sheet .slip .err{display:none}
.slip-text{
  flex:1;min-height:0;margin:0;font-size:15px;
  white-space:pre-wrap;overflow-wrap:anywhere;
  border-bottom:1px solid var(--ink);padding:8px 0;
}

.plate-meta{display:flex;justify-content:space-between;gap:12px;padding-top:12px}

/* tools */
.tools{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:16px;padding-bottom:16px;border-bottom:1px solid var(--rule);
}
.group{display:flex;align-items:center;gap:7px}
.tools.is-off{opacity:.35}
.tools.is-off button{cursor:default}

.swatch{
  width:26px;height:26px;padding:0;position:relative;
  border:1px solid var(--ink);background:var(--white);cursor:pointer;
}
.swatch i{position:absolute;inset:4px;display:block}
.swatch[data-c="black"] i{background:var(--ink)}
.swatch[data-c="erase"] i{background:var(--white);border:1px solid var(--rule)}
.swatch[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}

.nib{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  padding:0;border:1px solid var(--ink);background:var(--white);cursor:pointer;
}
.nib i{background:var(--ink);display:block}
.nib[data-s="1"] i{width:3px;height:3px}
.nib[data-s="2"] i{width:6px;height:6px}
.nib[data-s="3"] i{width:10px;height:10px}
.nib[data-s="4"] i{width:13px;height:13px}
.nib[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}

.txtbtn{
  border:0;background:none;padding:0;font:inherit;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);cursor:pointer;border-bottom:1px solid var(--rule);
}
.txtbtn:hover{color:var(--ink);border-bottom-color:var(--ink)}

.spacer{flex:1 1 auto}

.send{
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  font:inherit;font-weight:700;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;
  padding:9px 20px;cursor:pointer;
}
.send:hover{background:var(--cyan-ink);border-color:var(--cyan-ink)}

/* text field (name, guessing in the pot game) */
.field input{
  width:100%;font:inherit;font-size:17px;
  border:0;border-bottom:1px solid var(--ink);
  background:none;color:var(--ink);padding:8px 0;
}
.field input::placeholder{color:var(--ghost)}
.field .err{color:var(--magenta);font-size:12px;margin-top:8px;min-height:1em}
.field select,.field input[type=number],.field textarea{
  width:100%;font:inherit;font-size:17px;
  border:0;border-bottom:1px solid var(--ink);
  background:none;color:var(--ink);padding:8px 0;
}
.field textarea{min-height:4.5em;resize:vertical}
.field textarea.write{min-height:12em}
.counter{text-align:right;margin-top:6px}
.field label{display:block;margin:18px 0 0}
.field p{margin:16px 0 0}
/* fixed, so fading out never shifts the canvas below */
.strip{
  position:fixed;top:12px;left:50%;z-index:20;transform:translateX(-50%);
  width:max-content;max-width:calc(100% - 32px);margin:0;
  background:var(--ink);color:var(--paper);font-size:14px;padding:8px 14px;
  pointer-events:none;animation:strip-out .3s ease 3s forwards;
}
.strip.is-alert,.flash.is-alert{background:var(--magenta)}
@keyframes strip-out{to{opacity:0;visibility:hidden}}

.actions{display:flex;justify-content:flex-end;margin-top:22px}

/* main buttons on the home screen */
.hero{
  width:100%;margin:22px 0 4px;
  border:1px solid var(--ink);background:var(--white);color:var(--ink);
  font:inherit;font-weight:700;font-size:20px;
  letter-spacing:.06em;text-transform:uppercase;
  padding:26px 20px;cursor:pointer;
}
.hero:hover{background:var(--ink);color:var(--paper)}
.hero small{
  display:block;margin-top:7px;font-size:10px;font-weight:400;
  letter-spacing:.16em;color:var(--dim);
}
.hero:hover small{color:var(--ghost)}
a.hero{display:block;text-align:center;text-decoration:none}

/* status bar */
.status{position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-top:1px solid var(--ink)}
.status-in{
  max-width:804px;margin:0 auto;padding:9px 18px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}

:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

@media (max-width:520px){
  :root{--prompt-size:21px}
  .tools{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  .strip,.flash.is-fading:not(.is-carried){animation:strip-out 0s 3s forwards !important}
}

img.pixel{
  display:block;width:100%;height:auto;
  image-rendering:pixelated;image-rendering:crisp-edges;
}

.tools form{margin:0}