/* a41.css — 4-Star Wheel Picker v3.2.3 (2025-10-10)
   Fix: 一打開彈窗，清單最後一列被底部霓虹外框壓住
   + 新增：狀態列（期數｜倒數）同一行樣式
   + 調整：分頁字體微放大；狀態列在小螢幕自動縮小避免溢出
   + 重要修復：關閉鈕(X)無法點擊 —— 降低 .a41-dialog::before/::after 層級、提升 .a41-close 層級
   Approach（做法 A）:
   - 外層 .a41-dialog 僅保留基本 padding-bottom（= padY）
   - 由內層可捲動容器 .a411-wrap（在 a411.css）負責 safe-area + 外框厚度 + 視覺距離
*/

:root{ --a41-modal-offset: 20vh; }

.a41-dialog {
  --a41-dialog-w: clamp(300px, 88vw, 560px);
  --a41-scale: 0.80;
  --a41-primary: #22d3ee;
  --a41-bg: #0b1120;
  --a41-fg: #e2e8f0;
  --a41-muted: #94a3b8;
  --a41-cyan: #35e8ff;
  --a41-purple: #a855f7;
  --a41-ring: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
  --a41-visible: 5;

  /* 尺寸與內距基準 */
  --a41-item-h: calc(44px * var(--a41-scale));
  --a41-pad: calc((var(--a41-visible) - 1) * 0.5 * var(--a41-item-h));
  --a41-radius: calc(16px * var(--a41-scale));
  --a41-radius-sm: calc(12px * var(--a41-scale));
  --a41-gap: calc(10px * var(--a41-scale));
  --a41-gap-sm: calc(8px * var(--a41-scale));
  --a41-pad-x: calc(16px * var(--a41-scale));
  --a41-pad-y: calc(12px * var(--a41-scale));
  --a41-line: max(1px, calc(2px * var(--a41-scale)));

  /* 保留給專案覆蓋使用（此檔不再直接計入 padding-bottom） */
  --a41-safe-b: env(safe-area-inset-bottom, 0px);
  --a41-frame-b: 20px;
  --a41-gap-b: 14px;
}

@media (max-height: 620px){ .a41-dialog { --a41-visible: 4; } }
@media (max-height: 560px){ .a41-dialog { --a41-visible: 3; } }
@media (max-width: 380px){ .a41-dialog { --a41-scale: 0.76; } }
@media (max-width: 340px){ .a41-dialog { --a41-scale: 0.72; } }

/* ===== Modal ===== */
.a41-modal{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.64);
  backdrop-filter: blur(3px);
  display: none;
  z-index: 1000;
  align-items: start;
  justify-items: center;
  padding: var(--a41-modal-offset) 0 6vh;
  overflow: auto;
}
.a41-modal.show{ display: grid; }
.a41-dialog, .a41-wheel { box-sizing: border-box; }

.a41-dialog{
  position: relative;
  transform: translateZ(0);
  will-change: transform, box-shadow, filter;
  backface-visibility: hidden;
  isolation: isolate;
  width: var(--a41-dialog-w);
  max-width: 100vw;
  max-height: calc(100vh - var(--a41-modal-offset) - 6vh);
  color: var(--a41-fg);
  border-radius: var(--a41-radius);
  padding: var(--a41-pad-x) var(--a41-pad-x) var(--a41-pad-y);
  outline: none; outline-offset: 0;
  border: 1px solid transparent;
  background: linear-gradient(var(--a41-bg), var(--a41-bg)) padding-box, var(--a41-ring) border-box;
  box-shadow:
    0 12px 44px rgba(0,0,0,.45),
    0 0 22px rgba(53,232,255,.55),
    0 0 44px rgba(53,232,255,.35),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 0 3px rgba(53,232,255,.95) inset;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* 外框高光（層級降低以免蓋住關閉鈕） */
.a41-dialog::before,
.a41-dialog::after{
  content:""; position:absolute; left:14px; right:14px; height:2px;
  background: linear-gradient(90deg, transparent, var(--a41-cyan), transparent);
  opacity:.85; pointer-events:none; z-index: 1; /* 由原本 9999 改為 1 */
}
.a41-dialog::before{ top:-1px; filter: blur(.2px); }
.a41-dialog::after{  bottom:-1px; filter: blur(.4px); }

.a41-dialog:focus,
.a41-dialog:focus-within { outline: none; }

/* 關閉鈕：層級提高並確保可點擊 */
.a41-close{
  position:absolute; top:calc(10px * var(--a41-scale)); right:calc(12px * var(--a41-scale));
  width:calc(36px * var(--a41-scale)); height:calc(36px * var(--a41-scale));
  border:none; border-radius:999px; background:transparent; color:var(--a41-fg);
  font-size:calc(24px * var(--a41-scale)); line-height:calc(36px * var(--a41-scale));
  cursor:pointer;
  z-index:10010;               /* ↑ 保證在所有裝飾層之上 */
  pointer-events:auto;         /* ↑ 明確可點擊 */
  touch-action:manipulation;   /* ↑ 行動裝置點擊更穩定 */
}
.a41-close:hover{ background: rgba(255,255,255,.06); }

.a41-title{
  text-align:center; font-size:calc(18px * var(--a41-scale)); font-weight:800;
  margin:calc(2px * var(--a41-scale)) 0 calc(4px * var(--a41-scale));
  color:var(--a41-fg);
  text-shadow:0 0 10px rgba(53,232,255,.45), 0 0 22px rgba(168,85,247,.25);
  position:relative;
}
.a41-title::after{
  content:""; display:block; width:96px; height:2px; margin:calc(4px * var(--a41-scale)) auto 0;
  background: linear-gradient(90deg, transparent, var(--a41-cyan), transparent);
  box-shadow: 0 0 8px rgba(53,232,255,.6); opacity:.95;
}

/* ===== Status Bar（期數｜倒數，同一行） ===== */
.a41-statusbar{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:8px 0 10px; padding:6px 10px;
  border-radius:12px; box-sizing:border-box; max-width:100%;
  border:1px solid rgba(0,255,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:
    0 0 0 1px rgba(0,255,255,.06) inset,
    0 8px 24px rgba(0,0,0,.35),
    0 0 24px rgba(0,255,255,.08) inset;
  color:#e8fbff;
  white-space:nowrap;
}
.a41-period-label,
.a41-cd-label{
  opacity:.9; font-size:12px; letter-spacing:.02em;
}
.a41-period,
.a41-cd{
  font:700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  padding:2px 8px; border-radius:999px;
  background:rgba(0,255,255,.08);
  border:1px solid rgba(0,255,255,.22);
}
.a41-sep{ opacity:.35; margin:0 2px; }

/* 小圓點：開盤綠 / 黑窗紅 */
.a41-cd-label{ position:relative; padding-left:14px; }
.a41-cd-label::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%;
  background:#19e28f; box-shadow:0 0 8px rgba(25,226,143,.7);
}

/* 黑窗時的配色 */
.a41-statusbar.blackout{
  border-color: rgba(255,99,132,.35);
  box-shadow:
    0 0 0 1px rgba(255,99,132,.12) inset,
    0 8px 24px rgba(0,0,0,.35),
    0 0 24px rgba(255,99,132,.10) inset;
}
.a41-statusbar.blackout .a41-period,
.a41-statusbar.blackout .a41-cd{
  background: rgba(255,99,132,.10);
  border-color: rgba(255,99,132,.28);
}
.a41-statusbar.blackout .a41-cd-label::before{
  background:#ff4d4f; box-shadow:0 0 8px rgba(255,77,79,.7);
}

/* === Status Bar：手機緊湊版（避免超出） ======================= */
@media (max-width: 430px){
  .a41-statusbar{ gap:6px; padding:4px 8px; }
  .a41-period, .a41-cd{
    font:700 11px/1.15 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    padding:1px 6px;
  }
  .a41-period-label, .a41-cd-label{ font-size:11px; }
  .a41-cd-label{ padding-left:12px; }
  .a41-cd-label::before{ width:7px; height:7px; }
}
@media (max-width: 360px){
  .a41-statusbar{ gap:4px; padding:3px 6px; }
  .a41-sep{ display:none; }
  .a41-period, .a41-cd{
    font:700 10px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    padding:1px 5px;
  }
  .a41-period-label, .a41-cd-label{ font-size:10.5px; }
}

/* ===== Tabs ===== */
.a41-tabs{
  display:flex; justify-content:center; align-items:center;
  gap:calc(8px * var(--a41-scale)); margin:calc(6px * var(--a41-scale)) 0 calc(10px * var(--a41-scale));
}
.a41-tab{
  appearance:none; border:1px solid transparent; cursor:pointer;
  /* 放大字體與內距（更美觀） */
  font-size: calc(15px * var(--a41-scale));
  padding: calc(7px * var(--a41-scale)) calc(14px * var(--a41-scale));
  border-radius:999px; font-weight:800; letter-spacing:.02em;
  color:#e2e8f0;
  background:linear-gradient(135deg, rgba(148,163,184,.22), rgba(53,232,255,.12)) padding-box, var(--a41-ring) border-box;
  box-shadow:0 0 0 1px rgba(53,232,255,.14) inset, 0 6px 12px rgba(0,0,0,.18);
  transition:transform .08s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.a41-tab:hover{ transform:translateY(-1px); box-shadow:0 0 0 1px rgba(53,232,255,.24) inset, 0 8px 16px rgba(0,0,0,.2); }
.a41-tab:focus-visible{ outline:2px solid var(--a41-cyan); outline-offset:2px; }
.a41-tab.active{
  background:linear-gradient(180deg, #22d3ee 0%, #06b6d4 100%) padding-box, var(--a41-ring) border-box;
  color:#0b1120; border-color:#22d3ee;
  box-shadow:
    0 0 0 1px rgba(34,211,238,.55) inset,
    0 6px 18px rgba(34,211,238,.35),
    0 0 0 2px rgba(34,211,238,.28) inset;
}
/* 超小螢幕保底，避免擠到換行 */
@media (max-width: 360px){
  .a41-tab{
    font-size: calc(14px * var(--a41-scale));
    padding: calc(6px * var(--a41-scale)) calc(12px * var(--a41-scale));
  }
}

/* ===== Wheels ===== */
.a41-grid.a41-wheels{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--a41-gap);
  align-items:start; margin:calc(2px * var(--a41-scale)) 0 calc(10px * var(--a41-scale)); flex:0 0 auto;
}
.a41-wheel-col{ display:flex; flex-direction:column; align-items:stretch; }
.a41-col-title{ text-align:center; font-size:calc(13px * var(--a41-scale)); letter-spacing:.1em; color:var(--a41-muted); margin-bottom:calc(4px * var(--a41-scale)); }
@media (max-height:560px){ .a41-col-title{ display:none; } }
.a41-wheel{
  position:relative; height:calc(var(--a41-item-h) * var(--a41-visible)); overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; scroll-snap-type:y mandatory; padding-top:var(--a41-pad); padding-bottom:var(--a41-pad);
  border-radius:var(--a41-radius-sm); border:1px solid transparent;
  background:linear-gradient(var(--a41-bg), var(--a41-bg)) padding-box, var(--a41-ring) border-box;
  box-shadow:0 0 0 1px rgba(53,232,255,.18) inset, 0 6px 16px rgba(0,0,0,.22);
}
.a41-wheel::-webkit-scrollbar{ width:0; height:0; } .a41-wheel{ scrollbar-width:none; }
.a41-option{
  height:var(--a41-item-h); display:flex; align-items:center; justify-content:center;
  font-size:calc(22px * var(--a41-scale)); font-weight:700; letter-spacing:.05em;
  scroll-snap-align:center; user-select:none; cursor:pointer;
}
.a41-option:hover{ background:rgba(255,255,255,.03); }
.a41-option.selected{
  color:var(--a41-cyan);
  text-shadow:0 0 10px rgba(53,232,255,.55), 0 0 22px rgba(53,232,255,.35);
}
.a41-center-bar{
  pointer-events:none; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:var(--a41-line);
  background:linear-gradient(90deg,transparent 0,var(--a41-cyan) 30%,var(--a41-cyan) 70%,transparent 100%);
  opacity:.9; z-index:2;
}
.a41-fade{ pointer-events:none; position:absolute; left:0; right:0; height:calc(var(--a41-item-h) * 2); z-index:1; }
.a41-fade.top{ top:0; background:linear-gradient(var(--a41-bg), rgba(11,17,32,0)); }
.a41-fade.bot{ bottom:0; background:linear-gradient(rgba(11,17,32,0), var(--a41-bg)); }

/* ===== Actions / Meta ===== */
.a41-actions{
  display:grid; grid-template-columns:repeat(3,1fr);
  grid-template-areas:"mults mults mults" "clear submit rand";
  column-gap:calc(6px * var(--a41-scale));
  row-gap:calc(6px * var(--a41-scale));
  align-items:center; margin-bottom:var(--a41-gap-sm); flex:0 0 auto;
}
#a41-fourstar-modal #a41-mults{ grid-area:mults; }
#a41-fourstar-modal #a41-clear{ grid-area:clear; width:100%; }
#a41-fourstar-modal #a41-submit{ grid-area:submit; width:100%; }
#a41-fourstar-modal #a41-rand{ grid-area:rand; width:100%; }

/* 通用按鈕 */
.neon-btn{
  appearance:none; border-radius:var(--a41-radius-sm); font-weight:700; cursor:pointer; color:#eafaff;
  border:1px solid transparent;
  background:linear-gradient(135deg, rgba(168,85,247,.35), rgba(53,232,255,.25)) padding-box, var(--a41-ring) border-box;
  padding:calc(10px * var(--a41-scale)) calc(12px * var(--a41-scale));
  font-size:calc(14px * var(--a41-scale));
  box-shadow:0 0 0 1px rgba(53,232,255,.18) inset, 0 6px 16px rgba(0,0,0,.18);
  transition: transform .08s ease, box-shadow .18s ease, filter .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.neon-btn:hover{ transform:translateY(-1px); box-shadow:0 0 0 1px rgba(53,232,255,.28) inset, 0 8px 22px rgba(53,232,255,.20); filter:saturate(1.06); }
.neon-btn:disabled{ opacity:.6; cursor:not-allowed; }
.neon-btn:focus-visible{ outline:2px solid var(--a41-cyan); outline-offset:2px; }

/* 倍率按鈕：固定 3 欄 × 2 排 GRID */
#a41-fourstar-modal .a41-mults{
  display:grid;
  grid-template-columns: repeat(3, minmax(calc(54px * var(--a41-scale,1)), 1fr));
  grid-auto-rows: 1fr;
  gap:6px;
  justify-items:stretch;
  align-items:stretch;
  padding:0 2px;
}
#a41-fourstar-modal .a41-mults .neon-btn{
  width:100%; min-width:0;
  padding:calc(6px * var(--a41-scale,1)) calc(8px * var(--a41-scale,1));
  font-size:calc(13px * var(--a41-scale,1));
  font-weight:800;
}
@media (max-width: 360px){
  #a41-fourstar-modal .a41-mults .neon-btn{
    font-size:calc(12px * var(--a41-scale,1));
  }
}

/* 被選中的倍率：黃色高亮 */
#a41-fourstar-modal .a41-mults .neon-btn.active,
#a41-fourstar-modal .a41-mults .a41-m.neon-btn[aria-pressed="true"]{
  background: linear-gradient(180deg, #fde047 0%, #facc15 100%) !important;
  color: #1f2937 !important;
  border-color: #f59e0b !important;
  box-shadow:
    0 0 0 1px rgba(245,158,11,.45) inset,
    0 6px 18px rgba(234,179,8,.35),
    0 0 0 2px rgba(245,158,11,.28) inset;
  filter: none;
}
#a41-fourstar-modal .a41-mults .neon-btn.active:focus-visible{
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}

/* 小螢幕維持兩列結構 */
@media (max-width: 360px){
  #a41-fourstar-modal .a41-actions{
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "mults mults mults" "clear submit rand";
  }
}

/* Meta */
.a41-meta{
  text-align:center; font-size:calc(14px * var(--a41-scale)); color:var(--a41-muted);
  margin-bottom:calc(6px * var(--a41-scale)); flex:0 0 auto;
}

/* 歷史區塊暫時隱藏 */
#a41-fourstar-modal .a41-history{ display:none !important; }

@media (prefers-reduced-motion: reduce){ .neon-btn{ transition:none; } }

@supports (height: 1dvh){
  #a41-fourstar-modal .a41-dialog{ max-height: calc(100dvh - var(--a41-modal-offset) - 6vh); }
}
@media (max-width: 480px){ #a41-fourstar-modal .a41-dialog{ --a41-visible: 4; } }

/* === Notify Center（置中確認彈窗） ============================ */
#a41-notify{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(0,0,0,.64);
  backdrop-filter:blur(3px);
  z-index:1500;
}
#a41-notify.show{ display:grid; }

.a41-n-box{
  width: clamp(260px, 86vw, 340px);
  color: var(--a41-fg);
  border-radius:16px;
  padding:18px 14px 14px;
  border:1px solid transparent;
  background:
    linear-gradient(rgba(11,17,32,.96), rgba(11,17,32,.96)) padding-box,
    var(--a41-ring) border-box !important;
  box-shadow:
    0 12px 44px rgba(0,0,0,.45),
    0 0 20px rgba(53,232,255,.40),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 0 2px rgba(53,232,255,.85) inset;
  text-align:center; transform:translateY(8px) scale(.98); opacity:0;
  transition:transform .18s ease, opacity .18s ease;
  color:#f8fafc;
  text-shadow:0 0 10px rgba(53,232,255,.35), 0 0 18px rgba(168,85,247,.18);
}
#a41-notify.show .a41-n-box{ transform:none; opacity:1; }

.a41-n-title{
  font-weight:800; font-size:18px; margin-bottom:8px; color:#ffffff;
  text-shadow:0 0 8px rgba(53,232,255,.45), 0 0 18px rgba(53,232,255,.25);
}
#a41-notify .a41-n-msg{
  font-size:14px; color:#e6f3ff;
  margin:4px 6px 14px; line-height:1.65; letter-spacing:.02em;
  text-shadow:0 0 6px rgba(0,0,0,.35);
  overflow-wrap:anywhere;
}
#a41-notify .a41-n-msg b, #a41-notify .a41-n-msg strong{
  color:#ffffff; text-shadow:0 0 10px rgba(53,232,255,.55); font-weight:800;
}

#a41-notify .a41-n-ok{
  -webkit-appearance:none; appearance:none;
  width:100%; height:44px;
  border:none; border-radius:12px;
  cursor:pointer; color:#eafaff; font-weight:800; font-size:15px; letter-spacing:.02em;
  background:linear-gradient(90deg, #10b981, #6366f1);
  box-shadow:
    0 6px 18px rgba(53,232,255,.28),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 0 2px rgba(53,232,255,.28) inset;
  transition: transform .08s ease, filter .18s ease, box-shadow .18s ease;
}
#a41-notify .a41-n-ok:hover{
  filter:saturate(1.08); transform:translateY(-1px);
  box-shadow:
    0 8px 22px rgba(53,232,255,.34),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 0 2px rgba(53,232,255,.34) inset;
}
#a41-notify .a41-n-ok:active{ transform:translateY(0) scale(.98); }
#a41-notify .a41-n-ok:disabled{ opacity:.6; cursor:not-allowed; }
#a41-notify .a41-n-ok:focus-visible{ outline:2px solid var(--a41-cyan); outline-offset:2px; }

#a41-notify .a41-n-box.error .a41-n-ok{
  background:linear-gradient(90deg, #ef4444, #f59e0b);
  box-shadow:
    0 6px 18px rgba(245,158,11,.28),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 0 2px rgba(245,158,11,.28) inset;
}

@media (prefers-reduced-motion: reduce){
  #a41-notify .a41-n-box{ transition:none; }
}
@media (prefers-contrast: more){
  #a41-notify .a41-n-box{
    background:
      linear-gradient(rgba(11,17,32,.985), rgba(11,17,32,.985)) padding-box,
      var(--a41-ring) border-box !important;
    box-shadow:
      0 12px 48px rgba(0,0,0,.50),
      0 0 24px rgba(53,232,255,.55),
      0 0 0 1px rgba(255,255,255,.10) inset,
      0 0 0 2px rgba(53,232,255,.95) inset;
  }
  #a41-notify .a41-n-msg{ color:#ffffff; }
}