/* Jarwo Sim page: DOM over the canvas, portrait first, a centred 540 px column on desktop.
   Compact phone layout v1.1 (PLAN.md 7b, target iPhone 13 in a browser = about 390x660 CSS px):
   one-line top bar (menu, hit count, socials), one tug-of-war team bar, a short subscriber line; the scene gets the
   rest: tools as a 40 px column on the right edge, Bar Amarah as a thin bar along the bottom of the scene, donation
   toasts over the top of the scene; bottom block = team switch + SAWER + one note line. Panels live in the menu sheet.
   ui.band() measures the free band and sets --bandTop / --bandBot (px from the stage top / bottom) for the overlays.
   Jarwo's face stays clear of all of it. */
:root {
  --ink: #2b1b17; --bully: #e2473b; --jarwo: #f2b632; --paper: #fff8e8; --yt: #e3262f;
  --biasa: #8f9aa6; --langka: #2f86f0; --epik: #a24de8; --legendaris: #f5b400;
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; background: #1d1a18; overflow: hidden; overscroll-behavior: none; }
body { font-family: 'Baloo 2', system-ui, sans-serif; color: var(--paper); display: flex; justify-content: center; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
#stage { position: relative; width: 100%; max-width: 540px; height: 100%; height: 100dvh; overflow: hidden; background: #b9def0; }
canvas#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#fxlayer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#ui { position: absolute; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
.out { text-shadow: 0 2px 0 var(--ink), 0 -1px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 3px 6px rgba(0,0,0,.35); }

/* ---------- top: one bar + tug-of-war + subscriber line ---------- */
#top { position: absolute; top: 0; left: 0; right: 0; padding: max(4px, env(safe-area-inset-top)) calc(10px + var(--sr)) 8px calc(10px + var(--sl));
  background: linear-gradient(to bottom, rgba(30,24,22,.72), rgba(30,24,22,.5) 75%, rgba(30,24,22,0)); }
.topbar { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 6px; height: 42px; }
#menuBtn { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,248,232,.95); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
  display: flex; align-items: center; justify-content: center; }
#menuBtn svg { width: 22px; height: 22px; }
.count { text-align: center; line-height: 1; white-space: nowrap; overflow: hidden; }
.count .num { font-family: 'Titan One', 'Baloo 2', sans-serif; font-size: 30px; color: #fff3c4; letter-spacing: .5px; }
.count .lbl { font-weight: 800; font-size: 14px; margin-left: 5px; }
.social { display: flex; gap: 2px; }
.social a { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.social a svg { width: 26px; height: 26px; padding: 3px; border-radius: 50%; background: rgba(255,248,232,.95); border: 1.5px solid var(--ink); }
.tug { margin-top: 2px; }
.tug .row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; font-weight: 800; line-height: 1.15; white-space: nowrap; gap: 6px; }
.tug .row .b b { color: #ffb0a8; } .tug .row .j b { color: #ffe08a; }
.tug .row .mid { font-size: 11px; font-weight: 700; opacity: .9; overflow: hidden; text-overflow: ellipsis; }
.tbar { position: relative; height: 10px; border-radius: 5px; background: rgba(255,255,255,.22); border: 1.5px solid var(--ink); overflow: hidden; margin-top: 1px; }
.tbar i { position: absolute; top: 0; bottom: 0; width: 50%; transform: scaleX(0); transition: transform .6s ease; }
#barBully { left: 0; background: var(--bully); transform-origin: left; } #barJarwo { right: 0; background: var(--jarwo); transform-origin: right; }
.tbar em { position: absolute; left: 50%; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px var(--ink); }
.subs { position: relative; display: block; height: 24px; margin-top: 5px; border-radius: 12px; border: 1.5px solid var(--ink); background: rgba(80,10,10,.6);
  color: #fff; text-decoration: none; font-size: 12.5px; font-weight: 800; line-height: 22px; text-align: center; text-shadow: 0 1px 0 var(--ink); }
.subs::after { content: ''; position: absolute; left: 0; right: 0; top: -16px; bottom: 0; }   /* 40 px tap area, up into the (untappable) team bar */
.subs > i, .subs > span { border-radius: 10px; }
.subs i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #b3161d, var(--yt)); transition: transform .8s ease; }
.subs span { position: relative; white-space: nowrap; }
/* this week's leaders: one line, two halves; tap = Juara */
.lead { position: relative; display: flex; width: 100%; height: 24px; margin-top: 4px; border-radius: 12px; border: 1.5px solid var(--ink); overflow: visible;
  font-size: 12px; font-weight: 700; line-height: 22px; white-space: nowrap; }
.lead::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: -16px; }   /* 40 px tap area, down into the scene top */
.lead span { flex: 1 1 50%; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; text-align: center; }
.lead .lb { background: rgba(196,40,32,.88); color: #fff; border-radius: 10px 0 0 10px; text-shadow: 0 1px 0 var(--ink); }
.lead .lj { background: rgba(242,182,50,.94); color: var(--ink); border-radius: 0 10px 10px 0; border-left: 1.5px solid var(--ink); }
.lead b { font-weight: 800; }

/* ---------- scene overlays ---------- */
#ticker { position: absolute; left: 50%; top: calc(var(--bandTop, 120px) + 4px); transform: translateX(-50%); max-width: calc(100% - 108px); pointer-events: none;
  font-size: 13px; font-weight: 600; background: rgba(255,248,232,.96); color: var(--ink); border-radius: 99px; padding: 3px 12px 1px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
#ticker.on { opacity: 1; visibility: visible; animation: drop .3s ease-out; }
@keyframes drop { from { transform: translate(-50%, -10px); } }
body.ngamuk #ticker { top: calc(var(--bandTop, 120px) + 36px); }
#ticker b { font-weight: 800; } #ticker .tag-bully { color: #c0322a; font-weight: 800; } #ticker .tag-jarwo { color: #b0700c; font-weight: 800; }
#ticker .r-biasa { color: #5f6a75; font-weight: 800; } #ticker .r-langka { color: #1f6fd6; font-weight: 800; } #ticker .r-epik { color: #8a33d0; font-weight: 800; } #ticker .r-legendaris { color: #c98a00; font-weight: 800; }

/* wardrobe columns: costumes left, weapons right, anchored at the band bottom; ui.cols() decides what fits (+N = Lemari) */
.col { position: absolute; bottom: calc(var(--bandBot, 170px) + 6px); display: flex; flex-direction: column; gap: 6px; }
.col.left { left: calc(6px + var(--sl)); } .col.right { right: calc(6px + var(--sr)); }
.item { position: relative; width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--ink); background: var(--paper); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 var(--ink); }
.item svg { width: 26px; height: 26px; }
.item.on { background: #ffe08a; transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); outline: 2.5px solid #fff; outline-offset: 1px; }
.item.locked { background: #b9b2ab; box-shadow: 0 3px 0 rgba(43,27,23,.7); }
.item.locked svg { width: 22px; height: 22px; margin-top: -9px; }
.item .lock { position: absolute; top: -5px; right: -6px; width: 16px; height: 16px; }
.item .lock svg { width: 16px; height: 16px; margin: 0; }
.item .price { position: absolute; left: -2px; right: -2px; bottom: 1px; font-size: 10px; font-weight: 800; line-height: 1; text-align: center; color: var(--ink); letter-spacing: -.2px; }
.item.more { background: var(--ink); color: var(--paper); font-family: 'Titan One', sans-serif; font-size: 14px; }
.item.fresh::after { content: ''; position: absolute; inset: -5px; border-radius: 15px; box-shadow: 0 0 0 4px #fff3a8, 0 0 14px 5px #ffd34d; opacity: 0; animation: glow 1.2s ease-out 3; pointer-events: none; }
@keyframes glow { 50% { opacity: 1; } }
body.ngamuk #weapons { opacity: .45; pointer-events: none; }

.amarah { position: absolute; left: calc(12px + var(--sl)); right: calc(12px + var(--sr)); bottom: var(--amarahBottom, 150px); display: flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 800; line-height: 1; pointer-events: none; }
.amarah svg { width: 14px; height: 14px; flex: none; }
.abar { flex: 1; height: 7px; border-radius: 4px; background: rgba(43,27,23,.35); border: 1.5px solid var(--ink); overflow: hidden; }
.abar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #ffb04a, #ff3d1f); transition: transform .4s; }
.amarah.full::after { content: ''; position: absolute; left: 62%; right: 0; top: -1px; bottom: -1px; border-radius: 5px; box-shadow: 0 0 10px 3px #ff5a2a; animation: pulse .6s infinite alternate; }
.amarah.full span { color: #ffe08a; white-space: nowrap; animation: pulse .6s infinite alternate; }   /* phones: no tooltip, so the bar says it */
@keyframes pulse { from { opacity: .45; } to { opacity: 1; } }
body.amarah-full .sawer { position: relative; animation: nudge 1.1s ease-in-out infinite; }   /* until the finisher fires */
body.amarah-full .sawer::after { content: ''; position: absolute; inset: -3px; border-radius: 16px; box-shadow: 0 0 14px 4px rgba(255,90,42,.7); animation: pulse 1.1s ease-in-out infinite alternate; pointer-events: none; }
@keyframes nudge { 50% { transform: scale(1.03); } }


/* ---------- bottom ---------- */
#bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px calc(14px + var(--sr)) max(6px, env(safe-area-inset-bottom)) calc(14px + var(--sl));
  background: linear-gradient(to top, rgba(30,24,22,.8), rgba(30,24,22,.6) 80%, rgba(30,24,22,0)); }
.wrap { max-width: 380px; margin: 0 auto; }
.teampick { display: flex; height: 44px; border-radius: 12px; border: 2px solid var(--ink); overflow: hidden; background: rgba(255,248,232,.6); box-shadow: 0 3px 0 var(--ink); }
.team-btn { flex: 1; font: 800 15px/1 'Baloo 2', sans-serif; display: flex; align-items: center; justify-content: center; gap: 6px; color: rgba(43,27,23,.7); }
.team-btn + .team-btn { border-left: 2px solid var(--ink); }
.team-btn .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); }
.team-btn.bully.on { background: var(--bully); color: #fff; }
.team-btn.jarwo.on { background: var(--jarwo); color: var(--ink); }
.team-btn.on .dot { background: var(--ink); box-shadow: inset 0 0 0 2.5px #fff; }
.sawer { display: flex; align-items: center; justify-content: center; margin-top: 9px; width: 100%; height: 48px; border-radius: 14px; border: 3px solid var(--ink); color: #fff;
  font: 20px/1 'Titan One', 'Baloo 2', sans-serif; letter-spacing: 1px; box-shadow: 0 4px 0 var(--ink); text-decoration: none; text-align: center; padding-top: 2px; }
.sawer:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
body[data-team="bully"] .sawer { background: linear-gradient(#f2766b, var(--bully)); text-shadow: 0 2px 0 var(--ink), 0 -1px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink); }
body[data-team="jarwo"] .sawer { background: linear-gradient(#ffd468, #eaa51c); color: var(--ink); text-shadow: 0 2px 0 rgba(255,255,255,.45); }
.note { margin-top: 6px; text-align: center; font-size: 12.5px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.note b { color: #ffe08a; }
.toast { position: absolute; left: 50%; bottom: calc(var(--bandBot, 170px) + 8px); transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: var(--paper);
  font-size: 14px; font-weight: 700; padding: 6px 14px 4px; border-radius: 99px; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.35); display: none; pointer-events: none; }
.toast b { color: #ffe08a; }
body.toast-on .toast { display: block; animation: rise .25s ease-out; }
@keyframes rise { from { transform: translate(-50%, 10px); opacity: 0; } }

/* ---------- reveal, summary, banner: low in the band, over his legs, clear of his face and the tools ---------- */
#reveal { position: absolute; left: 50%; bottom: calc(var(--bandBot, 170px) + 8px); transform: translateX(-50%); pointer-events: none; display: none; }
#reveal.on { display: block; animation: pop .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { from { transform: translateX(-50%) scale(.4); opacity: 0; } }
.rcard { min-width: 210px; max-width: min(300px, calc(100vw - 120px)); text-align: center; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 16px; padding: 3px 14px 5px; box-shadow: 0 5px 0 var(--ink), 0 0 30px 6px var(--rc, #fff); }
.rcard .rr { font-family: 'Titan One', sans-serif; font-size: 13px; letter-spacing: 2px; color: var(--rc); text-shadow: 0 1px 0 var(--ink); }
.rcard .rn { font-family: 'Titan One', sans-serif; font-size: 22px; line-height: 1.05; }
.rcard .rb { font-size: 13px; font-weight: 700; }
#summary { position: absolute; left: calc(54px + var(--sl)); right: calc(54px + var(--sr)); bottom: calc(var(--bandBot, 170px) + 6px); display: none; pointer-events: none; text-align: center; }
#summary.on { display: block; animation: rise2 .3s ease-out; }
@keyframes rise2 { from { opacity: 0; transform: translateY(20px); } }
.stitle { font-family: 'Titan One', sans-serif; font-size: 16px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff3c4; text-shadow: 0 2px 0 var(--ink), 0 0 8px rgba(0,0,0,.6); margin-bottom: 4px; }
.sgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mini { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 9px; padding: 1px 2px 3px; font-size: 9.5px; font-weight: 800; line-height: 1.02; overflow: hidden;
  box-shadow: inset 0 -4px 0 var(--rc), 0 2px 0 var(--ink); height: 36px; display: flex; flex-direction: column; justify-content: center; animation: pop2 .3s backwards; }
.mini small { display: block; font-size: 8.5px; color: var(--rc); letter-spacing: 1px; font-family: 'Titan One', sans-serif; text-shadow: 0 1px 0 var(--ink); }
@keyframes pop2 { from { transform: scale(.3) rotate(-10deg); opacity: 0; } }
#banner { position: absolute; left: calc(52px + var(--sl)); right: calc(52px + var(--sr)); bottom: calc(var(--bandBot, 170px) + 8px); text-align: center; pointer-events: none; display: none; }
#reveal.on ~ #banner { bottom: calc(var(--bandBot, 170px) + 96px); }   /* a legendary card at the same time: the banner sits above it */
#banner.on { display: block; animation: slam .45s cubic-bezier(.2,1.7,.4,1); }
@keyframes slam { from { transform: scale(2.2); opacity: 0; } }
#banner .b1 { font-family: 'Titan One', sans-serif; font-size: 26px; line-height: 1; color: #fff3c4; text-shadow: 0 3px 0 var(--ink), 0 -2px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 0 18px rgba(0,0,0,.5); }
#banner .b2 { display: inline-block; margin-top: 5px; font-size: 14px; line-height: 1.15; font-weight: 800; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 3px 12px 1px; border: 2px solid #fff; }
#banner.party .b1 { color: #ffd1d1; }
.confetti { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); } }

/* ---------- ngamuk ---------- */
#ngamukChip { position: absolute; left: 50%; top: calc(var(--bandTop, 120px) + 4px); transform: translateX(-50%); display: none; font-family: 'Titan One', sans-serif; font-size: 13px;
  background: var(--bully); color: #fff; border: 2.5px solid var(--ink); border-radius: 99px; padding: 3px 12px 1px; box-shadow: 0 3px 0 var(--ink); pointer-events: none; white-space: nowrap; }
body.ngamuk #ngamukChip { display: block; }
body.ngamuk #stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 80px 20px rgba(226,40,30,.65); animation: pulse .8s infinite alternate; }   /* opacity only: a full-screen animated shadow repaints every frame */
.splat { position: absolute; width: 190px; margin-left: -95px; margin-top: -70px; text-align: center; pointer-events: none; animation: splat .9s ease-out forwards; }
.splat svg { width: 120px; height: 120px; }
.splat b { display: block; font-family: 'Titan One', sans-serif; font-size: 30px; color: #fff; text-shadow: 0 3px 0 var(--ink), 0 -2px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink); margin-top: -40px; }
@keyframes splat { 0% { transform: scale(2.4); opacity: 0; } 12% { transform: scale(1); opacity: 1; } 75% { opacity: 1; } 100% { transform: scale(1.05) translateY(10px); opacity: 0; } }

/* ---------- menu + panels (one bottom sheet) ---------- */
#sheet { position: absolute; inset: 0; background: rgba(20,14,12,.55); display: flex; align-items: flex-end; z-index: 5; }
#sheet[hidden] { display: none; }
.sheet-card { width: 100%; max-height: 82%; background: var(--paper); color: var(--ink); border-radius: 20px 20px 0 0; border: 3px solid var(--ink); border-bottom: 0; display: flex; flex-direction: column; animation: up .25s ease-out; }
@keyframes up { from { transform: translateY(40%); } }
.sheet-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 6px 8px 2px; font-family: 'Titan One', sans-serif; font-size: 19px; }
.sheet-head b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-head button { width: 44px; height: 44px; font-size: 22px; font-weight: 800; }
#sheetBack { font-size: 34px; line-height: 1; padding-bottom: 4px; }
#sheet.menu #sheetBack { visibility: hidden; }
.sheet-body { overflow-y: auto; padding: 0 16px 10px; font-size: 14px; line-height: 1.35; }
.sheet-body h3 { font-family: 'Titan One', sans-serif; font-size: 15px; font-weight: 400; margin: 10px 0 4px; }
.sheet-body p { margin: 4px 0; } .sheet-body ul { padding-left: 18px; }
.sheet-body table { width: 100%; border-collapse: collapse; } .sheet-body td { padding: 3px 4px; border-bottom: 1px solid rgba(43,27,23,.12); }
.sheet-body td:last-child { text-align: right; font-weight: 800; }
.rtag { display: inline-block; font-size: 10px; font-weight: 800; color: #fff; border-radius: 99px; padding: 1px 7px 0; background: var(--rc); border: 1.5px solid var(--ink); }
.sheet-body .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sheet-body .done { color: #2f8a3e; font-weight: 800; }
.sheet-body .muted { opacity: .65; }
.sheet-body .now { background: #fff1c2; }
.lemari { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 6px; }
.lemari button { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 8px; border-radius: 12px; border: 2px solid var(--ink); background: #fff; color: var(--ink); text-align: left; box-shadow: 0 2px 0 var(--ink); }
.lemari button svg { width: 32px; height: 32px; flex: none; }
.lemari button.locked { background: #e9e4dc; }
.lemari button.on { background: #ffe08a; }
.lemari b { display: block; font-size: 13px; line-height: 1.1; } .lemari small { display: block; font-size: 11.5px; line-height: 1.15; opacity: .75; }
.menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; padding: 6px 0 4px; }
.pbtn { min-height: 76px; border-radius: 14px; background: #fff; border: 2px solid var(--ink); color: var(--ink); box-shadow: 0 3px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 14px; font-weight: 800; line-height: 1; padding: 6px 4px; }
.pbtn svg { width: 30px; height: 30px; }
.callout { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; padding: 6px 10px; border-radius: 12px; border: 2px solid var(--ink); background: #efe4ff; font-weight: 700; }
.callout em { font-style: normal; color: #7a35d0; font-weight: 800; }
.callout.lock { background: #2b1b17; color: var(--paper); justify-content: space-between; }
.callout.lock .blur { font-family: 'Titan One', sans-serif; font-size: 13px; color: transparent; text-shadow: 0 0 5px #ffe08a; letter-spacing: .5px; }
.callout.lock b { color: #ffe08a; }
.sheet-foot { padding: 8px 16px max(10px, env(safe-area-inset-bottom)); font-size: 13px; text-align: center; border-top: 1px solid rgba(43,27,23,.15); }
.sheet-foot a { color: var(--ink); font-weight: 800; display: inline-block; padding: 10px 2px; }
#offline { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 99px; display: none; pointer-events: none; }
body.offline #offline { display: block; }