/* Union window (public/union_ui.js). It lives in #winParty (class "un" while the player is in a union): the game's own window frame (.win.orn, title bar .wt)
   with a mobile-first body. Sizes are real pixels on purpose: the usual touch scale (--s) is switched off here so rows and buttons stay >= 40 px tall on a phone.
   Tokens come from index.html (:root --gold --gold2 --dim --text --serif); buttons follow .pbtn of party.js (gold-brown gradient, #6a5530 border). */
#winParty.un { transform:none !important; width:min(440px, calc(100vw - 8px)); height:min(620px, calc(100vh - 12px)); height:min(620px, calc(100dvh - 12px)); min-width:0; box-sizing:border-box; }
/* transparency of the Party / Union UI (Config union > Opacity; --uopa 0.25 .. 1 is set on <html> by public/party.js): only the backgrounds fade, text and buttons stay solid */
#winParty { background:linear-gradient(180deg,rgba(255,235,190,calc(.05 * var(--uopa,1))),transparent 40%), linear-gradient(rgba(30,27,21,calc(.95 * var(--uopa,1))),rgba(14,12,9,calc(.95 * var(--uopa,1)))) !important;
  box-shadow:inset 0 0 0 1px var(--gold2), 0 6px 22px rgba(0,0,0,calc(.65 * var(--uopa,1))) !important; }
#winParty .wt { background:linear-gradient(rgba(59,49,35,var(--uopa,1)),rgba(27,22,14,var(--uopa,1))); }
#winParty .wt .wcol { flex:none; width:24px; height:24px; margin:0 8px 0 -4px; padding:0; font:700 18px/20px system-ui; color:#e8c872; background:rgba(0,0,0,.35); border:1px solid #6a5530; border-radius:4px; cursor:pointer; touch-action:manipulation; }
#winParty .wt .wcol:active { background:#4a3a14; } #winParty .wt > span { margin-right:auto; }
#winParty.col { height:auto !important; min-height:0; } #winParty.col .wb { display:none !important; } #winParty.col .wt { border-bottom:0; }
#winParty.un.on { display:flex; flex-direction:column; }
#winParty.un .wt { flex:none; padding:5px 10px; }
#winParty.un .wb { flex:1; min-height:0; max-height:none; padding:0; overflow:hidden; display:flex; flex-direction:column; }
.uw { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; font:12px system-ui,Arial,sans-serif; color:var(--text,#e9e2d0); -webkit-tap-highlight-color:transparent; }
.uw button { font-family:inherit; touch-action:manipulation; cursor:pointer; }
.uw button:focus-visible, .uw .ur:focus-visible { outline:2px solid #f0cf7a; outline-offset:-2px; }

/* header: boss, sub-boss, n / 150, invite */
.uh { flex:none; display:flex; align-items:center; gap:8px; padding:6px 8px; min-height:40px; box-sizing:border-box; border-bottom:1px solid #2e271a; }
.uwho { flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:1px 12px; font:600 12px/16px system-ui; }
.uwho > span { display:inline-flex; gap:4px; min-width:0; max-width:100%; } .uwho > span > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uw u { text-decoration:none; } .uw u.boss { color:#f6d36a; } .uw u.sub { color:#c9d3e0; }
.uwb { color:#f6d36a; } .uws { color:#d8dee8; }
.ucnt { flex:none; font:700 14px var(--serif); color:var(--gold,#d9b45a); font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.uinv { position:relative; isolation:isolate; flex:none; min-height:40px; padding:0 12px; font:700 12px system-ui; color:#1a1208; background:none; border:0; }
.uinv::before { content:''; position:absolute; inset:5px 0; z-index:-1; background:linear-gradient(#f0cf7a,#b8862e); border:1px solid #e0b85a; border-radius:5px; } /* plate 30 px, hit box 40 px */
.uinvall { padding:0 10px; white-space:nowrap; } .uinv:disabled { opacity:.5; } .uinv[hidden] { display:none; }

/* Open chip (Open Union = anybody of the side may join) */
.uochip { flex:none; padding:2px 8px; font:700 11px/16px system-ui; letter-spacing:.04em; color:#0f2b14; background:linear-gradient(#8bec97,#46b85a); border:1px solid #7fe08a; border-radius:9px; } .uochip[hidden] { display:none; }

/* tabs: Raid 1..5 */
.ubody { flex:1; min-height:0; display:flex; flex-direction:column; }
.utabs { flex:none; display:grid; grid-template-columns:repeat(5,1fr); gap:3px; padding:6px 6px 0; }
.utab { position:relative; min-height:46px; padding:2px 0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#cdbf9c;
  background:linear-gradient(#2c2518,#120e08); border:1px solid #4a3d22; border-bottom:3px solid var(--tc); border-radius:6px 6px 0 0; }
.utab b { font:700 13px/1.2 system-ui; } .utab small { font:600 11px/1.2 system-ui; color:var(--dim,#9c9482); font-variant-numeric:tabular-nums; }
.utab.on { color:#fff; border-color:var(--tc); background:linear-gradient(#3a3022,#1b150c); box-shadow:inset 0 0 0 1px var(--tc); }
.utab.on small { color:#f3e9d2; } .utab.full small { color:#ffb36b; }
.utab i { position:absolute; right:4px; top:4px; width:7px; height:7px; border-radius:50%; background:var(--tc); box-shadow:0 0 0 1px #000; } .utab i[hidden] { display:none; }

/* member list */
.ucol { flex:1; min-height:0; display:flex; margin:0 6px; border:1px solid #3a3020; border-top:2px solid var(--tc, #d9b45a); background:rgba(8,6,4,calc(.6 * var(--uopa,1))); }
.ulist { flex:1; min-width:0; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#6a5530 #120e08; }
.ur { display:flex; align-items:center; gap:8px; height:46px; box-sizing:border-box; padding:0 8px 0 6px; border-left:3px solid var(--tc, #d9b45a); border-bottom:1px solid rgba(255,255,255,.05);
  cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; content-visibility:auto; contain-intrinsic-size:auto 46px; }
.ur:nth-child(even) { background:rgba(255,255,255,.028); } .ur:hover { background:rgba(217,180,90,.1); }
.ur.sel { background:rgba(217,180,90,.2); } .ur.me { box-shadow:inset 0 0 0 1px rgba(120,190,255,.35); }
.ur.dead { opacity:.55; }
.uic { flex:none; width:34px; height:34px; box-sizing:border-box; border-radius:50%; border:2px solid var(--cc,#6a5530); background:#14110c url(/ui/union_cls.webp) no-repeat; background-size:360px 30px; background-position:calc(var(--ci,0) * -30px) 0; box-shadow:0 0 0 1px #000; }
.umain { flex:1; min-width:0; }
.u1 { display:flex; align-items:baseline; gap:5px; font:600 14px/18px system-ui; white-space:nowrap; }
.u1 u { flex:none; width:14px; text-align:center; font-size:13px; }
.unm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; color:#6fe07a; text-shadow:0 1px 2px #000; }
.ur.far .unm { color:#8fb894; } .ur.lead .unm { color:#f6d36a; }
.ust { flex:none; max-width:42%; overflow:hidden; text-overflow:ellipsis; font:11px/18px system-ui; font-style:normal; color:#9aa3b2; } .ur.dead .ust { color:#ff9a8c; }
.ulv { flex:none; font:700 12px/18px system-ui; font-style:normal; color:#f0cf7a; font-variant-numeric:tabular-nums; }
.u2 { margin-top:3px; }
.ubar { height:6px; background:#1c1412; border:1px solid #000; border-radius:2px; overflow:hidden; } .ubar i { display:block; height:100%; width:0; background:linear-gradient(#f0628a,#c92b58); transition:width .3s; }
.ubar.mp { height:4px; margin-top:2px; } .ubar.mp i { background:linear-gradient(#69d4fb,#26a8de); }
.ur.load .ubar { background:repeating-linear-gradient(90deg,#241b16 0 8px,#2b2019 8px 16px); }
.uempty { padding:22px 14px; text-align:center; font:13px/1.5 system-ui; color:var(--dim,#9c9482); }

/* drag a row onto a tab (boss): the grip at the right edge of a row, held 350 ms */
.ugrip { display:none; flex:none; width:40px; height:100%; margin:0 -8px 0 0; align-items:center; justify-content:center; gap:3px; flex-direction:column; touch-action:none; cursor:grab; opacity:.7; }
.uw.boss .ugrip { display:flex; } .ugrip i { display:block; width:16px; height:2px; border-radius:1px; background:#b9a66c; }
.ur.dragging { opacity:.45; outline:1px dashed #f0cf7a; outline-offset:-2px; }
.uw.dragging .ulist { overflow:hidden; } .uw.dragging .utab { transition:none; }
.utab.drop { color:#fff; background:linear-gradient(#5a4a1c,#2c2208); box-shadow:inset 0 0 0 2px var(--tc), 0 0 10px var(--tc); }
.utab.nodrop { opacity:.5; }
.ur.swapt { background:rgba(240,207,122,.3) !important; outline:2px solid #f0cf7a; outline-offset:-2px; } .ur.noswap { opacity:.4; }
.uw.dragging .ur:not(.dragging):not(.noswap) { cursor:copy; }
.ughost { position:fixed; left:0; top:0; z-index:2000; pointer-events:none; margin:-22px 0 0 -70px; width:140px; padding:5px 10px; box-sizing:border-box; color:#f3e9d2; background:rgba(30,25,16,.94); border:1px solid var(--tc,#d9b45a); border-left-width:4px; border-radius:6px; box-shadow:0 6px 16px rgba(0,0,0,.6); }
.ughost b { display:block; font:700 13px/1.25 system-ui; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ughost small { display:block; font:11px/1.2 system-ui; color:#b9ad90; }

/* toolbar: loot rule, open / hide, chat, leave */
.utool { flex:none; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:6px; border-top:1px solid #2e271a; margin-top:6px; background:rgba(0,0,0,.25); }
.utbtn { position:relative; isolation:isolate; min-height:42px; padding:3px 4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; color:#e8e0cc; background:none; border:0; } /* the plate is drawn smaller than the hit box (::before): buttons look normal-sized, the touch target stays 40 px */
.utbtn::before, .usi::before { content:''; position:absolute; inset:4px 0; z-index:-1; background:linear-gradient(#2c2518,#120e08); border:1px solid #6a5530; border-radius:5px; }
.utbtn span { font:11px/1.2 system-ui; color:var(--dim,#9c9482); } .utbtn i { font:700 12px/1.2 system-ui; font-style:normal; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.utab:active { background:#4a3a14; } .utbtn:active::before, .usi:active::before { background:#4a3a14; }
.utbtn.on i { color:#7fe08a; } .utbtn.ro { opacity:.85; }
.utbtn:last-child i { color:#ffb3ad; }

/* sheets (slide up inside the window) */
.uscrim { position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .15s; }
.uw.sheet .uscrim { opacity:1; pointer-events:auto; }
.usheet { position:absolute; left:0; right:0; bottom:0; max-height:88%; overflow-y:auto; overscroll-behavior:contain; background:linear-gradient(#2a241b,#15120d); border-top:2px solid #c29c4e; box-shadow:0 -8px 22px rgba(0,0,0,.6);
  transform:translateY(103%); visibility:hidden; transition:transform .16s ease-out, visibility 0s .16s; }
.uw.sheet .usheet { transform:none; visibility:visible; transition:transform .16s ease-out; }
.ush { display:flex; align-items:center; gap:10px; padding:8px 8px 8px 12px; border-bottom:1px solid #3a3020; position:sticky; top:0; background:#221d15; z-index:1; }
.ush .uic { width:38px; height:38px; background-size:408px 34px; background-position:calc(var(--ci,0) * -34px) 0; }
.ust2 { flex:1; min-width:0; } .ust2 b { display:block; font:700 15px/1.25 system-ui; color:#f3e9d2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ust2 small { display:block; font:12px/1.3 system-ui; color:var(--dim,#9c9482); }
.usx { flex:none; width:44px; height:44px; font-size:26px; line-height:1; color:#cfc6b0; background:none; border:0; }
.usb { padding:6px 10px 10px; display:flex; flex-direction:column; gap:0; }
.usi { position:relative; isolation:isolate; min-height:40px; padding:7px 12px; text-align:left; display:flex; flex-direction:column; justify-content:center; color:#f3e9d2; background:none; border:0; }
.usi span { font:700 13px/1.25 system-ui; } .usi small { font:11px/1.25 system-ui; color:var(--dim,#9c9482); }
.usi.no span { color:#ffb3ad; } .usi.on::before { border-color:#e0b85a; background:linear-gradient(#4a3a14,#241a08); } .usi.go { color:#1a1208; align-items:center; } .usi.go::before { background:linear-gradient(#f0cf7a,#b8862e); border-color:#e0b85a; } .usi.back { align-items:center; }
.usi:disabled { opacity:.55; cursor:default; }
.utpick { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
.utp { min-height:44px; padding:2px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#f3e9d2; background:linear-gradient(#2c2518,#120e08); border:1px solid #4a3d22; border-bottom:3px solid var(--tc); border-radius:5px; }
.utp b { font:700 13px/1.2 system-ui; } .utp small { font:11px/1.2 system-ui; color:var(--dim,#9c9482); } .utp:disabled { opacity:.45; } .utp.cur { border-color:var(--tc); }
.uinvf { display:flex; gap:6px; } .uinvf input { flex:1; min-width:0; height:40px; box-sizing:border-box; padding:0 10px; font:16px system-ui; color:#f3e9d2; background:#120e08; border:1px solid #6a5530; border-radius:5px; user-select:text; -webkit-user-select:text; } .uinvf .usi { min-width:84px; }
.unote { margin:2px 2px 0; font:12px/1.4 system-ui; color:var(--dim,#9c9482); }

/* a short landscape phone: the tabs become a rail on the left, the sheet has two columns */
@media (max-height:470px) {
  #winParty.un { width:min(500px, calc(100vw - 110px)); }
  #winParty.un .wt { padding:3px 10px; font-size:12px; }
  .uh { min-height:34px; padding:3px 8px; }
  .ubody { flex-direction:row; }
  .utabs { grid-template-columns:1fr; grid-template-rows:repeat(5,1fr); width:62px; padding:6px 0 6px 6px; gap:3px; }
  .utab { min-height:0; border-bottom:1px solid #4a3d22; border-right:3px solid var(--tc); border-radius:6px 0 0 6px; }
  .utab small { font-size:11px; } .utab b { font-size:12px; }
  .ucol { margin:6px 6px 6px 0; border-top:1px solid #3a3020; border-left:2px solid var(--tc, #d9b45a); }
  .utool { margin-top:0; padding:3px 6px; } .utbtn { min-height:42px; }
  .usb { display:grid; grid-template-columns:1fr 1fr; } .usb .utpick, .usb .uinvf, .usb .unote { grid-column:1 / -1; }
  .usheet { max-height:94%; } .ush { padding:4px 4px 4px 12px; }
}
@media (prefers-reduced-motion:reduce) { .usheet, .uscrim, .ubar i { transition:none !important; } }

/* party grouping inside a Raid tab: coloured side bar per sub-party (--pc), a "P1" tag on the first row, a small gap between groups */
.ur { position:relative; }
.ur.pg { border-left:6px solid var(--pc); }
.ur.pg1 { margin-top:4px; border-top-left-radius:6px; } .ur.pg1:first-child { margin-top:0; }
.ur.pgN { border-bottom-left-radius:6px; }
.upt { position:absolute; left:0; top:0; z-index:1; padding:0 5px; font:700 9px/11px system-ui; color:#10151c; background:var(--pc); border-radius:0 0 4px 0; pointer-events:none; }
.upt[hidden] { display:none; }

/* Move to party: drop target highlight (the whole group of the strip under the finger) and the picker */
.ur.spt { background:rgba(240,207,122,.22) !important; box-shadow:inset 0 0 0 2px var(--pc); }
.utpick.usp { margin-top:6px; } .utpick.usp .utp { border-left:4px solid var(--tc); } .utpick.usp .utp.new { grid-column:span 2; }

/* join request chip (public/joinreq_ui.js): small, ~75 % opaque, left of the minimap; only the chip takes taps */
#jreq { position:fixed; right:calc(10px + 212px + 8px + var(--sr, 0px)); top:10px; z-index:40; display:none; align-items:center; gap:4px; min-height:36px; max-width:190px; padding:0 4px 0 8px; box-sizing:border-box; border:1px solid rgba(243,222,160,.55); border-radius:18px; background:rgba(12,9,5,.82); opacity:.75; color:#f3e9d2; font:700 12px/1 system-ui,sans-serif; pointer-events:auto; touch-action:manipulation; }
#jreq.on { display:flex; }
#jreq .who { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 2px #000; }
#jreq .more { flex:none; color:#f3dea0; font:700 11px system-ui; }
#jreq button { flex:none; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.08); font:700 18px/36px system-ui; text-align:center; cursor:pointer; touch-action:manipulation; }
#jreq .ok { color:#7be08f; } #jreq .no { color:#ff8a80; }
/* Auto join checkbox row (party window / Config union list) */
.autoj { display:flex; align-items:center; gap:8px; min-height:36px; cursor:pointer; }
.autoj input { width:20px; height:20px; margin:0; accent-color:#e0a64a; }
.autoj input:disabled { opacity:.7; }