/* The acid look: green on black, with full-color icons that sit naturally on top of
   people's videos. It's built on top of style.css. */
:root { --acid: #5dff3b; }

/* The perspective lines behind everything, drawn by room.js */
canvas.room { display: none; }
html[data-acid] canvas.room { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
html[data-acid] #room { position: fixed; }

/* --- Tokens: style.css follows these, so most of the site changes here. --- */
html[data-acid] {
  --fg: var(--acid);
  --text: color-mix(in srgb, var(--acid) 22%, #fff);
  --dim: color-mix(in srgb, var(--acid) 62%, #666);
  --line: color-mix(in srgb, var(--acid) 50%, transparent);
  --glass: rgba(0, 0, 0, .62);
  --red: #ff2d2d;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
}

/* --- Squared-off controls --- */
html[data-acid] .pill, html[data-acid] .icon-btn, html[data-acid] .vote,
html[data-acid] .post-code, html[data-acid] .post-note, html[data-acid] .upload-bar,
html[data-acid] .toast, html[data-acid] .notice, html[data-acid] .modal-box, html[data-acid] .stage,
html[data-acid] .group-row, html[data-acid] .group-icon, html[data-acid] .msg, html[data-acid] .cmd-list,
html[data-acid] .chat-bar textarea, html[data-acid] .fields textarea, html[data-acid] .icon-pick,
html[data-acid] .trim-track, html[data-acid] .trim-sel, html[data-acid] .trim-handle, html[data-acid] .center-icon {
  border-radius: 0;
}
html[data-acid] .pill {
  text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 700;
  /* The little marks in the corners */
  background:
    linear-gradient(var(--acid), var(--acid)) 0 0 / 7px 2px no-repeat,
    linear-gradient(var(--acid), var(--acid)) 0 0 / 2px 7px no-repeat,
    linear-gradient(var(--acid), var(--acid)) 100% 100% / 7px 2px no-repeat,
    linear-gradient(var(--acid), var(--acid)) 100% 100% / 2px 7px no-repeat,
    var(--glass);
}
html[data-acid] .pill.solid { background: var(--acid); color: #000; }
html[data-acid] .pill:active { background: var(--acid); color: #000; }
html[data-acid] .icon-btn { background-color: var(--glass); }
html[data-acid] .vote { background-color: var(--glass); }
html[data-acid] .icon-btn, html[data-acid] .vote { border-color: rgba(255, 255, 255, .28); }
html[data-acid] .frame .del, html[data-acid] .group-row .del { background: var(--red); }
html[data-acid] .create {
  border-radius: 0; background: var(--acid); font-weight: 700;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow: none;
}
html[data-acid] .count { font-size: 11px; color: #fff; text-shadow: 0 0 3px #000, 0 1px 3px #000; }
html[data-acid] .dot { border-radius: 0; animation: acid-blink 1s steps(2) infinite; }
/* Color pictures here, where the classic look uses one-color cutouts. */
html[data-acid] .ico, html[data-acid] .vote.on .ico {
  -webkit-mask: none; mask: none; background: var(--icon) center / contain no-repeat;
}
/* Your mouths: open with sound on, closed when muted. No box around them. */
html[data-acid] .i-sound { --icon: url(/icons/acid/sound-off.png); width: 100%; height: 100%; }
html[data-acid] .sound-on .i-sound { --icon: url(/icons/acid/sound-on.png); }
html[data-acid] .sound-on .sound-btn { height: 50px; }
/* Part of each video post. As tall as the mouth showing, in the corner under the post code. */
html[data-acid] .sound-btn .ico { background-position: left bottom; }
html[data-acid] .sound-btn {
  height: 32px; transition: height .18s ease;
  position: absolute; z-index: 5; left: calc(10px + env(safe-area-inset-left)); bottom: calc(10px + env(safe-area-inset-bottom));
  width: 64px; padding: 0; background: none; border: 0; border-radius: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
}
/* Your paper arrows: one pair on the feed, another on groups and chat. They're the
   whole button, with no box around them. */
html[data-acid] #toGroups, html[data-acid] #toChat, html[data-acid] #toFeedL, html[data-acid] #toFeedR {
  width: 72px; padding: 0; background: none; border: 0; border-radius: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
}
html[data-acid] #toFeedL, html[data-acid] #toFeedR { width: 64px; }
html[data-acid] #toGroups .ico, html[data-acid] #toChat .ico, html[data-acid] #toFeedL .ico, html[data-acid] #toFeedR .ico { width: 100%; height: 100%; transform: none; }
html[data-acid] #toGroups .ico { --icon: url(/icons/acid/arrow-center-left.png); }
html[data-acid] #toChat .ico { --icon: url(/icons/acid/arrow-center-right.png); }
html[data-acid] #toFeedL .ico { --icon: url(/icons/acid/arrow-side-right.png); }
html[data-acid] #toFeedR .ico { --icon: url(/icons/acid/arrow-side-left.png); }
/* Your paper airplane, with no box. */
html[data-acid] .vote.share {
  padding: 0; background: none; border: 0; border-radius: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
}
html[data-acid] .vote.share .ico { --icon: url(/icons/acid/share.png); width: 100%; height: 100%; }
html[data-acid] .vote.del .ico { --icon: url(/icons/acid/delete.svg); }

/* --- Like and dislike: your faces --- */
/* No box. Small, so the one you select can grow without covering too much of the post. */
html[data-acid] .vote.like, html[data-acid] .vote.dislike {
  width: 38px; height: 38px; padding: 0; background: none; border: 0; border-radius: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
  transition: width .18s cubic-bezier(.3, 1.6, .5, 1), height .18s cubic-bezier(.3, 1.6, .5, 1);
}
html[data-acid] .side { width: 52px; } /* room for the bigger one, so nothing slides sideways */
html[data-acid] .vote.like .ico, html[data-acid] .vote.dislike .ico { width: 100%; height: 100%; transform: none; }
html[data-acid] .like .ico { --icon: url(/icons/acid/like.png); }
html[data-acid] .dislike .ico { --icon: url(/icons/acid/dislike.png); }
html[data-acid] .vote.like.on, html[data-acid] .vote.dislike.on { width: 52px; height: 52px; }

/* --- The feed. The video itself stays clean. --- */
html[data-acid] .group-name { text-align: center; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 0 4px #000, 0 1px 3px #000; }
/* In the corner: on top of the mouth on videos, moving with its height, and alone on pictures. */
html[data-acid] .post-code {
  left: calc(10px + env(safe-area-inset-left)); bottom: calc(10px + env(safe-area-inset-bottom));
  border: 1px solid rgba(255, 255, 255, .28); color: #fff; transition: bottom .18s ease;
}
html[data-acid] .frame:has(video) .post-code { bottom: calc(48px + env(safe-area-inset-bottom)); }
html[data-acid] .sound-on .frame:has(video) .post-code { bottom: calc(66px + env(safe-area-inset-bottom)); }
html[data-acid] .post-code::before { content: "// "; opacity: .6; }
html[data-acid] .center-icon { background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .28); }
/* The red border: caution tape, marching around the post. */
html[data-acid] .frame::after {
  padding: 6px; border: 0; border-radius: 0;
  background: linear-gradient(45deg, #ff2d2d 25%, #000 25% 50%, #ff2d2d 50% 75%, #000 75%) 0 0 / 28px 28px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: acid-tape 1s linear infinite;
}
html[data-acid] .screen, html[data-acid] .slide { background: none; }
@media (min-width: 700px) {
  html[data-acid] .frame { border-radius: 0; outline: 1px solid var(--line); }
}

/* --- Groups and chat --- */
html[data-acid] .screen-title { text-transform: uppercase; letter-spacing: .16em; font-weight: 800; color: var(--acid); }
/* A strip of checkers and bars under each heading */
/* The neon bar across the top, edge to edge, with black words */
html[data-acid] .screen-head {
  margin: calc(-1 * max(10px, env(safe-area-inset-top))) -12px 12px;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px;
  background: var(--acid); color: #000;
}
html[data-acid] .screen-head .screen-title, html[data-acid] .screen-head .dim, html[data-acid] .screen-head .code-link { color: #000; }
html[data-acid] .screen-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 4px;
  background: repeating-linear-gradient(90deg, var(--acid) 0 2px, transparent 2px 5px, var(--acid) 5px 6px, transparent 6px 11px) 0 0 / 40% 100% no-repeat;
}
html[data-acid] .screen-head { position: relative; }
html[data-acid] .group-row { border: 1px solid transparent; }
html[data-acid] .group-row:hover { background: color-mix(in srgb, var(--acid) 8%, #000); }
html[data-acid] .group-row.on { background: color-mix(in srgb, var(--acid) 12%, #000); border-color: var(--acid); }
html[data-acid] .group-row-name { color: var(--text); }
html[data-acid] .group-icon { background: #000; color: var(--acid); }
html[data-acid] .msg { background: rgba(0, 0, 0, .78); border: 1px solid color-mix(in srgb, var(--acid) 30%, transparent); }
html[data-acid] .msg.mine { background: color-mix(in srgb, var(--acid) 14%, #000); border-color: var(--line); }
html[data-acid] .msg.private { border-style: dashed; border-color: var(--acid); background: #000; }
html[data-acid] .msg.system { border: 0; background: none; color: var(--dim); font-size: 12px; }
html[data-acid] .msg-body { color: var(--text); font-size: 14px; }
html[data-acid] .msg.system .msg-body { color: var(--dim); font-size: 12px; }
html[data-acid] .code-link { color: var(--acid); text-decoration: underline; text-underline-offset: 2px; }
html[data-acid] .chat-bar textarea, html[data-acid] .fields textarea { background: #000; color: var(--text); }
html[data-acid] .chat-bar textarea:focus, html[data-acid] .fields textarea:focus { border-color: var(--acid); }
/* Monospace is wide: keep the hint on one line */
/* Your envelope stands in for the word send. */
html[data-acid] .chat-bar .pill.solid {
  flex: none; align-self: center; width: 44px; height: 30px; padding: 0; font-size: 0; border: 0;
  background: url(/icons/acid/send.png) center / contain no-repeat;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-acid] textarea::placeholder { color: var(--dim); font-size: 12px; white-space: nowrap; }
html[data-acid] .cmd-list { background: #000; border-color: var(--acid); }
html[data-acid] .cmd.on { background: var(--acid); color: #000; }
html[data-acid] .cmd.on span { color: #000; }
html[data-acid] .cmd b { color: inherit; }

/* --- Popups and the make screen --- */
html[data-acid] .modal-box { background: #000; border-color: var(--acid); box-shadow: 6px 6px 0 color-mix(in srgb, var(--acid) 45%, transparent); }
html[data-acid] .icon-pick { background: #000; border-color: var(--line); color: var(--acid); }
html[data-acid] .toast, html[data-acid] .notice, html[data-acid] .upload-bar { background: #000; border-color: var(--acid); color: var(--acid); box-shadow: 4px 4px 0 color-mix(in srgb, var(--acid) 40%, transparent); }
html[data-acid] .sheet { background: #000; }
html[data-acid] .sheet-inner { position: relative; }
html[data-acid] .stage, html[data-acid] .stage-msg, html[data-acid] .frame { background-color: #000; }
html[data-acid] .crop-frame { border-color: var(--acid); }
html[data-acid] .zoom-row input { accent-color: var(--acid); }
html[data-acid] .trim-track { background: #000; }
html[data-acid] .trim-sel { background: color-mix(in srgb, var(--acid) 16%, transparent); }
html[data-acid] .trim-head, html[data-acid] .trim-head::before { background: var(--text); }
html[data-acid] .trim-head::before { border-radius: 0; }

/* --- The warning at the door --- */
/* A black box on the hallway: the name between two warning signs and a short message.
   Tapping anywhere goes in. */
html[data-acid] .gate-box { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; }
html[data-acid] .gate-panel {
  display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(100%, 420px);
  padding: 24px 18px; background: #000; border: 1px solid var(--acid); color: var(--text); text-align: center;
}
html[data-acid] .gate-head { display: flex; align-items: center; gap: 10px; width: 100%; }
html[data-acid] .gate-warn { flex: none; width: 17%; aspect-ratio: 1; background: url(/icons/acid/warning.png) center / contain no-repeat; }
html[data-acid] .gate-head .logo { display: block; flex: 1; min-width: 0; width: auto; margin: 0; font-size: 0; }
html[data-acid] .gate-text { font-size: 14px; line-height: 1.5; }
html[data-acid] .gate-go { color: var(--acid); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
/* The name, drawn. The words stay in the page for screen readers. */
html[data-acid] .logo {
  width: min(100%, 280px); aspect-ratio: 300 / 112; margin: 14px auto 0; color: transparent; overflow: hidden; background: var(--acid);
  -webkit-mask: url(/icons/acid/wordmark.svg) center / contain no-repeat; mask: url(/icons/acid/wordmark.svg) center / contain no-repeat;
}

@keyframes acid-blink { 50% { opacity: .35; } }
@keyframes acid-tape { to { background-position: 28px 0; } }
@media (prefers-reduced-motion: reduce) {
  html[data-acid] * , html[data-acid] *::before, html[data-acid] *::after { animation: none !important; }
}