/* Offline player for the saved Arcade demos (see README) */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #fff; overflow: hidden;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
#app { position: absolute; inset: 0; display: flex; flex-direction: column; }
.bar { height: 41px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: #f3f4f6; border-bottom: 1px solid #e5e7eb; user-select: none; }
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #d4d6db; display: block; }
.bar button { all: unset; cursor: pointer; color: #6b7280; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; }
.bar button:hover:not([disabled]) { background: #e5e7eb; color: #111827; }
.bar button[disabled] { opacity: .35; cursor: default; }
.bar svg { width: 15px; height: 15px; }
.pill { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  background: #e8e9ec; color: #4b5563; font-size: 12px; height: 24px; padding: 0 6px 0 14px; border-radius: 7px;
  max-width: 50%; white-space: nowrap; }
.pill span { overflow: hidden; text-overflow: ellipsis; }
.right { margin-left: auto; }
.wrap { position: relative; flex: 1; overflow: hidden; background: #f3f4f6; }
.stage { position: absolute; overflow: hidden; background: #fff; }
.step { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.step.on { opacity: 1; }
.layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform .8s cubic-bezier(.45,.05,.25,1); }
.layer img { position: absolute; display: block; user-select: none; -webkit-user-drag: none; }
.step video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.hs { position: absolute; width: 0; height: 0; opacity: 0; transition: opacity .3s ease .25s; }
.step.ready .hs { opacity: 1; }
.dot { position: absolute; width: 1.6em; height: 1.6em; left: -.8em; top: -.8em; border-radius: 50%; cursor: pointer;
  background: var(--c); border: .18em solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.dot::after { content: ""; position: absolute; inset: -.18em; border-radius: 50%; background: var(--c);
  animation: pulse 1.6s ease-out infinite; z-index: -1; }
@keyframes pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.6); opacity: 0; } }
.bub { position: absolute; width: max-content; max-width: 16.2em; background: var(--c); color: var(--t);
  border-radius: .5em; padding: 1em; line-height: 1.45; white-space: pre-line; filter: drop-shadow(0 4px 14px rgba(0,0,0,.18)); }
.bub::before { content: ""; position: absolute; width: .9em; height: .9em; background: var(--c); transform: rotate(45deg); }
.bub.d-bottom::before { top: -.4em; left: var(--ax, 50%); margin-left: -.45em; }
.bub.d-top::before { bottom: -.4em; left: var(--ax, 50%); margin-left: -.45em; }
.bub.d-right::before { left: -.4em; top: 50%; margin-top: -.45em; }
.bub.d-left::before { right: -.4em; top: 50%; margin-top: -.45em; }
.bub button { all: unset; cursor: pointer; display: grid; place-items: center; margin-top: .9em; width: 2.2em; height: 1.6em;
  background: #fff; color: var(--c); border-radius: .3em; }
.bub button svg { width: 1em; height: 1em; }
.end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .6em; padding: 2em; color: #fff; background: rgba(38,41,56,.72); backdrop-filter: blur(3px); }
.end.light { color: #111827; background: rgba(255,255,255,.8); }
.end h2 { margin: 0; font-size: 2.1em; font-weight: 700; letter-spacing: -.01em; }
.end p { margin: 0 0 .8em; font-size: 1.05em; opacity: .9; }
.end a, .end button { all: unset; cursor: pointer; display: block; min-width: 9em; text-align: center; font-weight: 600;
  padding: .7em 1.4em; margin-top: .7em; border-radius: .45em; background: var(--b, #5858ec); color: var(--bt, #fff);
  box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.end .replay { background: transparent; box-shadow: none; opacity: .85; font-weight: 500; }