{
  "kind": "html",
  "title": "Pick seats for Orbit Hearts, Fri 19:40",
  "html": "<style>\n*{box-sizing:border-box}\nbody{margin:0;background:#15111f;color:#f3effa;font:16px/1.45 system-ui,-apple-system,\"Segoe UI\",Roboto,sans-serif;min-height:100vh}\n.wrap{max-width:640px;margin:0 auto;padding:20px 14px 120px}\n.film{display:flex;gap:12px;align-items:center;margin-bottom:16px}\n.poster{width:54px;height:76px;border-radius:8px;background:linear-gradient(160deg,#ff6b6b,#5f27cd);display:grid;place-content:center;font-size:26px;flex:none}\n.film b{display:block;font-size:19px}\n.film span{color:#a99fc0;font-size:14px}\n.screen{height:26px;margin:8px 8% 22px;border-top:4px solid #b9a6ff;border-radius:50% 50% 0 0/100% 100% 0 0;text-align:center;font-size:12px;letter-spacing:.3em;color:#8e84a8;padding-top:6px;box-shadow:0 -10px 24px -10px #b9a6ff}\n.hall{display:grid;gap:6px;justify-content:center}\n.r{display:flex;gap:min(6px,1.2vw);align-items:center}\n.r em{width:16px;font-style:normal;font-size:12px;color:#8e84a8;text-align:center}\n.s{width:min(34px,calc((100vw - 150px) / 10));height:min(34px,calc((100vw - 150px) / 10));border-radius:8px 8px 4px 4px;border:0;background:#3a3150;padding:0;cursor:pointer}\n.s.gap{margin-left:min(18px,3vw)}\n.s.taken{background:#2a2438;cursor:not-allowed;background-image:linear-gradient(45deg,transparent 45%,#45395e 45%,#45395e 55%,transparent 55%)}\n.s.on{background:#b9a6ff;box-shadow:0 0 0 2px #fff inset}\n.s.best{outline:2px dashed #ffcf5c;outline-offset:1px}\n.legend{display:flex;justify-content:center;gap:16px;margin:16px 0 0;font-size:13px;color:#a99fc0}\n.legend i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:5px}\n.bar{position:fixed;left:0;right:0;bottom:0;background:#1d1729;border-top:1px solid #2f2742;padding:12px 16px 12px}\n.bar .in{max-width:640px;margin:0 auto;display:flex;gap:12px;align-items:center}\n.bar p{flex:1;min-width:0;margin:0;font-size:14px;color:#a99fc0}\n.bar p b{color:#f3effa;display:block;font-size:16px}\n.go{font:inherit;font-weight:700;border:0;border-radius:12px;padding:14px 18px;min-height:48px;background:#b9a6ff;color:#1b1430;cursor:pointer}\n.go:disabled{opacity:.35}\n</style>\n<div class=\"wrap\">\n  <div class=\"film\"><div class=\"poster\">🚀</div><div><b>Orbit Hearts</b><span>Fri 7 Nov · 19:40 · Hall 3 · Pick 2 seats</span></div></div>\n  <div class=\"screen\">SCREEN</div>\n  <div class=\"hall\" id=\"hall\"></div>\n  <div class=\"legend\"><span><i style=\"background:#3a3150\"></i>Free</span><span><i style=\"background:#b9a6ff\"></i>Yours</span><span><i style=\"outline:2px dashed #ffcf5c;background:#3a3150\"></i>Best view</span></div>\n</div>\n<div class=\"bar\"><div class=\"in\"><p id=\"sum\"><b>No seats yet</b>Tap 2 seats</p><button class=\"go\" id=\"go\" disabled>Book 2 seats</button></div></div>\n<script>\nvar rows='ABCDEFGH',taken={A3:1,A4:1,B5:1,B6:1,C2:1,D7:1,D8:1,E4:1,E5:1,E6:1,F1:1,F10:1,G3:1,G4:1,H5:1,H6:1,H7:1},best={E7:1,E8:1,D5:1,D6:1},picked=[],need=2,sent=false;\nvar hall=document.getElementById('hall');\nrows.split('').forEach(function(r){\n  var row=document.createElement('div');row.className='r';row.innerHTML='<em>'+r+'</em>';\n  for(var n=1;n<=10;n++){\n    var id=r+n,b=document.createElement('button');b.className='s'+(n===6?' gap':'')+(taken[id]?' taken':'')+(best[id]?' best':'');\n    b.setAttribute('aria-label','Row '+r+' seat '+n+(taken[id]?' taken':''));b.dataset.id=id;if(taken[id])b.disabled=true;\n    b.onclick=function(){toggle(this)};row.appendChild(b);\n  }\n  row.insertAdjacentHTML('beforeend','<em>'+r+'</em>');hall.appendChild(row);\n});\nfunction toggle(b){\n  var id=b.dataset.id,k=picked.indexOf(id);\n  if(k>=0){picked.splice(k,1);b.classList.remove('on')}\n  else{if(picked.length>=need){var old=picked.shift();document.querySelector('[data-id=\"'+old+'\"]').classList.remove('on')}picked.push(id);b.classList.add('on')}\n  var s=document.getElementById('sum'),g=document.getElementById('go');\n  s.innerHTML=picked.length?'<b>'+picked.join(', ')+'</b>'+(picked.length*32)+' zł · '+(picked.length===need?'ready':'pick '+(need-picked.length)+' more'):'<b>No seats yet</b>Tap 2 seats';\n  g.disabled=picked.length!==need;\n}\ndocument.getElementById('go').onclick=function(){if(sent)return;sent=true;(window.Bridgit||window.Bridget).respond(JSON.stringify({seats:picked.slice().sort(),total_pln:picked.length*32,showing:'2026-11-07T19:40'}))};\n</script>\n"
}