/* ===== go4it ===== */
:root{
  --bg:#070a12;
  --surface:#0f1422;
  --surface2:#151c2e;
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.16);
  --ink:#eaf0fb;
  --dim:#8d9ab4;
  --faint:#5e6a84;
  --brand:#ffc44d;
  --brand2:#ff7a45;
  --good:#45e0a4;
  --info:#5ab6ff;
  --warn:#ffb347;
  --bad:#ff5f78;
  --violet:#a98bff;
  --r:14px;
  --font:'Inter','Segoe UI','Heebo','Rubik','Arial Hebrew','Noto Sans Hebrew',system-ui,-apple-system,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* an app, not a document: nothing is selected by a tap or a long press (no text highlight, no callout,
   no grey tap flash) — text fields stay editable and selectable */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
input,textarea,select,[contenteditable],[contenteditable] *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
body{background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow:hidden;
  /* iOS rubber-banding inside a fixed shell looks broken */
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px}
::-webkit-scrollbar-track{background:transparent}

.hidden,[hidden]{display:none !important}

/* ---------------- app frame ---------------- */
/* dvh tracks the collapsing mobile browser toolbar; vh does not, which is how
   you end up with a bottom nav sitting under Safari's chrome. */
#app{display:flex;flex-direction:column;height:100vh;height:100dvh}

header.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;flex-shrink:0;z-index:30;
  height:56px;padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right));
  background:rgba(10,14,24,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.tb-start{display:flex;align-items:center;gap:8px;min-width:0}
.tb-title{font-weight:700;font-size:16.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tb-back{flex-shrink:0}
.tb-back::before{content:'←';font-size:17px}
[dir=rtl] .tb-back::before{content:'→'}
.tb-brand{display:flex;align-items:center;gap:7px;font-weight:800;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.tb-icon{width:22px;height:22px;border-radius:6px;box-shadow:0 0 14px rgba(59,79,216,.45)}
.tb-brand small{font-size:9.5px;font-weight:700;letter-spacing:.12em;color:var(--faint);
  padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.07);text-transform:uppercase}
.tb-end{display:flex;align-items:center;justify-content:flex-end;gap:6px}
/* the language: a button showing the one in use; it opens a short menu of the others, each a button too */
.tb-langs{position:relative}
.tb-lang{width:auto;min-width:34px;padding:0 10px;font-size:12.5px;font-weight:700;color:var(--ink)}
.tb-lang[aria-expanded=true]{background:rgba(255,255,255,.12)}
.langmenu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:40;display:flex;flex-direction:column;gap:6px;
  padding:6px;border-radius:12px;background:rgba(10,14,24,.97);border:1px solid var(--line);
  box-shadow:0 18px 40px -16px #000;backdrop-filter:blur(14px)}
.langmenu .icon-btn{width:auto;min-width:56px;padding:0 12px;font-size:12.5px;font-weight:700}
.langmenu .icon-btn.on{color:var(--brand);background:color-mix(in srgb,var(--brand) 16%,transparent)}
@media (max-width:420px){ .tb-brand small{display:none} .tb-brand{font-size:15px;gap:6px} .tb-title{font-size:15px} }
.icon-btn{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  color:var(--dim);background:rgba(255,255,255,.05);transition:.15s;font-size:15px}
.icon-btn:hover{color:var(--ink);background:rgba(255,255,255,.1)}

main{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.wrap{max-width:1180px;margin:0 auto;
  padding:clamp(16px,2.6vw,26px) clamp(14px,2.4vw,20px) 70px;
  padding-inline:max(clamp(14px,2.4vw,20px),env(safe-area-inset-left)) max(clamp(14px,2.4vw,20px),env(safe-area-inset-right))}
.wrap.narrow{max-width:620px}

/* ---------------- bottom tab bar (phones) ---------------- */
.tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;flex-shrink:0;
  background:rgba(10,14,24,.96);border-top:1px solid var(--line);
  backdrop-filter:blur(14px);z-index:30;padding-bottom:env(safe-area-inset-bottom)}
@media (min-width:641px){ .tabbar{justify-content:center;grid-auto-columns:minmax(120px,170px)} }
.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:8px 4px 6px;font-size:10.5px;font-weight:600;letter-spacing:.03em;
  color:var(--faint);position:relative;transition:color .15s;min-height:52px}
.tabbar button .ic{font-size:19px;line-height:1;transition:transform .18s}
.tabbar button.on{color:var(--brand)}
.tabbar button.on .ic{transform:translateY(-1px) scale(1.08)}
.tabbar button.on::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:2.5px;border-radius:0 0 3px 3px;background:var(--brand);
  box-shadow:0 0 12px var(--brand)}
.tabbar .badge{position:absolute;top:5px;inset-inline-end:calc(50% - 20px);min-width:16px;height:16px;
  border-radius:99px;background:var(--warn);color:#201604;font-size:9.5px;font-weight:800;
  display:grid;place-items:center;padding:0 4px}

/* ---------------- type ---------------- */
h1.page{font-size:25px;font-weight:700;letter-spacing:-.02em;margin-bottom:5px}
.page-sub{color:var(--dim);font-size:14px;margin-bottom:24px;max-width:660px}
h2.sec{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint);margin:30px 0 13px}
h2.sec:first-child{margin-top:0}
.muted{color:var(--dim)}
.faint{color:var(--faint)}
.mono{font-family:var(--mono)}

/* ---------------- cards ---------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:18px}
.card.pad0{padding:0;overflow:hidden}
.grid{display:grid;gap:14px}
/* min() guard: a bare minmax(290px,1fr) forces a 290px track even when the
   container is 320px wide minus padding, which overflows the viewport. */
.g2{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr))}
.row{display:flex;align-items:center;gap:11px}
.row.wrap-row{flex-wrap:wrap}
/* the Rewards filters share one width (the same flex basis, the same growth) */
select.i.filt{flex:1 1 150px;width:auto;max-width:230px;min-width:0}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stack{display:flex;flex-direction:column;gap:12px}

/* ---------------- controls ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 17px;border-radius:10px;font-size:14px;font-weight:600;transition:.15s;
  background:rgba(255,255,255,.07);color:var(--ink);border:1px solid var(--line)}
.btn:hover{background:rgba(255,255,255,.12);border-color:var(--line2)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:linear-gradient(180deg,#ffd470,var(--brand));color:#17120a;border:0;
  box-shadow:0 7px 20px -8px rgba(255,180,70,.65)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.good{background:linear-gradient(180deg,#5ef0b8,var(--good));color:#06251a;border:0;
  box-shadow:0 7px 20px -8px rgba(70,220,160,.6)}
.btn.danger{background:rgba(255,95,120,.14);color:#ff9fae;border-color:rgba(255,95,120,.3)}
.btn.sm{padding:6px 12px;font-size:12.5px;border-radius:8px}
.btn.block{width:100%}
.btn.lg{padding:14px 22px;font-size:15px}

label.f{display:block;margin-bottom:13px}
label.f span{display:block;font-size:12px;font-weight:600;color:var(--dim);margin-bottom:6px;
  letter-spacing:.03em}
input.i,select.i,textarea.i{width:100%;padding:10px 12px;border-radius:10px;color-scheme:dark;
  background:var(--surface2);border:1px solid var(--line);transition:.15s;font-size:14px}
input.i:focus,select.i:focus,textarea.i:focus{outline:0;border-color:rgba(255,196,77,.5);
  box-shadow:0 0 0 3px rgba(255,196,77,.1)}
textarea.i{resize:vertical;min-height:70px}

/* ---------------- pills / badges ---------------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;
  font-size:11.5px;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.pill.live{background:rgba(69,224,164,.15);color:var(--good)}
.pill.draft{background:rgba(255,255,255,.08);color:var(--dim)}
.pill.pending{background:rgba(255,179,71,.15);color:var(--warn)}
.pill.ended{background:rgba(255,95,120,.13);color:var(--bad)}
.pill.info{background:rgba(90,182,255,.15);color:var(--info)}
.pill.violet{background:rgba(169,139,255,.16);color:var(--violet)}
.dotm{width:7px;height:7px;border-radius:99px;background:currentColor;
  box-shadow:0 0 9px currentColor}

.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:99px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:12.5px}
.swatch{width:9px;height:9px;border-radius:3px;flex-shrink:0}

.avatar{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-weight:700;font-size:13px;color:#0c1018;flex-shrink:0}
.avatar.lg{width:46px;height:46px;border-radius:13px;font-size:17px}
.avatar.sm{width:24px;height:24px;border-radius:7px;font-size:10px}

/* ---------------- empty / alerts ---------------- */
.empty{text-align:center;padding:48px 20px;color:var(--faint)}
.empty .big{font-size:34px;margin-bottom:10px;opacity:.5}
.alert{padding:12px 15px;border-radius:11px;font-size:13.5px;display:flex;gap:10px;
  align-items:flex-start;line-height:1.5}
.alert.warn{background:rgba(255,179,71,.1);border:1px solid rgba(255,179,71,.26);color:#ffd79a}
.alert.bad{background:rgba(255,95,120,.1);border:1px solid rgba(255,95,120,.28);color:#ffaeba}
.alert.good{background:rgba(69,224,164,.1);border:1px solid rgba(69,224,164,.26);color:#9af2d0}
.alert.info{background:rgba(90,182,255,.09);border:1px solid rgba(90,182,255,.24);color:#b2dbff}
.alert ul{margin-block-start:6px;margin-inline-start:16px}

/* ---------------- campaign card ---------------- */
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:.18s;display:flex;flex-direction:column}
.ccard:hover{border-color:var(--line2);transform:translateY(-2px);
  box-shadow:0 18px 40px -22px #000}
.ccard .band{height:5px;background:linear-gradient(90deg,var(--brand),var(--brand2))}
.ccard .body{padding:17px;flex:1;display:flex;flex-direction:column;gap:11px}
.ccard h3{font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.ccard .desc{font-size:13.5px;color:var(--dim);line-height:1.5}

.biz-stack{display:flex;align-items:center}
.biz-stack .avatar{margin-inline-end:-9px;border:2px solid var(--surface)}
.biz-stack .more{margin-inline-start:16px;font-size:12.5px;color:var(--dim)}

/* ---------------- journey rail ---------------- */
.rail{display:flex;flex-direction:column;gap:0}
.rstep{display:flex;gap:14px;position:relative;padding-bottom:18px}
.rstep:last-child{padding-bottom:0}
.rstep .spine{position:absolute;inset-inline-start:17px;top:38px;bottom:0;width:2px;
  background:var(--line);border-radius:2px}
.rstep:last-child .spine{display:none}
.rstep.done .spine{background:rgba(69,224,164,.45)}
.rnode{width:36px;height:36px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;
  font-size:14px;font-weight:700;border:1px solid var(--line);background:var(--surface2);
  color:var(--faint);z-index:1}
.rstep.done .rnode{background:rgba(69,224,164,.16);border-color:rgba(69,224,164,.4);color:var(--good)}
.rstep.current .rnode{background:linear-gradient(145deg,#ffd470,var(--brand));color:#17120a;border:0;
  box-shadow:0 0 0 4px rgba(255,196,77,.16),0 6px 18px -6px rgba(255,180,70,.7)}
.rbody{flex:1;min-width:0;padding-top:2px}
.rbody .t{font-weight:650;font-size:14.5px}
.rbody .s{font-size:12.5px;color:var(--dim);margin-top:2px}
.rstep.locked{opacity:.45}

/* ---------------- voucher ---------------- */
.voucher{position:relative;border-radius:16px;overflow:hidden;
  background:linear-gradient(145deg,#1b2338,#121829);border:1px solid var(--line2)}
.voucher::before,.voucher::after{content:'';position:absolute;width:24px;height:24px;
  border-radius:99px;background:var(--bg);top:50%;transform:translateY(-50%)}
.voucher::before{left:-12px}
.voucher::after{right:-12px}
.voucher .vtop{padding:20px;text-align:center;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,196,77,.14),transparent 70%)}
.voucher .vtitle{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:9px 0 4px}
.voucher .vat{font-size:13px;color:var(--dim)}
.voucher .vdash{border-top:2px dashed rgba(255,255,255,.14);margin:0 14px}
.voucher .vbot{padding:16px 20px 20px}
.vcode{font-family:var(--mono);font-size:16px;letter-spacing:.14em;text-align:center;
  color:var(--brand);padding:9px;border-radius:9px;background:rgba(255,196,77,.08);
  border:1px dashed rgba(255,196,77,.3)}

/* PIN entry — six fixed 44px boxes overflow a 320px phone once modal padding
   is counted, so the boxes scale with the viewport instead. */
.pinbox{display:flex;gap:clamp(5px,1.8vw,9px);justify-content:center;margin:14px 0}
.pinbox input{width:clamp(38px,12.5vw,46px);height:clamp(48px,15vw,56px);
  text-align:center;font-size:clamp(18px,5vw,21px);font-weight:700;
  font-family:var(--mono);border-radius:11px;background:var(--surface2);
  border:1px solid var(--line);transition:.15s;min-width:0}
.pinbox input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,196,77,.14)}
.pinbox input.err{border-color:var(--bad);animation:shake .3s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* merchant live PIN */
.bigpin{font-family:var(--mono);font-size:44px;font-weight:700;letter-spacing:.17em;
  text-align:center;color:var(--brand);text-shadow:0 0 34px rgba(255,196,77,.45)}
.pinbar{height:4px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:12px}
.pinbar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2));
  border-radius:99px;transition:width .25s linear}

/* ---------------- stats ---------------- */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.stat .k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.stat .v{font-size:29px;font-weight:750;letter-spacing:-.025em;margin-top:5px;
  font-variant-numeric:tabular-nums}
.stat .n{font-size:12px;color:var(--dim);margin-top:3px}

/* funnel */
.funnel{display:flex;flex-direction:column;gap:9px}
.frow{display:grid;grid-template-columns:168px 1fr 76px;align-items:center;gap:13px;font-size:13.5px}
.fbar{height:30px;border-radius:8px;background:rgba(255,255,255,.05);overflow:hidden;position:relative}
.fbar i{display:block;height:100%;border-radius:8px;
  background:linear-gradient(90deg,rgba(255,196,77,.85),rgba(255,122,69,.85));
  transition:width .5s cubic-bezier(.3,.9,.3,1)}
.fval{text-align:end;font-weight:700;font-variant-numeric:tabular-nums}
.fdrop{font-size:11.5px;color:var(--bad)}

/* matrix */
.mtx{width:100%;border-collapse:collapse;font-size:13px}
.mtx th,.mtx td{padding:8px 10px;text-align:center;border:1px solid var(--line)}
.mtx th{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--dim);
  text-transform:uppercase;background:rgba(255,255,255,.03)}
.mtx th.rowh,.mtx td.rowh{text-align:start;white-space:nowrap;font-weight:600;color:var(--ink)}
.mtx td.z{color:var(--faint)}
.mtx td.hot{font-weight:700}
.scrollx{overflow-x:auto}

.balrow{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line)}
.balrow:last-child{border:0}
.balbar{display:flex;align-items:center;gap:3px;height:9px}
.balbar i{display:block;height:100%;border-radius:3px}
.balbar .out{background:rgba(255,122,69,.75)}
.balbar .in{background:rgba(69,224,164,.8)}

/* ---------------- modal ---------------- */
.modal-bg{position:fixed;inset:0;background:rgba(3,5,11,.76);backdrop-filter:blur(7px);
  display:grid;place-items:center;z-index:100;padding:20px;animation:fin .18s ease-out}
@keyframes fin{from{opacity:0}to{opacity:1}}
.modal{width:min(560px,100%);max-height:88vh;overflow-y:auto;background:var(--surface);
  border:1px solid var(--line2);border-radius:18px;padding:24px;
  box-shadow:0 40px 90px -30px #000;animation:mup .22s cubic-bezier(.2,.9,.3,1)}
@keyframes mup{from{transform:translateY(16px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal h3{font-size:19px;font-weight:700;margin-bottom:5px;letter-spacing:-.015em}
.modal .msub{color:var(--dim);font-size:13.5px;margin-bottom:20px}
.modal-actions{display:flex;gap:10px;margin-top:22px}
.modal-actions .btn{flex:1}

/* step editor */
.sedit{display:flex;gap:10px;align-items:flex-start;padding:11px;border-radius:11px;
  background:var(--surface2);border:1px solid var(--line);margin-bottom:9px}
.sedit .num{width:25px;height:25px;border-radius:7px;background:rgba(255,255,255,.08);
  display:grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0;margin-top:3px}
.sedit .fields{flex:1;display:grid;gap:8px}
.sedit select,.sedit input{padding:8px 10px;font-size:13px;border-radius:8px;
  background:var(--bg);border:1px solid var(--line);width:100%}
.sedit .x{color:var(--faint);padding:4px;font-size:15px}
.sedit .x:hover{color:var(--bad)}

/* toast */
#toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:200;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{padding:11px 19px;border-radius:11px;font-size:13.5px;font-weight:600;
  background:var(--surface2);border:1px solid var(--line2);
  box-shadow:0 14px 34px -12px #000;animation:tin .25s cubic-bezier(.2,.9,.3,1)}
.toast.good{border-color:rgba(69,224,164,.45);color:#9af2d0}
.toast.bad{border-color:rgba(255,95,120,.45);color:#ffaeba}
@keyframes tin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* game host */
/* Each game declares its own natural shape — a portrait stacking game squeezed
   into 16:9 is unplayable. max-height stops tall games dominating a desktop. */
.gamewrap{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line2);
  background:#05070f;aspect-ratio:16/9;width:100%;max-height:70dvh;margin:0 auto}
.gamewrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* Fullscreen has to beat the inline aspect-ratio the registry sets. */
.gamewrap:fullscreen,.gamewrap:-webkit-full-screen{
  width:100vw;height:100dvh;max-width:none !important;max-height:none;
  aspect-ratio:auto !important;border-radius:0;border:0}
.gamebar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;flex-wrap:wrap}

.sparkline{display:flex;align-items:flex-end;gap:2px;height:34px}
.sparkline i{flex:1;background:rgba(255,196,77,.5);border-radius:2px 2px 0 0;min-height:2px}

/* =====================================================================
   RESPONSIVE
   desktop  > 1024   full layout
   tablet   641–1024 denser header, grids collapse on their own
   phone    ≤ 640    bottom tab bar, sheet modals, stacked rows
   ===================================================================== */

/* ---------- tablet ---------- */
@media (max-width:1024px){
  .wrap{max-width:100%}
  header.top{gap:12px}
  h1.page{font-size:22px}
}

/* ---------- phone ---------- */
@media (max-width:640px){
  header.top{height:52px;gap:8px}


  .wrap{padding-bottom:26px}
  h1.page{font-size:21px}
  .page-sub{font-size:13.5px;margin-bottom:18px}
  h2.sec{margin:22px 0 10px}
  .grid{gap:12px}
  .card{padding:15px}

  /* three columns never fit: label over bar, value beside label */
  .frow{grid-template-columns:1fr auto;gap:4px 10px;font-size:12.5px;
    grid-template-areas:"label value" "bar bar"}
  .frow>:nth-child(1){grid-area:label}
  .frow>:nth-child(2){grid-area:bar}
  .frow>:nth-child(3){grid-area:value}
  .fbar{height:22px}

  /* modals become bottom sheets */
  .modal-bg{place-items:end center;padding:0}
  .modal{width:100%;max-height:92dvh;border-radius:20px 20px 0 0;
    padding:22px 18px calc(22px + env(safe-area-inset-bottom));
    animation:sheet .26s cubic-bezier(.2,.9,.3,1)}
  .modal::before{content:'';display:block;width:38px;height:4px;border-radius:99px;
    background:rgba(255,255,255,.22);margin:-8px auto 14px}
  .modal-actions{flex-direction:column-reverse}
  @keyframes sheet{from{transform:translateY(100%)}to{transform:none}}

  #toasts{bottom:calc(72px + env(safe-area-inset-bottom));left:13px;right:13px;
    transform:none;align-items:stretch}
  .toast{text-align:center}

  .voucher .vtitle{font-size:19px}
  .stats{font-size:12.5px}
  .sedit{flex-wrap:wrap}
  .keys{grid-template-columns:1fr 1fr}

  /* a heading and its control cannot share one line at this width — let the
     control drop beneath instead of crushing the title */
  .between{flex-wrap:wrap}
  .between>select.i{width:100% !important;min-width:0 !important}
}

/* ---------- very narrow ---------- */
@media (max-width:360px){
  .tabbar button{font-size:9.5px}
  .tabbar button .ic{font-size:17px}
  .chip{font-size:11.5px;padding:4px 9px}
  .btn{padding:10px 13px;font-size:13.5px}
  .bigpin{font-size:36px;letter-spacing:.12em}
}

/* ---------- phone landscape: vertical space is the scarce resource ---------- */
@media (max-height:520px) and (orientation:landscape){
  header.top{height:46px}
  .tabbar button{flex-direction:row;gap:7px;min-height:42px;padding:6px}
  .tabbar button::before{display:none}
  .gamewrap{max-height:none}
  .wrap{padding-top:12px}
}

/* ---------- touch: 44px minimum targets ---------- */
@media (pointer:coarse){
  .btn{min-height:44px}
  .btn.sm{min-height:38px;padding:8px 13px}
  .btn.lg{min-height:52px}
  /* 16px is the threshold below which iOS zooms the viewport on focus */
  select.i,input.i,textarea.i{min-height:44px;font-size:16px}
  .icon-btn{width:40px;height:40px}
  .ccard:hover{transform:none}
  .cta:hover,.btn.primary:hover{transform:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* campaign picture on a card; the rail step that was skipped for lack of stock */
.ccard .cimg{height:120px;background-size:cover;background-position:center;border-radius:var(--r) var(--r) 0 0}
.rstep.locked .rnode{opacity:1}
.sedit input[type=range]{padding:0;accent-color:var(--brand)}

/* the win splash: full screen, confetti canvas behind, the voucher in front */
.splash{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
  background:radial-gradient(ellipse at 50% 35%,rgba(255,196,77,.22),rgba(7,10,18,.96) 60%);
  opacity:0;transition:opacity .25s ease-out}
.splash.on{opacity:1}
.splash .sconf{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.splash .sbody{position:relative;text-align:center;width:min(420px,100%);
  animation:mup .5s cubic-bezier(.2,.9,.3,1)}
.splash .stitle{font-size:44px;font-weight:900;letter-spacing:-.03em;color:var(--brand);
  text-shadow:0 0 40px rgba(255,196,77,.45);line-height:1}
.splash .ssub{color:var(--dim);font-size:14px;margin:16px 0 20px}
/* the voucher's QR */
.vqr{display:flex;justify-content:center;margin:4px 0 10px}
.vqr svg{border-radius:10px;background:#fff;padding:6px;box-sizing:content-box}
/* the desk's code field */
.codefield{font-family:var(--mono);font-size:22px;letter-spacing:.12em;text-transform:uppercase;text-align:center}
.scanbox{position:relative;border-radius:12px;overflow:hidden;background:#000;aspect-ratio:4/3;max-height:260px}
.scanbox video{width:100%;height:100%;object-fit:cover}
/* a campaign's landing page (opened from a link or a flyer) */
.lhero{height:180px;border-radius:var(--r);background:var(--surface2) center/cover no-repeat;margin-bottom:16px}

/* My vouchers: one tappable row per voucher */
.vlist .vrow{display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;text-align:start;
  background:none;border:0;border-bottom:1px solid var(--line);color:inherit;font:inherit;cursor:pointer}
.vlist .vrow:last-child{border-bottom:0}
.vlist .vrow:hover{background:rgba(255,255,255,.03)}
.vlist .vrow.dim{opacity:.6}
.vlist .vrow-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px}
.vlist .vrow-main .faint{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Games: a live picture of each game on its card */
.gcard .gshot{position:relative;height:240px;overflow:hidden;cursor:pointer;container-type:size;
  background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--gc) 35%,transparent),#05070f 70%);
  border-bottom:1px solid var(--line)}
/* the game is laid out --zoom times the card's width in its own shape, centred, and cropped to the box:
   at --focus (0 top … 1 bottom), lowered by --lift so a game anchored low shows from --lift above its bottom */
.gcard .gshot iframe,.gcard .gshot video.gvid{position:absolute;
  /* --h: the frame's height — zoom × the card's width in the game's shape, but never shorter than the box (a wide game covers it) */
  --h:max(100cqh, 100cqw * var(--zoom, 1) * var(--arinv));
  height:var(--h);width:calc(var(--h) / var(--arinv));left:calc((100cqw - var(--h) / var(--arinv)) / 2);
  top:calc((100cqh - var(--h)) * var(--focus) + var(--lift, 0px));border:0;pointer-events:none;display:block}
.gcard .gshot video.gvid{object-fit:cover;background:#05070f}
/* the name and a line about the game, over the picture; the play button beside it */
.gshot .gover{position:absolute;inset-inline-start:10px;bottom:10px;inset-inline-end:66px;z-index:1;display:flex;align-items:center;gap:9px;
  padding:7px 10px;border-radius:12px;background:rgba(7,10,18,.74);backdrop-filter:blur(8px);border:1px solid var(--line)}
.gshot .gover-name{font-weight:700;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gshot .gover-tag{font-size:11px;line-height:1.25;color:var(--dim);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gshot .gplay{position:absolute;inset-inline-end:12px;bottom:12px;z-index:2;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;font-size:17px;padding-left:3px;color:#17120a;cursor:pointer;
  background:linear-gradient(145deg,#ffd470,var(--brand));box-shadow:0 8px 22px -6px rgba(0,0,0,.6);transition:transform .15s}
.gshot:hover .gplay{transform:scale(1.08)}
/* "play" points forward: ◀ when reading right to left (scale is separate from the hover transform) */
[dir=rtl] .gshot .gplay{scale:-1 1}
/* the two tabs of a card's content */
.gtabs{display:flex;flex-shrink:0;border-bottom:1px solid var(--line);background:var(--surface)}
.gtab{flex:1;padding:9px 6px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.gtab.on{color:var(--brand);border-bottom-color:var(--brand)}
.gcard .gshot::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(7,10,18,.6))}
@media (max-width:640px){ .gcard .gshot{height:210px} }

/* the difficulty badge, coloured by level */
.lvlbadge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;font-size:12.5px;font-weight:700;
  color:var(--lc);background:color-mix(in srgb,var(--lc) 16%,transparent);border:1px solid color-mix(in srgb,var(--lc) 45%,transparent)}
.lvlbadge.sm{padding:1px 8px;font-size:11px}

/* the difficulty chooser: − [7 segments] + */
.gcard .glevel{padding:12px;border-radius:12px;background:var(--surface2);border:1px solid color-mix(in srgb,var(--lc) 35%,var(--line))}
.glevel-title{font-weight:700;font-size:13px}
.gsteps{display:flex;align-items:center;gap:8px}
.gstep-btn{flex:0 0 36px;height:36px;border-radius:10px;border:1px solid var(--line2);background:var(--surface);
  color:var(--ink);font-size:20px;font-weight:700;line-height:1;cursor:pointer}
.gstep-btn:hover{border-color:var(--lc)}
.gbar{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.gseg{height:22px;border-radius:6px;border:0;cursor:pointer;background:rgba(255,255,255,.09);transition:background .15s,transform .15s}
.gseg.fill{background:var(--sc2)}
.gseg.cur{transform:scaleY(1.25);box-shadow:0 0 0 2px var(--surface2),0 0 0 3.5px var(--sc2)}
.gseg:hover{filter:brightness(1.15)}

/* the carousel: one game in front, its neighbours peeking either side, round and round */
.gcar{position:relative;margin:0 -16px}
.gtrack{display:grid;overflow:hidden;padding:4px 0 10px;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none;--drag:0px}
.gslide{grid-area:1/1;width:min(84%,470px);justify-self:center;opacity:var(--op);
  transform:translateX(calc(var(--d) * (100% + 14px) + var(--drag))) scale(var(--sc));
  transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .38s}
.gslide:not(.on){cursor:pointer}
.gslide:not(.on) .gcard{pointer-events:none}
.gslide.jump,.gtrack.dragging .gslide{transition:none}
.gtrack.nudge .gslide{animation:gnudge 1.8s ease-in-out .8s 2}
@keyframes gnudge{0%,100%{translate:0}35%{translate:-46px}65%{translate:6px}}
/* a layer over the carousel holding the two arrows at the middle of the picture (its height: .gshot) */
.gnavs{position:absolute;inset:0;z-index:3;pointer-events:none}
.gnav-pin{position:absolute;left:0;right:0;top:calc(var(--shot) / 2);transform:translateY(-50%);display:flex;justify-content:space-between;padding:0 8px}
.gnav{pointer-events:auto;width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);
  background:rgba(14,18,30,.85);backdrop-filter:blur(6px);color:var(--ink);font-size:28px;line-height:1;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 8px 20px -8px #000}
.gnav:hover{border-color:var(--brand);color:var(--brand)}
.gdots{position:absolute;left:0;right:0;top:10px;display:flex;justify-content:center;gap:7px;pointer-events:none}
.gdots button{pointer-events:auto;box-shadow:0 0 0 1.5px rgba(7,10,18,.55)}
.gdots button{width:9px;height:9px;padding:0;border:0;border-radius:99px;background:var(--line2);cursor:pointer;transition:width .25s,background .25s}
.gdots button.on{width:24px;background:var(--brand)}
@media (prefers-reduced-motion:reduce){.gtrack.nudge .gslide{animation:none}}

/* ---------------- the fixed page title strip (app.js liftTitle) ---------------- */
#pagehead{flex-shrink:0;background:var(--bg);border-bottom:1px solid var(--line);z-index:20}
#pagehead .ph-row{display:flex;align-items:center;gap:10px;padding-top:7px;padding-bottom:7px;max-width:1180px}
#pagehead .ph-text{flex:1;min-width:0}
#pagehead .page-sub{margin:0;font-size:12.5px;line-height:1.3;color:var(--dim);max-width:none;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#pagehead .ph-tools{display:flex;align-items:center;gap:8px;flex-shrink:0}
#pagehead .ph-tools:empty{display:none}
#pagehead .ph-tools select.i,#pagehead .ph-select{width:auto;max-width:44vw;min-width:0;padding:6px 8px;font-size:12.5px;
  background:var(--surface2);border:1px solid var(--line);border-radius:9px;color-scheme:dark}

/* ---------------- Games: one screen — the carousel fills it, a card scrolls its own text ---------------- */
/* --shot: the picture's height — kept modest so the card's content gets the room */
.wrap.arcade-lobby{--shot:clamp(119px,25.2vh,224px);height:100%;display:flex;flex-direction:column;padding-top:8px;padding-bottom:8px}
.arcade-lobby .gcar{flex:1;min-height:0}
.arcade-lobby .gtrack{height:100%;grid-template-rows:minmax(0,1fr);padding:0}
.arcade-lobby .gslide{height:100%;min-height:0}
.arcade-lobby .gcard{height:100%;min-height:0}
/* the settings take the height they need; the picture takes the rest (never less than --shot) */
.arcade-lobby .gcard .gshot{flex:1 1 auto;height:auto;min-height:var(--shot)}
.arcade-lobby .gcard .body{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;position:relative}
/* Best scores lies over the setup panel, which keeps the body's height: switching tabs never resizes the card */
.gcard.t-bests [data-panel=setup]{visibility:hidden}
.gcard [data-panel=bests]{position:absolute;inset:12px 14px;overflow-y:auto;overscroll-behavior:contain}
.gmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px}
.gmeta .glink{margin:0 0 0 auto;margin-inline-start:auto;margin-inline-end:0}
.arcade-lobby .gcard .body{padding:12px 14px;gap:9px}
.arcade-lobby .gslide{width:min(90%,480px)}
.gcard .gsec{margin:6px 0 0}

/* a game's 15 best runs */
.gscores{list-style:none;display:grid;gap:5px;margin:0;padding:0}
.gscores li{display:grid;grid-template-columns:24px 1fr auto auto;align-items:center;gap:8px;
  padding:6px 10px;border-radius:9px;background:var(--surface2);font-size:13px}
.gscores li.top{background:color-mix(in srgb,var(--brand) 14%,var(--surface2));outline:1px solid color-mix(in srgb,var(--brand) 40%,transparent)}
.gscores .gs-rank{font-weight:800;color:var(--faint);font-variant-numeric:tabular-nums}
.gscores li.top .gs-rank{color:var(--brand)}
.gscores .gs-score{font-variant-numeric:tabular-nums;font-size:14px}
.gscores .gs-when{font-size:11px;white-space:nowrap}

/* ---------------- a game: fullscreen over everything, one ✕ to leave (✕ and mute 36px, their icons 16px) ---------------- */
#gamelayer{position:fixed;inset:0;z-index:150;background:#000;display:block}
#gamelayer iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
#gamelayer .gl-exit,#gamelayer .gl-mute{position:absolute;z-index:2;top:max(10px,env(safe-area-inset-top));
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(7,10,18,.62);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px);cursor:pointer}
#gamelayer .gl-exit{inset-inline-start:max(10px,env(safe-area-inset-left))}
#gamelayer .gl-mute{inset-inline-end:max(10px,env(safe-area-inset-right))}
#gamelayer .gl-exit svg,#gamelayer .gl-mute svg{width:16px;height:16px;display:block}
#gamelayer .gl-exit:hover,#gamelayer .gl-mute:hover{background:rgba(7,10,18,.85)}
body.gaming #app{visibility:hidden}
#toasts{z-index:300}
.splash{z-index:250}

/* a quiet link-button ("In 2 campaigns →") */
.glink{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:0;font-size:13px;font-weight:700;color:var(--brand)}
.glink:hover{text-decoration:underline}

/* ---------------- right-to-left ---------------- */
/* arrows that point "forward" turn round in Hebrew */
[dir=rtl] .fwd,[dir=rtl] .chev{display:inline-block;transform:scaleX(-1)}
[dir=rtl] .gtrack.nudge .gslide{animation-name:gnudge-rtl}
@keyframes gnudge-rtl{0%,100%{translate:0}35%{translate:46px}65%{translate:-6px}}
/* Hebrew has no capitals: no wide tracking, no forced case */
[dir=rtl] h2.sec,[dir=rtl] .pill,[dir=rtl] .gtab,[dir=rtl] .tb-brand small{letter-spacing:0;text-transform:none}
/* codes, numbers and addresses always read left to right */
.vcode,.bigpin,.pinbox,.codefield,.mono,input[type=tel],input[type=number]{direction:ltr;unicode-bidi:isolate}

/* ---------------- console sections (business): a scrollable row of pills ---------------- */
.subtabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 18px;padding-bottom:2px}
.subtabs::-webkit-scrollbar{display:none}
.subtabs button{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:99px;
  font-size:13px;font-weight:600;white-space:nowrap;color:var(--dim);
  background:rgba(255,255,255,.05);border:1px solid var(--line);cursor:pointer}
.subtabs button:hover{color:var(--ink)}
.subtabs button.on{color:var(--brand);background:color-mix(in srgb,var(--brand) 16%,transparent);
  border-color:color-mix(in srgb,var(--brand) 55%,transparent)}
.net-head{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.35}
[dir=rtl] .net-head{letter-spacing:0}

/* ---------------- the operator's Settings page ---------------- */
.set-wrap .card.stack{gap:10px}
.set-ro{font-size:13.5px}
.set-flag{display:flex;align-items:center;gap:14px;cursor:pointer;padding:4px 0}
.set-flag.locked{cursor:default;opacity:.7}
.set-flag-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px}
.set-flag-text .faint{font-size:12px}
.set-flag input{position:absolute;opacity:0;width:1px;height:1px}
.set-switch{flex-shrink:0;width:42px;height:24px;border-radius:99px;background:rgba(255,255,255,.12);position:relative;transition:background .16s}
.set-switch::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:var(--dim);transition:inset-inline-start .16s,background .16s}
.set-flag input:checked + .set-switch{background:color-mix(in srgb,var(--brand) 45%,transparent)}
.set-flag input:checked + .set-switch::after{inset-inline-start:21px;background:var(--brand)}
.set-flag input:focus-visible + .set-switch{outline:2px solid var(--brand);outline-offset:2px}
.set-key{padding:10px 12px;border-radius:10px;background:var(--surface2);border:1px solid var(--line);font-size:13px;word-break:break-all}
/* the console session's countdown (an hour from login) */
.sess-timer{font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap;direction:ltr;unicode-bidi:isolate}
.sess-timer.low{color:var(--warn,#ffb36b);font-weight:700}

/* ---------------- a store's page: one compact row per live campaign (customer) ---------------- */
.store-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.store-head .avatar{width:48px;height:48px;font-size:18px;flex:none}
.store-head .sh-text{min-width:0}
.slist{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:8px}
.srow{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);min-height:64px}
.srow .sr-pic{flex:none;width:48px;height:48px;border-radius:10px;background:var(--surface2) center/cover no-repeat}
.srow .sr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.srow .sr-name{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow .sr-sub{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);min-width:0;flex-wrap:wrap}
.srow .sr-g svg{width:16px;height:16px;vertical-align:-3px}
.srow .sr-reward{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.srow .btn.sm{flex:none;white-space:nowrap}

/* ---------------- the console's campaigns page: the store strip, filters, one row per campaign ---------------- */
.store-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 14px;border-radius:12px;
  background:color-mix(in srgb,var(--brand) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line))}
.store-strip .ss-text{display:flex;align-items:center;gap:10px;min-width:0}
.store-strip .ss-text>svg{width:26px;height:26px;color:var(--brand);flex:none}
.store-strip .ss-text div{display:flex;flex-direction:column;gap:1px;font-size:13px;min-width:0}
.store-strip .ss-text .faint{font-size:12px}
.store-strip .btn svg{width:15px;height:15px;vertical-align:-3px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips .chip{cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--dim);font:inherit;font-size:12px;padding:5px 10px;border-radius:999px}
.chips .chip b{margin-inline-start:4px;color:inherit}
.chips .chip.on{background:color-mix(in srgb,var(--brand) 18%,transparent);border-color:var(--brand);color:var(--ink)}
.clist{display:flex;flex-direction:column;gap:6px}
.crow{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer}
.crow:hover{background:rgba(255,255,255,.03)}
.crow .cr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.crow .cr-top{display:flex;align-items:center;gap:8px;min-width:0}
.crow .cr-name{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .cr-top .faint{font-size:12px;white-space:nowrap}
.crow .cr-sub{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);flex-wrap:wrap}
.crow .cr-games svg{width:16px;height:16px;vertical-align:-3px;margin-inline-end:2px}
.crow .cr-reward{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.crow .cr-stock{font-weight:700;color:var(--ok,#4ade80)} .crow .cr-stock.warn{color:#fbbf24} .crow .cr-stock.bad{color:#f87171}
.crow .cr-block{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}
.crow .cr-nums{display:flex;gap:12px;font-size:12px;color:var(--dim);white-space:nowrap}
.crow .cr-nums b{color:var(--ink)}
.crow .cr-acts{display:flex;gap:4px;flex:none;min-width:0}
.ibtn{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--surface2);color:var(--ink);display:grid;place-items:center;cursor:pointer;font-size:15px}
.ibtn:hover{border-color:var(--brand);color:var(--brand)}
@media (max-width:640px){
  .crow{flex-wrap:wrap;gap:6px 10px}
  .crow .cr-main{flex-basis:100%}
  .crow .cr-nums{flex:1}
  .store-strip .btn span{display:none}
  .store-strip .btn{padding-inline:10px}
}