/* JAVA customer app — same dark/orange palette as JAVA HQ and the mockup */
:root{--bg:#0a0a0a;--card:#151515;--line:#2a2a2a;--text:#f2f0ec;--muted:#9a958d;--orange:#ee7430;--yellow:#f5b942;--red:#ed3a23;
      --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
     font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;
     position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;overflow:hidden}
a{color:var(--yellow)}
button{font-family:inherit}
.top{flex:0 0 auto;z-index:5;background:var(--bg);box-shadow:none;
     padding:calc(var(--sat) + 12px) 18px 10px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.brand img{height:30px;width:auto;display:block}
.top .sp{flex:1}
.pill{font-size:12px;border:1px solid var(--line);border-radius:99px;padding:6px 11px;color:var(--muted);text-decoration:none;white-space:nowrap}
main{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;width:100%}
main>.screen{max-width:640px;margin:0 auto;padding:14px 16px 28px}
.screen{display:none}.screen.on{display:block}
h2{font-family:'Big Shoulders Display',Inter,sans-serif;font-weight:800;font-size:24px;margin:18px 0 10px;letter-spacing:.5px;text-transform:uppercase}
h2:first-child{margin-top:4px}
.muted{color:var(--muted);font-size:14px}
.note{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5}
.note.build{opacity:.6;font-size:11px;margin-top:4px}
.hero{border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--line);display:block;color:inherit;text-decoration:none}
.hero>img{width:100%;aspect-ratio:4/5;object-fit:contain;display:block;background:#0d0d0d}
.poster{position:relative;overflow:hidden;background:#0d0d0d;aspect-ratio:4/5;width:100%}
.poster .poster-bg{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);object-fit:cover;filter:blur(28px) brightness(.45) saturate(1.2);pointer-events:none}
.poster .poster-fg{position:relative;display:block;width:100%;height:100%;object-fit:contain;background:transparent}
.flyer-wrap{border-radius:16px;margin-top:10px}
.hero .b{padding:12px 14px}
.car{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;margin:0 -16px;padding:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.car::-webkit-scrollbar{display:none}
.car .hero{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always}
.dots{display:flex;justify-content:center;gap:6px;margin:10px 0 2px}
.dots i{width:6px;height:6px;border-radius:50%;background:#3a3a3a;transition:background .2s,width .2s}
.dots i.on{background:var(--orange);width:16px;border-radius:3px}
.tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:1px;padding:4px 9px;border-radius:99px;background:var(--orange);color:#111;margin:0 6px 4px 0;text-transform:uppercase}
.tag.g{background:#2a2a2a;color:var(--text)}
.t{font-weight:800;font-size:18px;margin:6px 0 2px;line-height:1.25}
.row{display:flex;gap:12px;padding:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;align-items:center;color:inherit;text-decoration:none}
.row img,.row .ph{width:64px;height:80px;object-fit:cover;border-radius:10px;flex:none;background:linear-gradient(135deg,#3a1d10,#151515)}
.row img{object-fit:contain;background:#0d0d0d}
.row .ph{display:flex;align-items:center;justify-content:center;font-family:'Big Shoulders Display',Inter,sans-serif;font-weight:900;color:var(--orange);font-size:18px}
.row .m{flex:1;min-width:0}
.row .t{font-size:15px}
.d{font-size:11px;color:var(--orange);font-weight:800;letter-spacing:.5px;text-transform:uppercase}
.price{margin-left:auto;font-weight:800;font-size:13px;white-space:nowrap;padding-left:6px}
.btn{display:block;width:100%;text-align:center;background:var(--orange);color:#111;font-weight:800;border:0;border-radius:12px;padding:14px;font-size:15px;margin-top:10px;cursor:pointer;text-decoration:none;line-height:1.2}
.btn.o{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.sm{width:auto;display:inline-block;padding:9px 14px;margin:0;font-size:14px;border-radius:10px}
.btn[disabled]{opacity:.5;cursor:default}
.btn.danger{background:transparent;border:1px solid #4a2222;color:#ff9d9d}
.chips{display:flex;gap:8px;overflow-x:auto;margin:10px -16px 6px;padding:0 16px 4px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{flex:none;font-size:13px;border:1px solid var(--line);border-radius:99px;padding:7px 13px;background:transparent;color:var(--text);cursor:pointer}
.chip.on{background:var(--text);color:#111;font-weight:700;border-color:var(--text)}
.tier{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin-top:8px;background:var(--card)}
.tier b{font-size:15px;display:block}
.tier .buy{background:var(--orange);color:#111;border:0;border-radius:10px;padding:10px 18px;font-weight:800;text-decoration:none;font-size:14px;white-space:nowrap}
.blurb{white-space:pre-line;font-size:14px;line-height:1.55;color:#d8d4cc;overflow-wrap:anywhere}
.flyer{width:100%;border-radius:16px;margin-top:10px;display:block;background:#111}
.back{display:inline-block;color:var(--muted);text-decoration:none;font-size:15px;padding:4px 0}
.ticket{background:var(--text);color:#111;border-radius:18px;padding:16px;text-align:center;margin-bottom:12px}
.ticket .d{color:#c75a1b}.ticket .t{color:#111;font-size:20px}
.ticket img{width:200px;height:200px;display:block;margin:8px auto 0;image-rendering:pixelated;border-radius:6px}
.ticket .code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;letter-spacing:2px;font-weight:800;margin-top:6px}
.ticket .sub{font-size:13px;color:#333}
.ticket .wallet{display:inline-flex;align-items:center;gap:8px;background:#000;color:#fff;border-radius:9px;padding:9px 16px 9px 13px;font-weight:700;font-size:14px;margin:12px auto 4px;text-decoration:none;line-height:1}
.ticket .wallet:active{opacity:.75}
.ticket.in{background:#dff5e6}.ticket.in .chk{color:#1f7a3a;font-weight:800;font-size:13px;margin-top:4px}
.pastrow{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.pastrow .d{min-width:88px}
.input{width:100%;padding:14px;border-radius:12px;border:1px solid var(--line);background:#111;color:var(--text);font-size:17px;margin-top:8px;font-family:inherit}
.input.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:28px;letter-spacing:8px;text-align:center}
.err{background:#3a1a1a;border:1px solid #6b2a2a;border-radius:12px;padding:12px 14px;color:#ff9d9d;font-size:14px;margin-top:12px;line-height:1.45}
.ok{background:#14301f;border:1px solid #2a6b44;border-radius:12px;padding:12px 14px;color:#b9f0cd;font-size:14px;margin-top:12px;line-height:1.45}
.club{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--card);margin-bottom:10px}
.club .n{font-weight:800;font-size:17px;display:flex;align-items:center;gap:8px}
.club .n .price{font-size:14px}
.club ul{margin:8px 0 0;padding-left:18px;font-size:13px;color:#d8d4cc;line-height:1.55}
.club .tl{font-size:13px;color:var(--muted);margin-top:2px}
.tog{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 4px;border-bottom:1px solid var(--line);font-size:16px;cursor:pointer}
.tog .lbl{flex:1}.tog small{display:block;color:var(--muted);font-size:12px;font-weight:400}
.sw{width:50px;height:30px;border-radius:99px;background:#333;position:relative;flex:none;border:0;padding:0;cursor:pointer;transition:background .15s}
.sw:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:left .15s}
.sw[aria-checked="true"]{background:var(--orange)}.sw[aria-checked="true"]:after{left:23px}
.tabs{flex:0 0 auto;display:flex;background:#0f0f0f;box-shadow:none;
      border-top:1px solid var(--line);padding:8px 4px calc(var(--sab) + 8px);z-index:5}
.tabs a{flex:1;text-align:center;font-size:11px;color:var(--muted);text-decoration:none;padding:2px 0}
.tabs a .i{font-size:22px;display:block;line-height:1.2;filter:grayscale(1) opacity(.7)}
.tabs a.on{color:var(--orange);font-weight:700}.tabs a.on .i{filter:none}
.install{display:flex;gap:10px;align-items:center;background:linear-gradient(90deg,#ee7430,#f5b942);color:#111;border-radius:14px;padding:11px 12px;font-size:13px;font-weight:700;margin-bottom:12px}
.install span{flex:1}
.install button{background:#111;color:#f5b942;border:0;border-radius:9px;padding:8px 11px;font-weight:800;font-size:13px;cursor:pointer;white-space:nowrap}
.install .x{background:transparent;color:#111;padding:6px 8px;font-size:16px}
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet .in{background:#161616;border:1px solid var(--line);border-radius:20px 20px 0 0;padding:20px 18px calc(var(--sab) + 20px);width:100%;max-width:640px}
.sheet h3{margin:0 0 10px;font-size:18px}
.sheet ol{padding-left:20px;margin:0 0 10px;font-size:15px;line-height:1.7;color:#d8d4cc}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:12px}
.inline{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid #555;border-top-color:var(--orange);border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{padding:30px 10px;text-align:center;color:var(--muted)}
.me{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:0 0 10px}
.me b{color:var(--text)}
.me a{margin-left:auto;color:var(--muted);text-decoration:underline}
@media (min-width:700px){.tabs{width:100%;max-width:640px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}}

/* pull-to-refresh indicator (installed app only) */
.ptr-ind{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 6px);z-index:70;width:36px;height:36px;border-radius:50%;
  background:var(--card,#161616);border:1px solid var(--line,#2a2a2a);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;
  transform:translate(-50%,-50px)}
.ptr-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--line,#2a2a2a);border-top-color:var(--muted,#a8a8a8)}
.ptr-armed .ptr-spin{border-top-color:var(--orange,#ee7430)}
.ptr-loading .ptr-spin{border-top-color:var(--orange,#ee7430);animation:ptrspin .7s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}

/* account */
.avatar{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:var(--text);text-decoration:none;flex:0 0 auto}
.avatar.in{background:linear-gradient(135deg,#f5b942,#ee7430,#ed3a23);color:#111;border:0}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.avatar.big{width:72px;height:72px;font-size:28px;position:relative;cursor:pointer}
.avatar.big .cam{position:absolute;right:-2px;bottom:-2px;width:26px;height:26px;border-radius:50%;background:#222;border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;font-size:13px}
.acct-who{align-items:center}
.acct-who .nm{font-weight:800;font-size:18px;line-height:1.2}
.field{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:10px}
.field .lb{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.field .vl{display:flex;align-items:center;gap:10px;font-size:16px;margin-top:3px;overflow-wrap:anywhere}
.field .vl span{flex:1}
.field .vl .edit{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:9px;padding:6px 11px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.field form{margin-top:8px}
.field .input{margin-top:6px;font-size:16px;padding:12px}
.field .row2{display:flex;gap:8px}
.field .row2 .btn{margin-top:8px}
.field .hint{font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.45}
.acct-who{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;overflow-wrap:anywhere}
.acct-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:10px;color:inherit;text-decoration:none;font-size:15px}
.acct-row .muted{font-size:13px;text-align:right}

/* Free ticket texted to phone (SMS opt-in) */
.free-claim{background:linear-gradient(145deg,#1f140d,#141414);border:1.5px solid var(--orange);border-radius:18px;padding:16px;margin:14px 0;box-shadow:0 10px 28px rgba(0,0,0,.45)}
.free-claim .fc-kicker{display:inline-block;font-size:10px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;padding:4px 9px;border-radius:99px;background:linear-gradient(90deg,var(--orange),var(--yellow));color:#111;margin-bottom:6px}
.free-claim h3{font-family:'Big Shoulders Display',Inter,sans-serif;font-weight:900;font-size:25px;line-height:1.08;margin:2px 0 6px;letter-spacing:.5px;text-transform:uppercase;color:var(--text)}
.free-claim .fc-sub{font-size:13.5px;color:#d8d4cc;margin:0 0 8px;line-height:1.45}
.free-claim .input{font-size:16px;padding:12px 13px;margin-top:8px;background:#0e0e0e}
.free-claim .optin-box{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:11px 12px;border-radius:12px;background:#101010;border:1px solid #382a1e;cursor:pointer;font-size:12.5px;line-height:1.45;color:#e4e0d8}
.free-claim .optin-box.needs-check{border-color:#ff6b6b;background:#261313}
.free-claim .optin-box input[type="checkbox"]{width:20px;height:20px;margin:2px 0 0;flex:0 0 20px;accent-color:var(--orange);cursor:pointer}
.free-claim .optin-box a{color:var(--yellow);text-decoration:underline}
.free-claim .btn-claim{background:linear-gradient(90deg,var(--orange),var(--yellow));color:#111;font-weight:900;font-size:16px;letter-spacing:.3px;margin-top:12px}
.free-claim .ticket{margin:12px 0 6px}
.free-claim .fc-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;font-size:13px;margin-top:8px}