/* =====================================================================
   หน้าต่างยืนยัน / วาร์ป / สลับเตียง (1 ต.ค. จ๊อบ: หน้าวาร์ปยังใช้ของเก่า)
   กรอบพิกเซลตามโซน · หัวแถบเข้มตัวหนา 14 · ปุ่มแบบใหม่ (ไม่ใช่ปุ่มหลัก = รอง · ยืนยัน = หลักเขียว) · รายชื่อ = การ์ดจิ๋วแถวละ 4
   ===================================================================== */
body[data-zone] .modal-box.confirm-box {
  width: 360px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 0 10px 10px; background: none;
  border-style: solid; border-width: 6px; border-color: transparent; border-image: url(../assets/ui/v2/panel_ice.png) 3 fill / 6px stretch; image-rendering: pixelated;
  box-shadow: 0 6px 0 rgba(0,0,0,.5); clip-path: none; }
body[data-zone="desert"] .modal-box.confirm-box { border-image-source: url(../assets/ui/v2/panel_desert.png); }
body[data-zone] .confirm-box:has(.pk-grid) { width: 360px; }
body[data-zone] .confirm-box .c-title { margin: 0 -10px 8px; padding: 6px 10px 5px; background: #0a1826; border-bottom: 2px solid #06101c; box-shadow: 0 2px 0 #2c5070;
  font: 700 14px/1.2 var(--pix); color: #e2f5ff; letter-spacing: 1px; text-transform: uppercase; text-shadow: 1px 1px 0 #02060c; text-align: left; }
body[data-zone="desert"] .confirm-box .c-title { background: #1e1208; border-bottom-color: #1a0f06; box-shadow: 0 2px 0 #6e5030; color: #fdebc6; }
body[data-zone] .confirm-box .c-title.warn { color: #ff9a80; }
body[data-zone] .confirm-box .c-text { font: 11px/1.5 var(--pix); color: #cfe0ee; text-align: left; margin: 0 0 8px; }
body[data-zone="desert"] .confirm-box .c-text { color: #ecdcc0; }
body[data-zone] .confirm-box .c-say, body[data-zone] .confirm-box .muted { font-size: 11px; }
body[data-zone] .confirm-box > .jobs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0 0 8px; }
body[data-zone] .confirm-box > .jobs .job.tiny { flex: 1 1 0; min-width: 0; }
body[data-zone] .confirm-box > .jobs .muted { flex-basis: 100%; margin-top: 2px; color: #9fbad2; }
body[data-zone] .confirm-box .rate, body[data-zone] .confirm-box .warn { font-size: 11px; margin: 0 0 8px; }
/* ปุ่มล่าง: ไม่ = รอง · ใช่/วาร์ป = หลักเขียว */
body[data-zone] .confirm-box .c-btns { display: flex; gap: 8px; margin-top: 10px; }
body[data-zone] .confirm-box .c-btn {
  --img: url(../assets/ui/v2/ice_n.png); --img-h: url(../assets/ui/v2/ice_h.png); --img-p: url(../assets/ui/v2/ice_p.png);
  flex: 1 1 0; height: 34px; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  background: none !important; box-shadow: none !important; border-radius: 0 !important; outline: none;
  border-style: solid !important; border-width: 6px 4px !important; border-color: transparent !important; border-image: var(--img) 3 2 3 2 fill / 6px 4px stretch !important; image-rendering: pixelated;
  font: 14px/1 var(--pix) !important; color: #eef7fd !important; text-shadow: 1px 1px 0 #06101c; padding: 0 10px 4px !important; }
body[data-zone] .confirm-box .c-btn:hover { border-image-source: var(--img-h) !important; }
body[data-zone] .confirm-box .c-btn:active { border-image-source: var(--img-p) !important; padding: 2px 10px 2px !important; }
body[data-zone="desert"] .confirm-box .c-btn { --img: url(../assets/ui/v2/desert_n.png); --img-h: url(../assets/ui/v2/desert_h.png); --img-p: url(../assets/ui/v2/desert_p.png); color: #fff6e6 !important; text-shadow: 1px 1px 0 #1a0f06; }
body[data-zone] .confirm-box .c-btn.yes { --img: url(../assets/ui/v2/primary_n.png); --img-h: url(../assets/ui/v2/primary_h.png); --img-p: url(../assets/ui/v2/primary_p.png);
  color: #10240a !important; text-shadow: 1px 1px 0 #d4f7b4; }
/* ยืนยันเรื่องอันตราย (ไล่ออก ฯลฯ) ปุ่ม Yes ยังเป็นเขียว แต่หัวเป็นสีแดงอยู่แล้ว */

/* รายชื่อเลือกคน = การ์ดจิ๋วแถวละ 4 · เลือกแล้ว = ขอบเขียว + ✓ */
body[data-zone] .confirm-box .swap-list.pk-grid { display: grid; grid-template-columns: repeat(4, 72px); gap: 8px 6px; justify-content: center; max-height: 330px; overflow-y: auto;
  padding: 6px 4px; margin: 0 -4px; background: rgba(0,0,0,.2); border: 0; }
body[data-zone] .pk-card { all: unset; position: relative; cursor: pointer; display: block; width: 72px; height: 96px; }
body[data-zone] .pk-card .mc { pointer-events: none; }
body[data-zone] .pk-card:hover .mc { transform: translateY(-2px); }
body[data-zone] .pk-card.on { outline: 3px solid #7fc45a; outline-offset: 1px; }
body[data-zone] .pk-card .pk-check { position: absolute; right: -4px; top: -4px; width: 16px; height: 16px; z-index: 3; display: flex; align-items: center; justify-content: center;
  background: #7fc45a; color: #10240a; font: 700 11px/1 var(--pix); border: 2px solid #0b1a08; }
/* หน้าต่าง Import มี 3 ปุ่ม: กว้างขึ้นให้ "Undo import" อยู่บรรทัดเดียว */
body[data-zone] .confirm-box:has([data-import-undo]) { width: 440px; }

/* ===== While you were away (2 ต.ค.) · ของดีเป็นพระเอก ===== */
body[data-zone] .confirm-box.away-box { width: 380px; }
body[data-zone] .away-box .aw-time { font: 11px var(--pix); color: #9fbad2; margin: -2px 0 10px; }
body[data-zone] .away-box .aw-loot { display: flex; justify-content: center; gap: 10px; padding: 14px 0 12px; margin: 0 -10px 4px;
  background: radial-gradient(ellipse at center, rgba(224,178,76,.18), transparent 70%); }
body[data-zone] .away-box .aw-it { width: 52px !important; height: 52px !important; opacity: 0; transform: scale(.3); animation: aw-pop .45s cubic-bezier(.2,1.6,.4,1) forwards; }
body[data-zone] .away-box .aw-it .ico { width: 34px !important; height: 34px !important; }
@keyframes aw-pop { 0% { opacity: 0; transform: scale(.3) translateY(10px); } 60% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
body[data-zone] .away-box .aw-more { font: 10px var(--pix); color: #9fbad2; text-align: center; margin: -2px 0 6px; align-self: center; }
body[data-zone] .away-box .aw-h { font: 700 11px var(--pix); color: #e2f5ff; letter-spacing: 1px; text-transform: uppercase; margin: 8px 0 5px; }
body[data-zone="desert"] .away-box .aw-h { color: #fdebc6; }
body[data-zone] .away-box .aw-ups { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
body[data-zone] .away-box .aw-up { position: relative; width: 72px; height: 96px; }
body[data-zone] .away-box .aw-up .aw-lv { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); z-index: 3; padding: 1px 6px; white-space: nowrap;
  font: 10px/12px var(--pix); color: #10240a; background: #7fc45a; border: 2px solid #0b1a08; border-radius: 4px; }
body[data-zone] .away-box .aw-line { font: 11px/1.5 var(--pix); color: #cfe0ee; }
body[data-zone] .away-box .aw-res { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font: 11px var(--pix); color: #b6e69a; }
body[data-zone] .away-box .aw-r { display: inline-flex; align-items: center; gap: 3px; }
@media (prefers-reduced-motion: reduce) { body[data-zone] .away-box .aw-it { animation: none; opacity: 1; transform: none; } }
/* ป้าย Catching up… ระหว่างคิดช่วงที่ไม่อยู่ */
#catchup { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 600; padding: 10px 18px; font: 14px var(--pix, monospace); color: #eef7fd;
  background: #0a1826; border: 2px solid #2c5070; border-radius: 6px; box-shadow: 0 6px 0 rgba(0,0,0,.5); }
