/* Layout: one phone-sized app on an ink stage, with a short guide beside it on wide screens. Single brand look, light UI inside a dark stage. */
:root{
  --court:#2340E0; --sticker:#FFD400; --ink:#101633; --paper:#EDF0F6; --card:#FFFFFF;
  --mosque:#0B5D46; --lamp:#F2C14E; --stamp:#D63A2B; --muted:#4A5170; --line:#C8CEDD; --soft:#DCE1EC;
  --display:'Bungee','Arial Black',Impact,sans-serif;
  --body:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme: light;
}
html,body{height:100%}
body{background:var(--ink);color:var(--ink);font-family:var(--body);font-size:15px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button,input,select{font-family:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--sticker);outline-offset:2px}
.stage{min-height:100%;display:flex;align-items:center;justify-content:center;gap:56px;padding-block:24px;box-sizing:border-box}
.guide{max-width:300px;color:#DDE2FF;display:flex;flex-direction:column;gap:18px}
.guide h1{margin:0;font-family:var(--display);font-weight:400;font-size:44px;line-height:1;color:#fff}
.guide p{margin:0;line-height:1.6;color:#C3CAEF}
.guide ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;line-height:1.5}
.guide .reset{align-self:flex-start;height:40px;padding:0 16px;border-radius:999px;border:2px solid #fff;background:transparent;color:#fff;font-weight:700}
.guide small{color:#8F98C9;line-height:1.5}
.device{position:relative;width:390px;max-width:100%;height:min(844px,calc(100vh - 48px));min-height:560px;border-radius:46px;border:10px solid #05081A;background:var(--paper);overflow:hidden;flex-shrink:0}
@media (max-width:880px){.guide{display:none}}
@media (max-width:520px){body{padding-left:0;padding-right:0}.stage{padding-block:0;height:100%}.device{width:100%;height:100%;min-height:0;border:0;border-radius:0}}

#app{position:absolute;inset:0}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--paper)}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:112px}
.scroll.nonav{padding-bottom:120px}

@keyframes enter{0%{transform:translate(22px,4px) rotate(.8deg);opacity:.25}33%{transform:translate(10px,-2px) rotate(-.4deg);opacity:.6}66%{transform:translate(3px,1px) rotate(.2deg);opacity:.9}100%{transform:none;opacity:1}}
.enter{animation:enter .3s step-end both}
@keyframes boil{0%{transform:translate(0,0) rotate(var(--r,0deg))}33%{transform:translate(1px,-1px) rotate(calc(var(--r,0deg) + 3deg))}66%{transform:translate(-1px,1px) rotate(calc(var(--r,0deg) - 2deg))}100%{transform:translate(0,0) rotate(var(--r,0deg))}}
.boil{animation:boil .72s step-end infinite}
@keyframes flick{0%,45%{transform:translateX(0)}46%,100%{transform:translateX(16px)}}
@keyframes offcover{0%,45%{opacity:1}46%,100%{opacity:0}}
.knob{animation:flick 1.6s step-end both}
.offcover{animation:offcover 1.6s step-end both}
@keyframes stamp{0%{opacity:0;transform:scale(2.4) rotate(-24deg)}30%{opacity:1;transform:scale(1.45) rotate(-17deg)}55%{opacity:1;transform:scale(.86) rotate(-11deg)}80%,100%{opacity:1;transform:scale(1) rotate(-12deg)}}
.stamp-anim{animation:stamp .5s step-end both}
@keyframes shake{0%{transform:translate(0,0)}30%{transform:translate(0,4px)}55%{transform:translate(0,-2px)}80%,100%{transform:translate(0,0)}}
.shake{animation:shake .5s step-end both}
@keyframes swing{0%{transform:rotate(-8deg)}33%{transform:rotate(-2deg)}66%{transform:rotate(5deg)}100%{transform:rotate(-8deg)}}
.swing{transform-origin:50% 0;animation:swing 1.2s step-end infinite}
@keyframes pop{0%{transform:scale(.6) rotate(-8deg)}50%{transform:scale(1.12) rotate(4deg)}100%{transform:scale(1) rotate(var(--r,0deg))}}
.pop{animation:pop .3s step-end both}
@media (prefers-reduced-motion:reduce){.enter,.boil,.knob,.offcover,.stamp-anim,.shake,.swing,.pop{animation:none}.offcover{opacity:0}.knob{transform:translateX(16px)}}

.logo{display:inline-flex;align-items:center;gap:3px}
.logo .sw{position:relative;width:42px;height:26px;border-radius:999px;background:var(--sticker);overflow:hidden;display:inline-block}
.logo .sw .offcover{position:absolute;inset:0;background:#5B6AA8}
.logo .sw .knob{position:absolute;left:4px;top:4px;width:18px;height:18px;border-radius:999px;background:var(--ink)}
.logo b{font-family:var(--display);font-weight:400;font-size:25px;line-height:1}

.ghost{height:40px;padding:0 14px;border-radius:999px;border:2px solid currentColor;background:transparent;font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.iconbtn{width:44px;height:44px;border-radius:999px;border:2px solid currentColor;background:transparent;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.cta{height:56px;border-radius:999px;border:2.5px solid var(--ink);background:var(--sticker);color:var(--ink);font-family:var(--display);font-size:18px;padding:0 22px}
.cta[disabled]{opacity:.45;cursor:not-allowed}
.pillbtn{height:46px;padding:0 18px;border-radius:999px;border:none;background:var(--sticker);color:var(--ink);font-weight:800;font-size:15px;white-space:nowrap}
.h2{margin:0;font-family:var(--display);font-weight:400;font-size:18px}

/* hero */
.hero{position:relative;background:var(--court);color:#fff;overflow:hidden;flex-shrink:0}
.hero-top{position:absolute;left:20px;right:20px;top:18px;display:flex;align-items:center;justify-content:space-between}

/* tickets */
.tix{position:relative;display:flex;width:100%;text-align:left;background:var(--card);border:none;border-radius:18px;padding:0;min-height:112px;color:var(--ink)}
.tix::before,.tix::after{content:"";position:absolute;left:79px;width:18px;height:18px;border-radius:999px;background:var(--paper)}
.tix::before{top:-9px}.tix::after{bottom:-9px}
.tix .stub{width:88px;flex-shrink:0;border-radius:18px 0 0 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-right:2px dashed rgba(16,22,51,.25)}
.tix .stub .d{font-size:12px;font-weight:700}
.tix .stub .n{font-family:var(--display);font-size:34px;line-height:1}
.tix .info{flex:1;min-width:0;padding:12px 14px 12px 16px;display:flex;flex-direction:column;gap:4px}
.tix .catl{font-size:12px;font-weight:700;color:var(--muted)}
.tix .t{font-size:16px;font-weight:800;line-height:1.22}
.tix .meta{font-size:12.5px;color:var(--muted)}
.tix .foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px}
.chip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:800;background:var(--soft);color:var(--ink)}
.chip.ok{background:#D2F0E2;color:#0B5D46}
.chip.wait{background:#FFF1C2;color:#7A4A06}
.chip.host{background:var(--ink);color:var(--sticker)}
.chip.full{background:#FBE1DD;color:#9B2617}
.chip.done{background:#101633;color:#FFD400}
.chip.nb{background:#FFE7F0;color:#A3134F}
.face{position:relative;width:46px;height:46px;border-radius:999px;overflow:hidden;border:2.5px solid #101633;box-sizing:border-box;flex-shrink:0}
.face svg{display:block}
.face.blur svg{filter:blur(4px)}
.face .lk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(16,22,51,.35)}
.mom{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:8px;box-sizing:border-box;color:#fff}
.mom .tg{position:absolute;left:6px;top:6px;display:flex;align-items:center;gap:3px;font-size:9.5px;font-weight:800;background:rgba(16,22,51,.7);padding:3px 6px;border-radius:999px}
@keyframes flash{0%{opacity:1}60%{opacity:.6}100%{opacity:0}}
.flash{animation:flash .45s step-end both}
.chip.wl{background:#E3E7FF;color:#2340E0}
.chip.cancel{background:#E6E8EE;color:#5B627C}
.tix.dim{opacity:.62}
.lvbar{display:flex;align-items:flex-end;gap:3px}
.lvbar i{display:block;width:7px;border-radius:2px;border:1.5px solid #101633;box-sizing:border-box}

/* stickers */
.stickers{display:flex;gap:14px;overflow-x:auto;padding:20px 16px 6px;scrollbar-width:none}
.stickers::-webkit-scrollbar{display:none}
.stk{display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:none;padding:0;font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;flex-shrink:0}
.stk .c{width:58px;height:58px;border-radius:999px;border:2.5px solid var(--ink);box-shadow:0 0 0 4px #fff;display:flex;align-items:center;justify-content:center;transform:rotate(var(--r,0deg))}
.stk[aria-pressed="true"] .c{box-shadow:0 0 0 4px var(--sticker),0 0 0 6.5px var(--ink)}
.stk[aria-pressed="true"]{font-weight:800}

/* nav */
.nav{position:absolute;left:16px;right:16px;bottom:16px;height:66px;box-sizing:border-box;padding:0 10px;border-radius:999px;background:var(--ink);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;z-index:5}
.nav button{justify-self:center;width:46px;height:46px;border-radius:999px;border:none;background:transparent;color:#AEB6DA;display:flex;align-items:center;justify-content:center;position:relative}
.nav button[aria-current="page"]{background:#2A3260;color:var(--sticker)}
.nav .plus{width:56px;height:56px;background:var(--sticker);color:var(--ink)}
.nav .dot{position:absolute;top:8px;right:8px;width:9px;height:9px;border-radius:999px;background:var(--sticker);border:2px solid var(--ink)}

/* bottom bar */
.bar{position:absolute;left:16px;right:16px;bottom:16px;box-sizing:border-box;padding:10px 10px 10px 20px;border-radius:999px;background:var(--ink);color:#fff;display:flex;align-items:center;gap:12px;z-index:5}
.bar .tx{display:flex;flex-direction:column;flex:1;min-width:0}
.bar .tx b{font-size:14px}
.bar .tx span{font-size:12px;color:#AEB6DA}

/* forms */
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:13px;font-weight:800}
.input{height:48px;box-sizing:border-box;padding:0 14px;border-radius:14px;border:2px solid var(--line);background:#fff;font-size:15px;width:100%;color:var(--ink)}
.input:focus{border-color:var(--court);outline:none}
.err{font-size:12.5px;font-weight:700;color:#B3261E}
.seg{display:grid;gap:4px;padding:4px;border-radius:999px;background:var(--soft)}
.seg button{height:38px;border-radius:999px;border:none;background:transparent;font-size:13px;font-weight:600;color:#2B3150}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff;font-weight:800}
.chiprow{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
.chiprow::-webkit-scrollbar{display:none}
.cbtn{height:38px;padding:0 14px;border-radius:999px;border:2px solid var(--line);background:#fff;font-size:13px;font-weight:600;white-space:nowrap;flex-shrink:0}
.cbtn[aria-pressed="true"]{border:2.5px solid var(--ink);background:var(--sticker);font-weight:800}

/* near me map */
.map{position:relative;height:290px;margin:0 16px;border-radius:20px;overflow:hidden;border:2.5px solid var(--ink);background-color:#E4EDDC;background-image:linear-gradient(#D2DEC6 1.5px,transparent 1.5px),linear-gradient(90deg,#D2DEC6 1.5px,transparent 1.5px);background-size:30px 30px;background-position:center}
.map .pin{position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:999px;border:2.5px solid var(--ink);box-shadow:0 0 0 3px #fff;display:flex;align-items:center;justify-content:center;padding:0;z-index:2}
.map .me{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:999px;background:var(--court);border:3px solid #fff;box-shadow:0 0 0 2px var(--court);z-index:3;animation:ping 1.2s step-end infinite}
@keyframes ping{0%{box-shadow:0 0 0 2px var(--court)}50%{box-shadow:0 0 0 9px rgba(35,64,224,.22)}}
.map .ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:999px;border:2px dashed var(--court);background:rgba(35,64,224,.06)}
.map .ringlbl{position:absolute;left:50%;transform:translateX(-50%);font-size:11.5px;font-weight:800;color:var(--court);background:#fff;padding:2px 8px;border-radius:999px;z-index:1}
.map .lake{position:absolute;transform:translate(-50%,-50%);border-radius:50% 45% 55% 50%;background:#A9CDEB;border:2px solid #86B5DC}
@media (prefers-reduced-motion:reduce){.map .me{animation:none}}
.leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}
.leaflet-container{overflow:hidden;font-family:var(--body);font-size:12px;-webkit-tap-highlight-color:transparent;background:#E4EDDC;outline-offset:1px}
.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.leaflet-container img.leaflet-tile{mix-blend-mode:plus-lighter}
.leaflet-container .leaflet-marker-pane img,.leaflet-container .leaflet-tile-pane img,.leaflet-container img.leaflet-tile{max-width:none!important;max-height:none!important;width:auto;padding:0}
.leaflet-container.leaflet-touch-zoom{touch-action:pan-x pan-y}
.leaflet-container.leaflet-touch-drag{touch-action:none}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{touch-action:none}
.leaflet-tile{filter:inherit;visibility:hidden}
.leaflet-tile-loaded{visibility:inherit}
.leaflet-zoom-box{width:0;height:0;box-sizing:border-box;z-index:800}
.leaflet-pane{z-index:400}.leaflet-tile-pane{z-index:200}.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}
.leaflet-map-pane canvas{z-index:100}.leaflet-map-pane svg{z-index:200}
.leaflet-control{position:relative;z-index:800;pointer-events:auto;float:left;clear:both}
.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}
.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}
.leaflet-right .leaflet-control{float:right}
.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:0}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:0}
.leaflet-zoom-animated{transform-origin:0 0}
.leaflet-zoom-anim .leaflet-zoom-animated{transition:transform .25s cubic-bezier(0,0,.25,1)}
.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile{transition:none}
.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}
.leaflet-interactive{cursor:pointer}
.leaflet-grab{cursor:grab}.leaflet-dragging .leaflet-grab{cursor:move}
.leaflet-bar{border:2.5px solid var(--ink);border-radius:12px;overflow:hidden}
.leaflet-bar a{display:block;width:32px;height:32px;line-height:32px;text-align:center;text-decoration:none;background:#fff;color:var(--ink);font:800 18px var(--body)}
.leaflet-bar a+a{border-top:2px solid var(--ink)}
.leaflet-bar a.leaflet-disabled{color:#B9C0D4;cursor:default}
.leaflet-control-attribution{background:rgba(255,255,255,.85);padding:1px 6px;color:#2B3150;font-size:10px;line-height:1.4;border-top-left-radius:8px}
.leaflet-control-attribution a{color:#2340E0}
.lpin{background:none;border:none}
.lpin span{width:36px;height:36px;box-sizing:border-box;border-radius:999px;border:2.5px solid var(--ink);box-shadow:0 0 0 3px #fff;display:flex;align-items:center;justify-content:center}
.lme span{display:block;width:18px;height:18px;box-sizing:border-box;border-radius:999px;background:var(--court);border:3px solid #fff;box-shadow:0 0 0 2px var(--court);animation:ping 1.2s step-end infinite}
.map .lmap{position:absolute;inset:0;z-index:5;visibility:hidden}
.map.live .lmap{visibility:visible}
.map.live>.fb{display:none}
.maptag{position:absolute;left:10px;bottom:8px;z-index:6;font-size:11px;font-weight:800;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:2px 8px}
.map.live .maptag{display:none}
@media (prefers-reduced-motion:reduce){.lme span{animation:none}}


.input.area{height:auto;min-height:104px;padding:12px 14px;line-height:1.5;resize:none}

/* toast */
#toast{position:absolute;left:24px;right:24px;bottom:96px;z-index:20;background:var(--ink);color:#fff;border:2px solid var(--sticker);border-radius:16px;padding:12px 16px;font-size:14px;font-weight:700;line-height:1.4;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .15s steps(2),transform .15s steps(2)}
#toast.show{opacity:1;transform:none}

/* chat */
.msgs{display:flex;flex-direction:column;gap:10px;padding:16px}
.msg{max-width:78%;padding:10px 14px;border-radius:18px;background:#fff;font-size:14px;line-height:1.45}
.msg .who{display:block;font-size:12px;font-weight:800;color:var(--court);margin-bottom:2px}
.msg.me{align-self:flex-end;background:var(--sticker);border-bottom-right-radius:6px}
.msg.them{align-self:flex-start;border-bottom-left-radius:6px}
.sys{align-self:center;max-width:90%;text-align:center;font-size:12px;color:var(--muted);background:var(--soft);padding:6px 12px;border-radius:999px}
.composer{position:absolute;left:12px;right:12px;bottom:14px;display:flex;gap:8px;background:#fff;border-radius:999px;padding:6px;border:2px solid var(--ink)}
.composer input{flex:1;min-width:0;border:none;outline:none;padding:0 12px;font-size:15px;background:transparent}
.composer button{width:44px;height:44px;border-radius:999px;border:none;background:var(--ink);color:var(--sticker);display:flex;align-items:center;justify-content:center}
.av{width:46px;height:46px;border-radius:999px;background:#fff;border:2.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0}