/* ศึกชิงธงกิลด์ / Guild Siege War: the officer window's siege tab, the HUD inside the Ice Castle, the result (client/js/siege.js) */
.sg-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.sg-tab { flex: 1; height: 34px; border: 0; border-radius: 10px; font: inherit; font-weight: 800; font-size: 13px; color: #cfe0f2; cursor: var(--cur-hover);
  background: linear-gradient(180deg, #1c2a3c, #0e1622); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #3b5878; }
.sg-tab.on { color: #fff; background: linear-gradient(180deg, #3a6aa0, #1a3658); box-shadow: 0 0 0 1px #000, 0 0 0 2px #9fd8ff, 0 0 12px rgba(120,200,255,.35); }
.sg-banner { position: relative; height: 180px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px #000, 0 0 0 2px #6fa8d8;
  background: radial-gradient(ellipse at 50% 30%, #dff0ff 0%, #9cc4e6 35%, #3d6a99 70%, #1b2f4a 100%); }
.sg-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; image-rendering: pixelated; }
.sg-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(6,12,24,.75)); pointer-events: none; }
.sg-btitle, .sg-bflags { z-index: 1; }
.sg-btitle { position: absolute; left: 12px; bottom: 10px; display: flex; flex-direction: column; text-shadow: 0 2px 0 #000, 0 0 8px #000; }
.sg-btitle b { font-family: "Cinzel", Georgia, serif; font-size: 22px; color: #fff; } .sg-btitle small { color: #cfeaff; font-weight: 800; }
.sg-bflags { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; }
.sg-bflags i { font-style: normal; font-weight: 900; padding: 2px 8px; border-radius: 8px; color: #fff; background: rgba(10,20,34,.75); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #9fd8ff; }
.sg-holder { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 10px; font-weight: 800; color: #ffe08a;
  background: rgba(10,8,4,.7); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #8a6420; }
.sg-gchip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 4px; border-radius: 999px; font-weight: 800; color: #fff;
  background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 2px var(--c); }
.sg-gchip img { width: 20px; height: 20px; image-rendering: pixelated; border-radius: 4px; }
.sg-gchip i { width: 14px; height: 14px; border-radius: 4px; background: var(--c); }
.sg-rew { display: flex; flex-direction: column; gap: 8px; }
.sg-rcard { padding: 10px 14px; border-radius: 12px; background: rgba(10,8,4,.8); box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6420; }
.sg-rcard.won { background: linear-gradient(180deg, rgba(30,50,80,.9), rgba(10,16,28,.9)); box-shadow: 0 0 0 1px #000, 0 0 0 2px #9fd8ff, 0 0 14px rgba(120,200,255,.25); }
.sg-rcard h3 { margin: 0 0 2px; color: var(--gold); } .sg-rcard small { color: #cbd6e6; }
.sg-rcard ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.sg-rcard li { color: #e9f2ff; font-weight: 700; } .sg-rcard li b { color: #9fef9a; }
.sg-mine { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; background: rgba(0,0,0,.4); box-shadow: inset 0 0 0 1.5px #3b5878; }
.sg-mine b { color: #9fd8ff; } .sg-mine small { margin-left: auto; color: #ffe08a; font-weight: 800; } .sg-mine.none { justify-content: center; color: #cbbd9c; }
@container (max-width: 560px) { .sg-rcard ul { grid-template-columns: 1fr; } }

/* the HUD inside the Ice Castle (under the buff tray) */
#siege-hud { position: absolute; left: 14px; top: 222px; min-width: 250px; max-width: 290px; padding: 8px 12px 9px; border-radius: 14px; pointer-events: none; user-select: none;
  color: #e9f2ff; background: linear-gradient(180deg, rgba(16,32,54,.9), rgba(6,12,22,.9)); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6fb8f0, 0 6px 18px rgba(0,0,0,.5); }
#siege-hud .sh-t { display: flex; justify-content: space-between; gap: 12px; font-weight: 900; color: #bfe6ff; }
#siege-hud .sh-t span { color: #fff; font-variant-numeric: tabular-nums; }
#siege-hud .sh-ph { margin: 2px 0 6px; font-size: 12px; font-weight: 800; color: #cbd6e6; } #siege-hud .sh-ph.war { color: #ff9a8a; }
#siege-hud .sh-flags { display: flex; flex-direction: column; gap: 4px; }
#siege-hud .sh-f { display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; font-size: 13px; }
#siege-hud .sh-f i { grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-weight: 900; color: #10161f;
  background: var(--c); box-shadow: 0 0 0 1.5px #000; }
#siege-hud .sh-f em { font-style: normal; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#siege-hud .sh-f.mine em { color: #9fef9a; }
#siege-hud .sh-cap { position: relative; display: block; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(0,0,0,.5); }
#siege-hud .sh-cap b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c); opacity: .85; }
#siege-hud .sh-cap small { position: relative; z-index: 1; display: block; padding-left: 6px; font-size: 10px; line-height: 12px; font-weight: 800; color: #fff; text-shadow: 0 1px 0 #000; white-space: nowrap; }
#siege-hud .sh-me { margin-top: 7px; padding: 6px 8px; border-radius: 10px; background: rgba(255,224,138,.12); box-shadow: inset 0 0 0 1.5px #ffd76a; }
#siege-hud .sh-me span { font-weight: 900; color: #ffe08a; font-size: 13px; }
#siege-hud .sh-me .progress { margin: 4px 0 2px; height: 10px; } #siege-hud .sh-me b { font-size: 12px; color: #fff; }
#siege-hud .sh-n { display: block; margin-top: 6px; color: #9fb4cf; font-size: 11px; }

/* the result over everyone's screen */
#siege-result { position: fixed; inset: 0; z-index: 2147482000; display: grid; place-items: center; background: rgba(0,0,0,.55); animation: winIn .2s ease-out; }
.sg-res { background: linear-gradient(180deg, #1c3354, #0a1220); box-shadow: 0 0 0 2px #000, 0 0 0 4px #9fd8ff, 0 0 40px rgba(120,200,255,.45); }
.sg-win { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px; border-radius: 14px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 2px var(--c), 0 0 18px var(--c); }
.sg-win img { width: 48px; height: 48px; image-rendering: pixelated; border-radius: 6px; box-shadow: 0 0 0 2px #000; }
.sg-win i { font-size: 40px; font-style: normal; }
.sg-win b { display: block; font-size: 22px; color: #fff; } .sg-win small { color: #ffe08a; font-weight: 800; }
.sg-rows { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.sg-rows li { display: flex; align-items: center; gap: 8px; } .sg-rows li > span { width: 18px; color: #9fb4cf; }
.sg-rows em { margin-left: auto; font-style: normal; font-weight: 800; } .sg-rows small { color: #9fb4cf; min-width: 64px; text-align: right; }
.sg-fx { font-size: 12px; color: #cfe6ff; }