/* static/css/a20.css ------------------------------------------------- */

/* ======= a20 背景遮罩 & 動畫 ======= */
.a20-modal{
  display:none;
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index:10000;
  align-items:center;
  justify-content:center;
  /* 左右保留距離（含 iOS 安全區域） */
  padding-left:  calc(env(safe-area-inset-left) + 12px);
  padding-right: calc(env(safe-area-inset-right) + 12px);
}
.a20-modal.open{display:flex;}
@keyframes a20-fadeIn{from{background:rgba(0,0,0,0);}to{background:rgba(0,0,0,.6);}}

/* ======= a20 Modal 內容 & 科幻裝飾 ======= */
.a20-modal .modal-content{
  position:relative;
  box-sizing: border-box;
  /* 響應式寬度，確保左右至少各 12px 留白 */
  width:min(280px, calc(100vw - 24px));
  max-width:100%;
  margin:0 auto;

  padding:24px 20px;
  background:rgba(20,20,40,.95);
  border:2px solid transparent;     /* 由 ::after 畫霓虹邊框 */
  border-radius:12px;
  box-shadow:0 0 12px rgba(0,255,255,.5),0 0 24px rgba(255,0,255,.3),inset 0 0 8px rgba(0,255,255,.2);
  overflow:hidden;
  font-family:'Orbitron',sans-serif;
  animation:a20-pulse 3s ease-in-out infinite alternate;
  z-index:0;
  isolation:isolate;                 /* 確保偽元素層級正確 */
}
/* 霓虹邊框（取代 border-image，避免頂/底邊線消失） */
.a20-modal .modal-content::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:2px;                        /* 想要更細可改 1px */
  background:linear-gradient(135deg,#00ffff,#ff00ff,#00ffff);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
  z-index:1;
}
@keyframes a20-pulse{
  from{box-shadow:0 0 12px rgba(0,255,255,.4),0 0 24px rgba(255,0,255,.2);}
  to  {box-shadow:0 0 24px rgba(0,255,255,.8),0 0 48px rgba(255,0,255,.6),inset 0 0 12px rgba(0,255,255,.3);}
}
/* 科幻網格疊層 */
.a20-modal .modal-content::before{
  content:"";pointer-events:none;position:absolute;inset:0;
  background:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0,
             linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0;
  background-size:20px 20px;mix-blend-mode:overlay;
  z-index:0;
}

/* ===== a20 Modal 上方分頁按鈕 ===== */
.a20-modal .modal-content .a20-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:16px;}
.a20-modal .modal-content .a20-tab-btn{flex:1;padding:8px 0;background:transparent;border:none;font-family:'Orbitron',sans-serif;color:#0ff;cursor:pointer;position:relative;transition:color .2s;}
.a20-modal .modal-content .a20-tab-btn:hover{color:#fff;}
.a20-modal .modal-content .a20-tab-btn.active{font-weight:bold;}
.a20-modal .modal-content .a20-tab-btn.active::after{content:"";position:absolute;bottom:-4px;left:20%;width:60%;height:3px;background:linear-gradient(135deg,#00ffff,#ff00ff);border-radius:2px;}

/* ======= a20 標題 ======= */
.a20-modal .modal-content h2{
  margin:0 0 12px;font-size:1.4rem;color:#0ff!important;text-align:center;
  text-shadow:0 0 8px #0ff,0 0 16px #f0f,0 0 24px #0ff;
  animation:a20-titleGlow 1.5s ease-in-out infinite alternate;
}
@keyframes a20-titleGlow{
  from{ text-shadow:0 0 6px #0ff,0 0 12px #f0f; }
  to  { text-shadow:0 0 12px #0ff,0 0 24px #f0f; }
}

/* ======= a20 文本提示 ======= */
.a20-modal .modal-content p{margin:0 0 16px;font-size:14px;color:#0ff!important;line-height:1.5;text-shadow:0 0 4px rgba(0,0,0,.6);}

/* ======= a20 輸入框 ======= */
.a20-modal input[type=number]{display:block;margin:0 auto 20px;width:80px;padding:6px;font-size:1rem;text-align:center;border:1px solid #666;border-radius:4px;background:rgba(0,0,0,.75);color:#fff;}
.a20-modal input[type=number]::-webkit-outer-spin-button,
.a20-modal input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.a20-modal input[type=number]{-moz-appearance:textfield;}

/* ======= a20 按鈕群 ======= */
.a20-modal .modal-buttons{display:flex;gap:12px;}
.a20-modal .modal-buttons button{position:relative;flex:1;padding:8px 0;font-size:.9rem;border:none;border-radius:6px;cursor:pointer;color:#fff;overflow:hidden;transition:transform .2s;}
.a20-modal .modal-buttons button::after{
  content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);
  transform:skewX(-25deg);transition:left .5s;
}

/* ======= 確認/取消 ======= */
.a20-confirm-btn{background:linear-gradient(90deg,#34d399,#60a5fa);filter:drop-shadow(0 0 6px rgba(52,211,153,.7)) drop-shadow(0 0 12px rgba(96,165,250,.7));}
.a20-confirm-btn:hover{transform:translateY(-2px);}
.a20-confirm-btn:hover::after{left:200%;}
.a20-cancel-btn{
  background:linear-gradient(90deg,#777,#aaa);
  filter:drop-shadow(0 0 4px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(200,200,200,.6)) drop-shadow(0 0 12px rgba(150,150,150,.4));
}
.a20-cancel-btn:hover{transform:translateY(-2px);}
.a20-cancel-btn:hover::after{left:200%;}

/* ======= 關閉 (×) ======= */
.a20-modal .close{position:absolute;top:12px;right:12px;font-size:20px;color:rgba(255,255,255,.7);cursor:pointer;transition:transform .2s,color .2s;}
.a20-modal .close:hover{color:#fff;transform:rotate(90deg);}

/* ======= 選號網格（同時支援 id 與 class） ======= */
.number-grid, #number-grid{
  display:grid;grid-template-columns:repeat(4,52px);gap:6px;justify-content:center;margin:0 auto;
  max-height:54vh;overflow-y:auto;overscroll-behavior:contain;overflow-x:hidden;touch-action:pan-y;
  scrollbar-width:thin;scrollbar-color:#00ffff00 transparent;contain:paint;padding:0 8px;box-sizing:border-box;
}
.number-grid::-webkit-scrollbar{width:6px;}
.number-grid::-webkit-scrollbar-track{background:transparent;}
.number-grid::-webkit-scrollbar-thumb{background:linear-gradient(#00ffff,#ff00ff);border-radius:4px;}

/* ─── 號碼格 ───────────────────────────────────── */
.num-btn{
  position:relative;width:52px;height:52px;border-radius:6px;
  font-size:14px;color:#fff;background:#000;cursor:pointer;will-change:transform;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.num-btn::before{
  content:"";position:absolute;inset:0;padding:2px;border-radius:6px;
  background:linear-gradient(135deg,#00ffff,#ff00ff);   /* 預設會被各狀態覆蓋 */
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}

/* ---- 各狀態邊框顏色 ---- */
.num-available::before{background:linear-gradient(135deg,#00ffff,#008cff);}   /* 青／靛 */
.num-selected::before{background:linear-gradient(135deg,#3be0c2,#27d8a4);}   /* 青綠 */
.num-reserved::before{background:linear-gradient(135deg,#fbbf24,#ffda6b);}   /* 黃橙 */
.num-sold::before{background:linear-gradient(135deg,#ff00ff,#c800ff);}       /* 紫粉 */

.num-selected{background:rgba(51,191,163,.25);}
.num-reserved,.num-sold{cursor:not-allowed;}

/* ======= 霓虹二次確認彈窗（ID 與 class 皆支援） ======= */
.a20-confirm-mask, #a20-confirm-modal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter:blur(3px);
  z-index:11000;
  /* 左右保留距離（含 iOS 安全區域） */
  padding-left:  calc(env(safe-area-inset-left) + 12px);
  padding-right: calc(env(safe-area-inset-right) + 12px);
}
.a20-confirm-box, #a20-confirm-box{
  position:relative;
  box-sizing: border-box;
  width:min(260px, calc(100vw - 24px));
  max-width:100%;
  margin:0 auto;

  padding:24px 20px;background:rgba(20,20,40,.95);
  border:2px solid transparent;   /* 由 ::after 畫霓虹邊框 */
  border-radius:12px;
  box-shadow:0 0 12px rgba(0,255,255,.4),0 0 24px rgba(255,0,255,.2);
  text-align:center;font-family:'Orbitron',sans-serif;
  z-index:0;
  isolation:isolate;
}
/* 霓虹邊框（取代 border-image） */
.a20-confirm-box::after, #a20-confirm-box::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit; padding:2px;
  background:linear-gradient(135deg,#00ffff,#ff00ff,#00ffff);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
  z-index:1;
}
#a20-confirm-text{white-space:pre-line;color:#0ff;margin-bottom:20px;font-size:14px;line-height:1.6;}
.a20-confirm-buttons{display:flex;gap:16px;justify-content:center;}
.a20-confirm-buttons .a20-confirm-btn,
.a20-confirm-buttons .a20-cancel-btn{flex:1;padding:8px 0;font-size:.9rem;border:none;border-radius:6px;cursor:pointer;color:#fff;}
.a20-confirm-buttons .a20-confirm-btn{background:linear-gradient(90deg,#34d399,#60a5fa);}
.a20-confirm-buttons .a20-cancel-btn{background:linear-gradient(90deg,#777,#aaa);}

/* ======= 已選張數霓虹字 ======= */
.a20-selected-info{
  display:block; text-align:center;
  color:#00ffff;
  text-shadow:0 0 8px  #00ffff, 0 0 16px #ff00ff, 0 0 24px #00ffff;
  font-family:'Orbitron',sans-serif;
  font-size:16px;
  margin:12px 0 20px;
  animation:a20-titleGlow 1.5s ease-in-out infinite alternate;
}
.a20-selected-info #selected-count{ color:inherit; text-shadow:inherit; }

/* ======= 自製 Toast（通用提示彈窗） ======= */
.a20-toast { 
  display: none; position: fixed; inset: 0; 
  background: rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  z-index: 10050; align-items: center; justify-content: center;
}
.a20-toast.open { display: flex; }

.a20-toast-card {
  width: min(320px, calc(100vw - 32px));
  background: rgba(20,20,40,.95);
  border: 2px solid transparent;
  border-image: linear-gradient(135deg, #00ffff, #ff00ff, #00ffff) 1;
  border-radius: 12px;
  padding: 16px 16px 14px;
  box-shadow:
    0 0 12px rgba(0,255,255,.5),
    0 0 24px rgba(255,0,255,.3),
    inset 0 0 8px rgba(0,255,255,.2);
  color: #fff;
  font-family: 'Orbitron', sans-serif;
}
.a20-toast-title {
  font-size: 16px; color: #0ff; text-align: center;
  margin: 4px 0 8px;
  text-shadow: 0 0 8px #0ff, 0 0 12px #ff00ff;
}
.a20-toast-msg {
  margin: 0 0 12px; text-align: center; line-height: 1.5;
  white-space: pre-line; overflow-wrap: anywhere; word-break: break-word;
}
.a20-toast-btn {
  display: block; width: 80%; max-width: 240px; margin: 0 auto;
  padding: 12px 0; font-size: 16px;
  color: #fff; background: linear-gradient(90deg, #34d399, #60a5fa);
  border: none; border-radius: 10px; cursor: pointer; position: relative; overflow: hidden;
  box-shadow: 0 0 6px rgba(52,211,153,.6), 0 0 12px rgba(96,165,250,.5);
  transition: transform .2s;
}
.a20-toast-btn::after {
  content: ""; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.3) 50%, transparent 100%);
  transform: skewX(-25deg); transition: left .5s;
}
.a20-toast-btn:hover { transform: translateY(-2px); }
.a20-toast-btn:hover::after { left: 200%; }