/* หน้าตั้งค่าสิทธิ์ผ่าน (ประตู/เคาน์เตอร์) + ไอคอนเตือนมุมขวาล่าง — ดู js/access-ui.js */
.access-dialog{
  width:min(460px,calc(100vw - 24px));max-height:min(86dvh,720px);
  padding:0;overflow:hidden;
  border:1px solid #ddbd75;border-radius:18px;
  background:#152f34;color:#f4edda;color-scheme:dark;font-family:inherit;
  box-shadow:0 24px 90px #000a,inset 0 1px #ffffff12;
}
.access-dialog[open]{display:flex;flex-direction:column}
.access-dialog::backdrop{background:radial-gradient(ellipse at 50% 20%,#0d3038cc,#020f13e8)}
.access-dialog>header{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;border-bottom:1px solid #ffffff1a;
  background:linear-gradient(180deg,#1c3f45,#16353b)
}
.access-dialog h2{margin:0;font-size:17px;line-height:1.3}
.access-dialog>header button{flex-shrink:0;min-width:36px;min-height:36px;border-radius:11px;
  background:#ffffff10;border:1px solid #ffffff22;color:#f4edda;font-size:15px}
.access-body{flex:1 1 auto;min-height:0;overflow:auto;padding:12px 16px}
.access-head{margin:12px 0 6px;font-size:13px;letter-spacing:.3px;color:#c7d3c6;font-weight:700}
.access-body>.access-head:first-child{margin-top:0}

.access-ways{display:flex;gap:6px;flex-wrap:wrap}
.access-way{flex:1 1 30%;min-width:96px;min-height:42px;padding:6px 8px;font-size:13px;border-radius:11px}
.access-way[aria-pressed=true]{background:#c6a459;color:#132d30;border-color:#e2cc90;font-weight:700}

.access-row{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;margin:6px 0;
  border:1px solid #47605e;border-radius:11px;background:#1b383c;cursor:pointer}
.access-row:hover{border-color:#8fb0a4}
.access-row input{flex:0 0 auto;width:20px;height:20px;margin-top:2px;accent-color:#c6a459}
.access-row-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.access-row-text strong{font-size:14px}
.access-row-text small{font-size:11.5px;color:#a8bcb2;line-height:1.5}

.access-hint{margin:10px 0 0;font-size:11.5px;color:#9fb3aa;line-height:1.6}
.access-note{margin:0;padding:10px 16px;font-size:12.5px;line-height:1.65;white-space:pre-line;
  color:#ffd9a2;background:#3a2c1d;border-top:1px solid #7a6238}
.access-note[hidden]{display:none}
.access-foot{flex:0 0 auto;display:flex;gap:8px;padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid #ffffff1a;background:#133035}
.access-foot:empty{display:none}
.access-foot .tbtn{flex:1;min-height:44px}
.access-danger{border-color:#b4676a;color:#ffc9c4}

/* ---- สัญลักษณ์เตือน: รูปคน + เครื่องหมายตกใจ ----
   อยู่มุมขวาล่างเป็นค่าปกติ · ถาดไอคอนทากใหม่ (#newSlugTray) ใช้มุมเดียวกัน
   ถาดนั้นโผล่เฉพาะตอนมีทากใหม่ ถ้าโผล่พร้อมกันตัวนี้จะถอยขึ้นไปหนึ่งแถวไม่ให้ทับ
   ⚠️ :has() ไม่รองรับ = ตกกลับไปอยู่แถวล่างเสมอ ซึ่งเป็นตำแหน่งที่ผู้เล่นขอ ไม่ใช่ตำแหน่งพัง */
.access-warn{
  position:fixed;z-index:101;
  right:calc(12px + env(safe-area-inset-right));
  bottom:calc(12px + var(--mobile-nav,0px));
  width:44px;height:48px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #ffb4a6;border-radius:14px;background:#4a1f1cec;
  box-shadow:0 3px 12px #0006,0 0 0 0 #ff9c8b66;
  cursor:pointer;touch-action:manipulation;
  animation:accessWarnPulse 1.9s ease-in-out infinite;
}
.access-warn[hidden]{display:none}
.access-warn:active{transform:scale(.92)}
.access-warn svg{width:26px;height:26px;fill:#ffd9cf}
.access-warn svg .bang{fill:#ff8a74}
@keyframes accessWarnPulse{
  0%,100%{box-shadow:0 3px 12px #0006,0 0 0 0 #ff9c8b66}
  50%    {box-shadow:0 3px 12px #0006,0 0 0 7px #ff9c8b00}
}
/* ถาดทากใหม่โผล่อยู่ = ถอยขึ้นหนึ่งแถว (ถาดสูง 48 + ขอบ 12 + ช่องไฟ 8) */
body:has(#newSlugTray:not([hidden]))>.access-warn{bottom:calc(68px + var(--mobile-nav,0px))}
/* โหมดก่อสร้าง: แผงของอยู่ด้านล่าง ต้องยกขึ้นเหนือแผง (ใช้ตัวแปรชุดเดียวกับ #newSlugTray) */
body.mode-build:not(.inside-tank)>.access-warn{
  bottom:calc(var(--mobile-build,220px) + var(--mobile-nav,0px) + 12px)
}
body.mode-build:not(.inside-tank):has(#newSlugTray:not([hidden]))>.access-warn{
  bottom:calc(var(--mobile-build,220px) + var(--mobile-nav,0px) + 68px)
}