/* static/css/a40.css
   -------------------------------------------------------
   a40 : 官方 LINE／社群分享 Modal
   ----------------------------------------------------- */

/* ========= 背景遮罩 & 動畫 ========= */
.a40-modal{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.80);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  z-index:1200;                 /* 高於 top / bottom 按鈕 */
  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);
  animation:a40-fadeIn .4s ease-out both;
}
.a40-modal.open{display:flex;}
@keyframes a40-fadeIn{
  from{background:rgba(0,0,0,0);}
  to  {background:rgba(0,0,0,.80);}
}

/* ========= 卡片 ========= */
.a40-modal .a40-modal-content{
  position:absolute;top:50%;left:50%;
  transform: translate(-50%, calc(-50% + -2vh));

  /* 寬度改為響應式，確保左右至少各 12px 留白 */
  box-sizing:border-box;
  width:min(360px, calc(100vw - 24px));
  max-width:100%;
  padding:24px 32px;
  margin:0 auto;

  background:rgba(20,20,45,.95);

  /* 邊框改由 ::after 畫，避免頂/底邊線在部分裝置消失 */
  border:2px solid transparent;    /* 保留圓角半徑 */
  border-radius:12px;
  isolation:isolate;
  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);
  font-family:'Orbitron',sans-serif;
  animation:a40-pulse 3s ease-in-out infinite alternate;
}
.a40-modal .a40-modal-content::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  /* 線條粗細：想更細可把 2px 改成 1px */
  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;
}
@keyframes a40-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);}
}

/* 網格格線 */
.a40-modal .a40-modal-content::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/20px 20px,
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/20px 20px;
  pointer-events:none;
  mix-blend-mode:overlay;
}

/* ========= 標題 ========= */
.a40-modal-title{
  margin:0 0 20px;
  font-size:1.35rem;
  color:#0ff;text-align:center;
  text-shadow:0 0 8px #0ff,0 0 16px #f0f;
  animation:a40-titleGlow 1.6s ease-in-out infinite alternate;
}
@keyframes a40-titleGlow{
  from{text-shadow:0 0 6px #0ff,0 0 12px #f0f;}
  to  {text-shadow:0 0 12px #0ff,0 0 24px #f0f;}
}

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

/* ========= 社群按鈕 Grid ========= */
.a40-share-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}

/* ========= 個別按鈕 ========= */
.a40-share-btn{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:48px;padding:10px 0;text-decoration:none;

  border:2px solid transparent;
  border-radius:8px;
  border-image:linear-gradient(135deg,#00ffff 0%,#ff00ff 100%) 1;

  background:#0a0f1f;
  box-shadow:none;

  transition:transform .25s, box-shadow .25s;
}
.a40-share-btn::before{
  content:"";position:absolute;inset:1px;border-radius:6px;
  background:linear-gradient(135deg,#00ffff22,#ff00ff22);
  opacity:0;transition:opacity .25s;
}

/* icon / 文字：關閉常態發光，色值微暗 */
.a40-share-btn span,
.a40-share-btn i{
  color:#00d4ff;            /* 比 #0ff 暗一階 */
  text-shadow:none;
  font-weight:600;font-size:.95rem;
}

/* Hover 效果 */
.a40-share-btn:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 10px rgba(0,255,255,.55),
    0 0 18px rgba(255,0,255,.45);
}
.a40-share-btn:hover::before{opacity:1;}
.a40-share-btn:hover span,
.a40-share-btn:hover i{
  color:#fff;text-shadow:0 0 2px #fff;
}