@font-face { font-family: Rubik; font-weight: 500; src: url(fonts/rubik-hebrew-500-normal.woff2) format('woff2'); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Rubik; font-weight: 500; src: url(fonts/rubik-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: Rubik; font-weight: 700; src: url(fonts/rubik-hebrew-700-normal.woff2) format('woff2'); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Rubik; font-weight: 700; src: url(fonts/rubik-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: Rubik; font-weight: 800; src: url(fonts/rubik-hebrew-800-normal.woff2) format('woff2'); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Rubik; font-weight: 800; src: url(fonts/rubik-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: Crown; src: url(fonts/secular-one-hebrew-400-normal.woff2) format('woff2'); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+FB1D-FB4F; }
@font-face { font-family: Crown; src: url(fonts/secular-one-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
:root {
  --navy: #13213b; --teal: #0f6f73; --gold: #f2b632; --cream: #fffaf0; --ink: #13213b; --muted: #5f6b7a; --line: #e4dccb; --red: #c2412d;
  --display: Crown, Rubik, system-ui, sans-serif; --body: Rubik, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: #bfe3f5; color: var(--ink); font: 500 15px/1.4 var(--body); overflow: hidden; -webkit-tap-highlight-color: transparent; }
#scene, #labels, #overlay { position: fixed; inset: 0; }
#scene canvas { display: block; touch-action: none; }
#labels { pointer-events: none; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tag { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; border: 2px solid var(--navy); background: var(--cream); color: var(--navy);
  border-radius: 999px; padding: 2px 10px; font: 700 12px/1.5 var(--body); direction: ltr; white-space: nowrap; }
.tag.mine { background: var(--gold); }
.tag.michael { background: var(--teal); color: #fff; border-color: var(--navy); font: 400 14px/1.4 var(--display); direction: rtl; }
.hud { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); inset-inline: 12px; display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; pointer-events: none; }
.brand { font: 400 20px/1 var(--display); background: var(--navy); color: var(--gold); padding: 10px 14px; border-radius: 14px; border: 2px solid var(--navy); }
.stat { background: var(--cream); border: 2px solid var(--navy); border-radius: 14px; padding: 4px 12px; display: grid; line-height: 1.1; }
.stat small { color: var(--muted); font-size: 11px; } .stat b { font: 800 18px/1.1 var(--body); font-variant-numeric: tabular-nums; }
.dock { position: fixed; inset-inline: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); max-width: 520px; margin-inline: auto; background: var(--cream);
  border: 2px solid var(--navy); border-radius: 18px; padding: 12px; display: grid; gap: 8px; box-shadow: 0 4px 0 var(--navy); }
.status { margin: 0; font-size: 14px; color: var(--muted); } .status:empty { display: none; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
input { flex: 1; min-width: 0; font: 700 16px var(--body); padding: 10px 12px; border-radius: 12px; border: 2px solid var(--navy); background: #fff; color: var(--ink); text-align: left; }
.btn { font: 700 15px var(--body); border: 2px solid var(--navy); border-radius: 12px; padding: 10px 14px; background: var(--teal); color: #fff; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn.gold { background: var(--gold); color: var(--navy); } .btn.ghost { background: #fff; color: var(--navy); }
.btn:focus-visible, input:focus-visible, .tag:focus-visible, .chip-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.err { margin: 0; color: var(--red); font-size: 14px; } .note { margin: 0; color: var(--muted); font-size: 13px; }
.verify { border-top: 2px dashed var(--line); padding-top: 8px; } .steps { margin: 0; padding-inline-start: 20px; display: grid; gap: 8px; }
code { background: var(--navy); color: var(--gold); padding: 3px 8px; border-radius: 8px; font: 700 15px var(--body); }
.places { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; } .places:empty { display: none; }
.chip-btn { flex: none; font: 700 13px var(--body); background: #fff; border: 2px solid var(--navy); border-radius: 999px; padding: 4px 10px; color: var(--navy); cursor: pointer; }
.card { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 72px); inset-inline: 12px; max-width: 420px; margin-inline: auto; }
.idcard { background: var(--cream); border: 2px solid var(--navy); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 0 var(--navy); }
.id-top { background: var(--navy); color: var(--gold); display: flex; justify-content: space-between; padding: 8px 14px; font: 400 15px var(--display); }
.id-body { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 12px 14px; align-items: center; }
.face svg { width: 84px; height: 84px; display: block; }
.id-fields { display: grid; gap: 2px; min-width: 0; } .id-fields b { font: 800 20px var(--body); text-align: right; overflow-wrap: anywhere; }
.since { color: var(--muted); font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; } .chips span { background: var(--gold); border: 2px solid var(--navy); border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 700; }
.idcard .row { padding: 0 14px 12px; }
body:not(.site) .ui { display: none; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

/* ---- reels: a 1080 × 1920 frame. Cards live in the top third, captions below the middle, the subject in between ---- */
body.reel #overlay { width: 1080px; height: 1920px; pointer-events: none; font-family: var(--body); direction: rtl; }
.r-caption, .r-cards { direction: rtl; unicode-bidi: isolate; }
.r-cards { position: absolute; top: 170px; inset-inline: 70px; display: grid; justify-items: center; gap: 26px; }
.r-card { transform-origin: 50% 0; display: grid; justify-items: center; gap: 14px; }
.r-card[hidden] { display: none; }
.r-title .r-kicker { font: 800 40px var(--body); color: var(--navy); background: var(--cream); border: 6px solid var(--navy); border-radius: 999px; padding: 6px 30px; }
.r-big { font: 400 150px/1 var(--display); color: var(--gold); -webkit-text-stroke: 14px var(--navy); paint-order: stroke fill; text-align: center; text-shadow: 0 10px 0 var(--navy); }
.r-cta .r-big { font-size: 120px; }
.r-counter, .r-comment, .r-idcard { background: var(--cream); border: 7px solid var(--navy); border-radius: 44px; box-shadow: 0 14px 0 var(--navy); width: 900px; }
.r-counter { padding: 34px 44px 26px; justify-items: stretch; gap: 4px; }
.r-head { display: flex; justify-content: space-between; align-items: center; font: 800 40px var(--body); color: var(--navy); }
.r-comment .r-head { padding: 0 44px; }
.r-pill { background: var(--teal); color: #fff; border-radius: 999px; padding: 4px 24px; font-size: 32px; }
.r-sub { font: 700 36px var(--body); color: var(--muted); }
.r-num { font: 800 170px/1 var(--body); color: var(--navy); font-variant-numeric: tabular-nums; direction: ltr; text-align: right; }
.r-spark { width: 100%; height: 130px; }
.r-comment { padding: 30px 0 34px; justify-items: stretch; }
.r-comment > .r-comment { display: grid; grid-template-columns: 130px 1fr auto; gap: 26px; align-items: center; padding: 0 44px; border: 0; box-shadow: none; width: auto; border-radius: 0; background: none; }
.r-comment b { font: 800 42px var(--body); display: block; text-align: right; color: var(--navy); }
.r-comment p { margin: 6px 0 0; font: 700 50px/1.2 var(--body); color: var(--ink); }
.r-likes { font: 800 44px var(--body); color: var(--red); white-space: nowrap; }
.r-face svg { width: 130px; height: 130px; display: block; } .r-face.big svg { width: 210px; height: 210px; }
.r-idcard { overflow: hidden; padding-bottom: 30px; }
.r-idtop { display: flex; justify-content: space-between; width: 100%; background: var(--navy); color: var(--gold); font: 400 46px var(--display); padding: 20px 44px; }
.r-idbody { display: grid; grid-template-columns: 210px 1fr; gap: 36px; align-items: center; padding: 26px 44px 6px; width: 100%; }
.r-idf { display: grid; gap: 6px; font: 700 40px var(--body); color: var(--ink); } .r-idf b { font: 800 56px var(--body); text-align: right; color: var(--navy); }
.r-chip { background: var(--gold); border: 5px solid var(--navy); border-radius: 999px; padding: 6px 26px; font: 800 36px var(--body); color: var(--navy); }
.r-label { background: var(--cream); border: 6px solid var(--navy); border-radius: 999px; padding: 10px 36px; font: 800 48px var(--body); color: var(--navy); box-shadow: 0 8px 0 var(--navy); }
.r-label.gold { background: var(--gold); }
.r-caption { position: absolute; top: 1290px; inset-inline: 60px; text-align: center; font: 800 76px/1.25 var(--body); color: #fff; -webkit-text-stroke: 16px var(--navy); paint-order: stroke fill; }
.r-caption .on { color: var(--gold); }
.r-handle { position: absolute; bottom: 40px; left: 50px; font: 700 30px var(--body); color: #fff; -webkit-text-stroke: 8px rgba(19,33,59,.6); paint-order: stroke fill; direction: ltr; }
body.reel .r-out { position: absolute; inset: 0; width: 1080px; height: 1920px; }
@media (max-width: 480px) { .hud { flex-wrap: nowrap; } .brand { font-size: 16px; padding: 10px; white-space: nowrap; } .stat { padding: 4px 9px; } .card { top: calc(env(safe-area-inset-top, 0px) + 76px); } }

/* ---- the info office, news and invites ---- */
.office { pointer-events: auto; margin-inline-start: auto; white-space: nowrap; font: 700 14px var(--body); background: var(--gold); color: var(--navy); border: 2px solid var(--navy); border-radius: 14px; padding: 6px 12px; cursor: pointer; box-shadow: 0 3px 0 var(--navy); }
.menu { position: fixed; inset-inline: 12px; top: calc(env(safe-area-inset-top, 0px) + 70px); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); max-width: 520px; margin-inline: auto;
  background: var(--cream); border: 2px solid var(--navy); border-radius: 18px; box-shadow: 0 4px 0 var(--navy); overflow: auto; padding: 14px 16px 18px; z-index: 5; }
.menu h2 { font: 400 22px/1.2 var(--display); margin: 4px 0 10px; color: var(--navy); }
.menu p { margin: 0 0 10px; } .menu-x { position: sticky; top: 0; float: left; border: 2px solid var(--navy); background: #fff; border-radius: 10px; width: 34px; height: 34px; cursor: pointer; font-size: 16px; }
.items { display: grid; gap: 8px; } .item { text-align: right; display: grid; gap: 2px; padding: 10px 14px; border: 2px solid var(--navy); border-radius: 14px; background: #fff; cursor: pointer; font: inherit; color: var(--ink); }
.item:first-child { background: var(--gold); } .item b { font: 700 16px var(--body); } .item span { font-size: 13px; color: var(--muted); }
.link { background: none; border: 0; padding: 0; color: var(--teal); font: 700 14px var(--body); cursor: pointer; text-decoration: underline; }
.back { margin-bottom: 6px; }
.tiers { margin: 0 0 12px; padding-inline-start: 20px; display: grid; gap: 4px; }
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.home { border: 2px solid var(--navy); border-radius: 14px; background: #fff; padding: 8px; display: grid; gap: 4px; justify-items: center; text-align: center; min-width: 0; }
.home img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; background: #cfe8f3; } .home b { font-size: 14px; } .home span { font-size: 12px; color: var(--muted); }
.home.rare { background: #fff6d9; border-color: #b8860b; }
.tabs { display: flex; gap: 6px; margin-bottom: 8px; } .tab { flex: 1; border: 2px solid var(--navy); border-radius: 10px; background: #fff; padding: 6px; font: 700 14px var(--body); cursor: pointer; } .tab.on { background: var(--navy); color: var(--gold); }
.people { list-style: none; margin: 0; padding: 0; display: grid; } .people li { display: flex; justify-content: space-between; padding: 7px 2px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.places-grid { display: grid; gap: 8px; } .place { text-align: right; display: grid; gap: 2px; border: 2px solid var(--navy); border-radius: 14px; background: #fff; padding: 10px 14px; cursor: pointer; font: inherit; color: var(--ink); } .place span { font-size: 13px; color: var(--muted); }
.news { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 72px); inset-inline: 12px; max-width: 420px; margin-inline: auto; background: var(--cream); border: 2px solid var(--navy); border-radius: 16px; padding: 12px 14px; box-shadow: 0 4px 0 var(--navy); z-index: 4; }
.news b { font: 400 18px var(--display); } .news p { margin: 4px 0 8px; }
.invite { margin: 0; background: var(--gold); border: 2px solid var(--navy); border-radius: 12px; padding: 8px 10px; font-weight: 700; }
.mates { margin: 0; padding: 0 14px 8px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 480px) { .office { padding: 6px 9px; font-size: 13px; } }

/* ---- free movement ---- */
#overlay { pointer-events: none; }
body.site #scene canvas { cursor: grab; } body.site #scene canvas:active { cursor: grabbing; }
.pad { position: fixed; left: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 200px); display: grid; grid-template-columns: repeat(2, 44px); gap: 6px; z-index: 3; }
.pad button { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--navy); background: var(--cream); color: var(--navy); font: 800 20px var(--body); cursor: pointer; box-shadow: 0 3px 0 var(--navy); touch-action: none; user-select: none; }
.pad button[data-a="home"] { grid-column: span 2; width: auto; background: var(--gold); font-size: 18px; }
.pad button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--navy); }
@media (min-width: 860px) { .pad { bottom: 24px; } }