/* justin.fm/fun: the frame every fun project plays in (js/play/shell.js builds it).
   A plain white page; the project's canvas centred; small mono chrome in the corners. */
:root{
  --ink:#101214;--muted:#5A6072;--faint:#9A9FA9;--hair:rgba(20,22,26,.12);--dm:#2F5DFF;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:#FFFFFF;color:var(--ink);overflow:hidden;
  font-family:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase}

.stage{position:fixed;left:0;right:0;top:var(--stage-top,0);bottom:var(--stage-bottom,0);touch-action:none}
/* centred even when wider than the screen (PixelCanvas bleed): both tips crop evenly */
.stage{overflow:hidden}
.stage canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;image-rendering:pixelated;image-rendering:crisp-edges}

.chrome{position:fixed;z-index:2;color:var(--faint)}
.chrome a,.chrome button{color:var(--muted);transition:color .2s}
.chrome a:hover,.chrome button:hover{color:var(--ink)}
.chrome a:focus-visible,.chrome button:focus-visible{outline:2px solid var(--dm);outline-offset:3px;border-radius:2px}
.c-back{top:22px;left:24px;display:flex;align-items:center;gap:10px}
.c-back svg{width:16px;height:16px;display:block}
.c-back svg path{fill:var(--ink)}
.c-sound{top:22px;right:24px}
.c-sound button{font:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;cursor:pointer;padding:0}
.c-credit{bottom:22px;right:24px}
.c-hint{bottom:22px;left:0;right:0;text-align:center;transition:opacity .6s;pointer-events:none}
.c-hint.gone{opacity:0}

.c-hud{top:16px;left:50%;transform:translateX(-50%);display:flex;gap:28px;align-items:flex-end}
.hud-item{display:flex;flex-direction:column;align-items:center;gap:2px}
.hud-item b{font-weight:600;font-size:34px;line-height:1;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.hud-item.small b{font-size:20px;color:var(--muted)}
.hud-item b.bump{animation:bump .45s cubic-bezier(.2,.8,.2,1)}
@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.28)}100%{transform:scale(1)}}

.c-modes{top:84px;left:50%;transform:translateX(-50%);display:flex;gap:10px;justify-content:center;width:max-content;max-width:calc(100vw - 32px)}

/* pickers (js/play/picker.js): a button with the current choice; a dropdown, or a sheet on touch */
.pick{position:relative}
.pick-btn{
  display:flex;align-items:center;gap:10px;height:40px;padding:0 12px 0 14px;border:0;border-radius:9px;cursor:pointer;
  background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--hair);font:inherit;color:var(--ink);transition:box-shadow .2s;
}
.pick-btn:hover,.pick-btn[aria-expanded="true"]{box-shadow:inset 0 0 0 1px rgba(20,22,26,.35)}
.pick-btn:focus-visible{outline:2px solid var(--dm);outline-offset:2px}
.pick-label{font-size:10px;color:var(--faint)}
.pick-value{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.pick-caret{width:10px;height:6px;color:var(--muted)}
.pick-menu{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:5;min-width:320px;padding:6px;
  background:#FFFFFF;border-radius:12px;box-shadow:0 0 0 1px var(--hair),0 18px 40px -12px rgba(20,22,26,.28);
  display:flex;flex-direction:column;gap:2px;
}
.pick-menu[hidden]{display:none}
.pick-opt{
  display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:none;cursor:pointer;
  font:inherit;text-align:left;color:var(--ink);
}
.pick-opt:hover,.pick-opt:focus-visible{background:rgba(20,22,26,.05);outline:none}
.pick-opt[aria-selected="true"]{background:rgba(47,93,255,.08)}
.pick-opt[aria-selected="true"] b::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;vertical-align:middle;background:var(--dm)}
.pick-text{display:flex;flex-direction:column;gap:1px}
.pick-text b{font-weight:600;font-size:15px;letter-spacing:-.01em}
.pick-text small{font-size:12.5px;color:var(--muted)}
/* swatches: six pixels of a court's palette, square and crisp */
.sw{display:grid;grid-template-columns:repeat(3,1fr);flex:none;box-shadow:0 0 0 1px rgba(20,22,26,.18)}
.sw i{display:block}
.sw.mini{width:15px;height:10px}
.sw.big{width:36px;height:24px}
.pick-backdrop{position:fixed;inset:0;z-index:4;background:rgba(20,22,26,.28)}
.pick-head{padding:6px 12px 10px;color:var(--faint)}

@media (max-width:640px){
  .c-back{top:16px;left:16px}
  .c-sound{top:16px;right:16px}
  .c-credit{bottom:calc(10px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;font-size:10px}
  .c-hud{top:48px;gap:22px}
  .c-modes{top:108px;gap:8px}
  .pick-btn{height:44px;padding:0 12px}
  /* on touch screens the menu is a sheet from the bottom, big rows for thumbs */
  .pick-menu.sheet{
    position:fixed;top:auto;left:0;right:0;bottom:0;transform:none;min-width:0;z-index:5;
    padding:14px 12px calc(16px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0;
  }
  .pick-menu.sheet .pick-opt{padding:13px 12px}
  .pick-menu.sheet .sw.big{width:45px;height:30px}
  .c-hint{bottom:calc(30px + env(safe-area-inset-bottom));padding:0 16px}
}

/* touch controls: the thumb stick (js/play/stick.js) bottom-left; a project's action button
   sits bottom-right */
.stick{
  position:fixed;z-index:2;left:max(24px,env(safe-area-inset-left));bottom:calc(58px + env(safe-area-inset-bottom));
  width:var(--size);height:var(--size);border-radius:50%;touch-action:none;-webkit-touch-callout:none;
  background:rgba(20,22,26,.04);box-shadow:inset 0 0 0 1px var(--hair);display:grid;place-items:center;
}
.stick-knob{width:44%;height:44%;border-radius:50%;background:#14161a;transition:transform .12s;pointer-events:none}
.stick.on .stick-knob{transition:none}
html{touch-action:manipulation}

/* the big touch meter (js/play/meter.js): above the action button, bottom-right */
.big-meter{
  position:fixed;z-index:2;right:max(52px,calc(env(safe-area-inset-right) + 52px));bottom:calc(178px + env(safe-area-inset-bottom));
  width:28px;height:min(34vh,240px);border-radius:8px;background:#FFFFFF;box-shadow:inset 0 0 0 2px #14161a;
  overflow:hidden;opacity:0;transform:translateY(8px);transition:opacity .12s,transform .12s;pointer-events:none;
}
.big-meter.on{opacity:1;transform:none}
.bm-band{position:absolute;left:2px;right:2px;background:#33c27a}
.bm-fill{position:absolute;left:2px;right:2px;bottom:2px;background:rgba(20,22,26,.16)}
.bm-mark{position:absolute;left:-2px;right:-2px;height:4px;margin-bottom:-2px;background:#14161a}
.big-meter.hot .bm-mark{background:#1a8f52}