:root{
      --cp-bg: rgba(8, 10, 18, .86);
  --cp-bg1: rgba(11,16,32,.86);
  --cp-bg2: rgba(7,10,18,.90);
  --cp-text-dim: rgba(230,255,255,.72);
  --cp-line-strong: rgba(127,252,255,.28);
  --bg-0:#070A12;      /* 深底 */
  --bg-1:#0B1020;      /* 中深 */
  --bg-2:#06070D;      /* 更暗收邊 */
  --neon-cyan:#7ffcff;
  --neon-cyan-2:#00e5ff;
  --neon-mag:#ff3df7;
  --neon-violet:#8a5cff;
  --line: rgba(127,252,255,.35);
  --line-strong: rgba(127,252,255,.55);
  --header-h: clamp(56px, 11vw, 92px);
  --cp-bgA: rgba(11,16,32,.86);
  --cp-bgB: rgba(7,10,18,.92);
  --cp-cyan:#00e5ff;
  --cp-mag:#ff3df7;
  --cp-text: rgba(230,255,255,.90);
  --cp-dim:  rgba(230,255,255,.68);
  --cp-line: rgba(127,252,255,.18);
  --cp-line2: rgba(127,252,255,.28);
    --cp-dark:#070a12;
  --cp-glass: rgba(10,14,28,.62);
}

html, body {
  height: 100%;
  margin: 0;
  overflow: auto;
  overscroll-behavior: none;
}


.modal-content .status {
	font-size: 1.25rem;
	font-weight: bold;
	text-align: right;
}

.modal-content .complete {
	color: green;
}

.modal-content .failed {
	color: rgb(255, 0, 0);
}

.modal-content .pending {
	color: rgb(255, 230, 0);
}

body {
	background-color: #000000;
}

.button-group {
 display: flex;
 margin-right: auto;
 gap: 3px;
}

::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

::-webkit-scrollbar-thumb {
	background-color: #575755b7;
	border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #797979;
}

#app {
	background-color: #252525;
	max-width: 580px;
	margin: 0 auto;
	width: 100%;
}

body.with-panel-left-reveal .page, body.with-panel-left-reveal .bottom-toolbar
	{
	-webkit-transform: translate3d(calc(100% - 64px), 0, 0);
	transform: translate3d(calc(100% - 100px), 0, 0);
}

.panel--left {
	background-color: #000000;
	left: calc(-100% + 100px);
}

.panel {
	width: calc(100% - 100px);
}

/* 固定在上方的 Cyberpunk Header */
.header--fixed{
  height: 50px;
  max-width:580px;
  position: fixed; top:0; left:0; right:0; z-index: 1000;
  display: flex;
  margin: auto;
  align-items: center;
  justify-content: space-between;

  /* 深色金屬底 + 霓虹角落染色 */
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(0,229,255,.16) 0%, transparent 55%),
    radial-gradient(120% 180% at 100% 0%, rgba(255,61,247,.12) 0%, transparent 55%),
    linear-gradient(180deg, rgba(11,16,32,.92) 0%, rgba(7,10,18,.92) 55%, rgba(6,7,13,.92) 100%);

  /* 乾淨的陰影：不靠大光暈，靠層次 */
  box-shadow:
    0 10px 26px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(127,252,255,.10),
    inset 0 -1px 0 rgba(255,61,247,.08);

  /* 細霓虹邊框（HUD 感） */
  border: 1px solid rgba(127,252,255,.18);
  border-bottom-color: rgba(127,252,255,.28);
  border-radius: 0 0 14px 14px;

  color: rgba(230,255,255,.92);
  backdrop-filter: saturate(1.2) blur(6px);
}

/* 上緣細線（像面板接縫） */
.header--fixed::before{
  content:"";
  position:absolute;
  left:10px; right:10px; top:0px; height:1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(127,252,255,.55),
    rgba(255,61,247,.25),
    transparent
  );
  opacity:.9;
  pointer-events:none;
}

/* 底部細霓虹線（取代原本金線） */
.header--fixed::after{
  content:"";
  position: absolute; left:0; right:0; bottom:-1px; height:2px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,229,255,.55) 18%,
      rgba(255,61,247,.45) 50%,
      rgba(0,229,255,.55) 82%,
      transparent 100%
    );
  opacity:.9;
  pointer-events: none;
}

/* 掃描線 + 微雜訊（很淡，不會糊） */
.header--fixed{
  background-blend-mode: screen, screen, normal;
}
.header--fixed > *{
  position: relative;
  z-index: 2;
}
.header--fixed .hud-noise,
.header--fixed .hud-scan{
  pointer-events:none;
}




.page__content{
  margin-top: 40px;
  /* 讓中間這塊自己滾，不影響背景 */
  height: calc(100dvh -80px);
  overflow: auto;
  overscroll-behavior: none;

  position: relative;
  z-index: 1;      
  background: transparent; 
}
.page__content::before{
  content:"";
  position: fixed;   
  inset: 0;
  z-index: 0;
  pointer-events: none;
    max-width: 580px;
    margin: auto;
  background:
    linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.8)),
    url('../images/background.png') center center / cover no-repeat;
	
}

.account-info__stats {
	padding-top: 0px;
	font-size: 1.2rem;
}

.account-info {
	width: 100% ;
	padding: 0;
	text-align: center;
	position: relative;
}

.icon-locked {
	height: 20px;
	margin-right: 0;
	width: 20px;
}

.icon-tokens-1 {
	height: 20px;
	margin-right: 0;
	width: 20px;
}

.icon-diamond {
	height: 20px;
	margin-right: 0;
	width: 20px;
}

#container {

}



.toggle-contain {
	flex-grow: 1;
	flex-basis: 90%;
}

#reward-contain {
	background: #000000a8;
}

#messages {
	overflow-y: auto;
}


/* .received {
    background-color: #515151ad;
    color: #fff;
    padding: 10px;
    margin: 5px 0;
    border-radius: 17px;
    clear: both;
    max-width: 85%;
    float: left;
    overflow-wrap: break-word;
    word-break: break-all;
} */
.message-content {
	display: flex;
	flex-direction: column;
}

.sender-name {
	font-size: 10px;
	color: white;
}

/* .sent {
    background-color: #00cf0e5c;
    color: #fff;
    margin: 3px 0;
    padding: 10px;
    border-radius: 17px;
    max-width: 85%;
    float: right;
    overflow-wrap: break-word;
    word-break: break-all;
} */
.botmessage {
	color: #fff;
	margin: 3px 0;
	padding: 10px;
	border-radius: 5px;
	clear: both;
	max-width: 100%;
	justify-content: center;
	word-wrap: break-word;
	text-align: center;
	display: flex;
	align-items: center;
}

.botmessage p {
	padding: 0;
}

.botmessage hr {
	border: 1px white;
	border-top-style: dashed;
}

.reward-message {
	width: 100%;
	place-content: center;
}

.nav-item {
	position: relative;
	font-size: .813rem;
	transition: 120ms ease-in-out;
	height: 52px;
	justify-content: center;
	margin-left: 0;
	overflow: hidden;
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: rgba(255, 255, 255, .5);
	cursor: pointer;
}

.nav-item svg {
	width: 100%;
	height: auto;
	padding: 12px;
}

.select {
	color: #fff;
	box-shadow: inset 2px 0 #05977e;
}

.header__icon {
	display: flex;
}

#bet-contain {
	text-align: -webkit-center;
}

/* .square-container {
    font-family: "標楷體", KaiTi, sans-serif;
    width: 100%;
    height: 30vh;
    background-color: #00cf0e;
    display: flex;
    flex-direction: column;
} */
.main-nav ul {
	list-style-type: none;
	padding: 0;
}

.main-nav ul li {
	display: grid;
	/* 使用 Grid 布局 */
	grid-template-columns: repeat(3, 1fr);
	/* 创建3列 */
	margin: 0;
	padding: 15px 0;
	border-top: 1px solid #cccccc4a;
	cursor: pointer;
	transition: background-color 0.3s;
	flex-direction: column;
}

.main-nav li:hover {
	background-color: #f0f0f0;
}

.details {
	display: none;
	padding: 10px 0px !important;
	margin-top: 5px;
	grid-column: span 3;
	grid-template-columns: repeat(3, 1fr);
	/* 宽度铺满整个 li */
}

.details ul {
	display: none;
}

.details li {
	background-color: #f9f9f921;
}

.details span {
	margin-bottom: 5px;
	display: table-cell;
	text-align: center;
}

.main-nav li:hover {
	background-color: transparent;
}

.main-nav ul li span {
	display: table-cell;
	text-align: center;
}

.expand-icon {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	cursor: pointer;
}

.timestamp {
	color: #bdbdbd;
	font-size: 8px;
	align-self: flex-end;
	white-space: nowrap;
}

.messageTitle {
	color: #06e6ff;
	text-shadow: 0 0 3px white;
}

.messageTitle img {
	width: 30px;
	vertical-align: middle;
	padding: 0 5px;
}

.account-buttons {
	width: 50%;
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: end;
	top: 10px;
}

.account-buttons a {
	display: block;
	width: 50px;
	height: 50px;
	background-color: #291f57;
	color: #47e7ce;
	text-align: center;
	border-radius: 100%;
	font-size: 1rem;
	letter-spacing: 0.5px;
	margin: 0;
	box-shadow: 2px 2px 0px 0px #ffffff2b;
	font-weight: 600;
}

.account-buttons button {
	padding: 0.5em 1.5em;
	border: 0;
	font-size: 15px;
	color: #fff;
	border-radius: 0.5em;
	background-color: #57b;
	box-shadow: 0 0.3em #148;
	text-shadow: 1px 1px #148;
	cursor: pointer;
	font-weight: 800;
	margin-right: 20px;
}

.account-buttons button:hover {
	background-color: #456ab5;
	transform: translateY(0.1em);
	box-shadow: 0 0.2em #148;
}

.betAmount {
	position: relative;
	color: white;
	font-weight: 600;
	text-shadow: black 0px 0px 5px;
	z-index: 9;
	float: right;
}



/* Loading页面的样式 */
.loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 1);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	transition: opacity 0.5s;
}

.loading-back {
	position: relative;
	display: inline-block;
}

.loading-back::before{
  content:"";
  position:absolute;
  inset:-24px;           /* 比圖大一圈，暈開才自然 */
  z-index:3;
  pointer-events:none;

  /* ✅ 上下淡出強、左右淡出弱 */
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.95) 0%,
      rgba(0,0,0,0) 18%,
      rgba(0,0,0,0) 82%,
      rgba(0,0,0,.95) 100%
    );

  filter: blur(14px);
  opacity: .9;
}


.loading-back::after{
  content:"";
  position:absolute;
  inset:-18px;                /* 比圖片大一圈，讓暈開 */
  z-index: 3;
  pointer-events:none;

  background: radial-gradient(circle at center,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,.55) 78%,
    rgba(0,0,0,.9) 100%
  );
  filter: blur(10px);
  opacity: .85;
}
.loading-back img{
  display:block;
  position:relative;
  z-index:2;
  margin:auto;

  height: 40vh;     
  width: auto;      

  -webkit-mask-image: radial-gradient(ellipse 110% 70% at 50% 50%,
    rgba(0,0,0,1) 58%,
    rgba(0,0,0,.85) 70%,
    rgba(0,0,0,.35) 84%,
    rgba(0,0,0,0) 100%
  );
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;

  mask-image: radial-gradient(ellipse 110% 70% at 50% 50%,
    rgba(0,0,0,1) 58%,
    rgba(0,0,0,.85) 70%,
    rgba(0,0,0,.35) 84%,
    rgba(0,0,0,0) 100%
  );
  mask-repeat:no-repeat;
  mask-size:100% 100%;
}

.loading-container {
	position: absolute;
	z-index: 9;
	text-align: center;
}

.loading-icon img {
	width: 100px;
}

.loading-text {
	font-size: 24px;
	margin-top: 20px;
}

.dot1, .dot2, .dot3 {
	width: 10px;
	height: 10px;
	padding: 10p;
	margin: 5px;
	border-radius: 5px;
	background-color: white;
	animation: bounce 1s infinite;
	opacity: 0;
	display: inline-block;
}

.dot2 {
	animation-delay: 0.2s;
}

.dot3 {
	animation-delay: 0.4s;
}

@keyframes bounce { 0%, 80%, 100% {
	opacity: 0;
}

40%
{
opacity
:
1;
}
}

.notify-message h2 {
	text-align: center;
	padding: 0;
	font-weight: bold;
	background: -webkit-linear-gradient(45deg, rgb(241 241 241) 20%,
		rgb(228, 233, 153), rgb(255, 179, 0) 90%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #978170;
}

.notify-message p {
	line-height: 2;
}

.notifyModal .modal-close {
	position: absolute;
	top: 0px;
	right: 0px;
	cursor: pointer;
	width: 36px;
	height: auto;
}

.notifyModal {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	z-index: 999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.4);
}

.notifyModal .modalcontent {
	margin: 15% auto;
	padding: 20px;
	border: 5px outset #f7ebac;
	width: 70%;
	max-width: 360px;
	animation-name: animatetop;
	animation-duration: 0.4s;
	position: relative;
	border: 2px solid transparent; /* 背景边框 */
	animation: 2s gradient-angle infinite linear;
	background-image: linear-gradient(to bottom, #001f3f, /* 深蓝 */
        #005f9f /* 荧光蓝 */
      ), conic-gradient(from var(--gradient-angle, 0deg), #00d9ff 0%,
		/* 荧光蓝 */
        #001f3f 37%, /* 深蓝 */
        #001f3f 50%, #00d9ff 77%, #005f9f 100%);
	background-clip: padding-box, border-box;
	background-origin: padding-box, border-box;
}

.notifyModal span {
	color: #994b07;
	text-align-last: center;
	font-weight: bold;
	text-shadow: 0px 0px 2px rgb(0 0 0/ 40%);
}

@keyframes animatetop {from { top:-300px;
	opacity: 0
}

to {
	top: 0;
	opacity: 1
}

}

#passwordFields {
	transition: opacity 0.5s ease-in-out;
	opacity: 0;
	height: 0;
	overflow: hidden;
}

#passwordFields.visible {
	opacity: 1;
	height: auto;
}
/* ===== 以同一套 modal 外框為基底，以下只處理內部 form 風格 ===== */

/* =========================
   Profile Modal — Cyberpunk kit
   ========================= */
#profileModal{
  --cy-cyan: rgba(0,229,255,.95);
  --cy-cyan-soft: rgba(0,229,255,.28);
  --cy-mag: rgba(255,61,247,.90);
  --cy-mag-soft: rgba(255,61,247,.24);
  --cy-amber: rgba(255,200,70,.88);
  --cy-bg1: rgba(10,12,18,.80);
  --cy-bg2: rgba(8,10,14,.92);
  --cy-line: rgba(255,255,255,.12);
  --cy-text: rgba(248,252,255,.94);
  --cy-muted: rgba(200,214,235,.84);
}

/* ===== 相機上傳徽章：霓虹圓按鈕 ===== */
#profileModal .upload-badge{
  position:absolute; right:-10px; bottom:-10px;
  width: 46px; height: 46px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;

  color: rgba(5,8,14,.96);
  background:
    radial-gradient(120% 120% at 50% 30%, rgba(255,255,255,.22), transparent 58%),
    linear-gradient(135deg, rgba(0,229,255,.92), rgba(255,61,247,.76));
  border: 1px solid rgba(255,255,255,.18);

  box-shadow:
    0 14px 32px rgba(0,0,0,.55),
    0 0 18px rgba(0,229,255,.18),
    0 0 14px rgba(255,61,247,.12),
    inset 0 1px 0 rgba(255,255,255,.14);

  cursor:pointer;
  transition: transform .10s ease, box-shadow .18s ease, filter .18s ease;
}
#profileModal .upload-badge:hover{
  transform: translateY(-1px);
  filter: saturate(1.08);
  box-shadow:
    0 18px 40px rgba(0,0,0,.62),
    0 0 22px rgba(0,229,255,.22),
    0 0 18px rgba(255,61,247,.16),
    inset 0 1px 0 rgba(255,255,255,.18);
}
#profileModal .upload-badge:active{ transform: translateY(1px) scale(.98); }
#profileModal .upload-badge i{ font-size: 1.25rem; filter: drop-shadow(0 0 10px rgba(255,255,255,.18)); }

/* ===== 標籤與欄位 ===== */
#profileModal .form-field{
  display:flex; flex-direction: column;
  margin-bottom: 2.1rem; /* 比原本稍微收緊 */
}
#profileModal .form-inline{ flex-direction: row; align-items: center; gap:.55rem; }
#profileModal .inline-label{ margin:0; line-height: 1; color: var(--cy-text); opacity:.9;     padding: 0;}

/* 標籤：亮白 + 淡霓虹邊 */
#profileModal .form-field > label{
  margin-bottom: .45rem;
  font-weight: 900;
  letter-spacing: .10em;
  color: var(--cy-text);
  text-shadow: 0 0 10px rgba(0,229,255,.08);
  
}

/* ===== 輸入：霧黑玻璃 + 霓虹聚焦（不厚重） ===== */
#profileModal input[type="text"],
#profileModal input[type="password"]{
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, var(--cy-bg1), var(--cy-bg2));
  color: rgba(248,252,255,.94);

  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: .66rem .78rem;
  font-size: 1rem;

  box-shadow:
    inset 0 10px 18px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,255,255,.03);

  transition: border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}
#profileModal input::placeholder{ color: rgba(200,214,235,.60); opacity: .85; }

#profileModal input:hover{
  border-color: rgba(0,229,255,.26);
  box-shadow:
    inset 0 10px 18px rgba(0,0,0,.50),
    0 0 14px rgba(0,229,255,.08);
}

#profileModal input:focus{
  outline: none;
  border-color: rgba(0,229,255,.34);
  box-shadow:
    inset 0 10px 18px rgba(0,0,0,.54),
    0 0 0 3px rgba(0,229,255,.14),
    0 0 22px rgba(255,61,247,.10);
  filter: saturate(1.05);
}

/* ===== Checkbox：霓虹方塊（青框 + 紫勾） ===== */
#profileModal .passCheck{
  width: 26px; height: 26px;
  position: relative; border-radius: 7px;

  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(180deg, rgba(10,12,18,.78), rgba(8,10,14,.92));
  border: 1px solid rgba(0,229,255,.26);

  box-shadow:
    inset 0 10px 18px rgba(0,0,0,.48),
    0 0 14px rgba(0,229,255,.08);
}
#profileModal .passCheck input{ visibility:hidden; }

#profileModal .passCheck label{
  position:absolute; inset:2px; border-radius: 5px;
  background:
    linear-gradient(135deg, rgba(0,229,255,.35), rgba(255,61,247,.22));
  opacity:.10;
  transition: opacity .16s ease, box-shadow .16s ease, filter .16s ease;
}

#profileModal .passCheck label::after{
  content:"";
  position:absolute; left:7px; top:3px;
  width:7px; height:13px;
  border: solid rgba(248,252,255,.95);
  border-width:0 3px 3px 0;
  transform: rotate(45deg);
  opacity:0;
  filter: drop-shadow(0 0 10px rgba(255,61,247,.22));
  transition: opacity .16s ease;
}

#profileModal .passCheck input:checked + label{
  opacity: 1;
  filter: saturate(1.1);
  box-shadow:
    0 0 18px rgba(0,229,255,.14),
    0 0 14px rgba(255,61,247,.12);
}
#profileModal .passCheck input:checked + label::after{ opacity:1; }

/* ===== 錯誤訊息：亮紅但不刺眼 ===== */
#profileModal .form-error{
  display:block;
  margin-top:.38rem;
  font-size:.92rem;
  color: rgba(255,170,170,.96);
  text-shadow: 0 0 10px rgba(255,80,80,.14);
}

/* ===== 儲存按鈕：霓虹切角（比金箔更賽博） ===== */
#profileModal .btn-save{
  width:100%;
  margin-top:.6rem;
  padding:.74rem 1rem;
  border: 1px solid rgba(255,255,255,.14);
  cursor:pointer;

  border-radius: 0;
  clip-path: polygon(12px 0%, 100% 0%, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0% 100%, 0% 12px);

  font-weight: 1000;
  letter-spacing:.14em;
  color: rgba(5,8,14,.96);

  background:
    radial-gradient(120% 120% at 50% 25%, rgba(255,255,255,.22), transparent 58%),
    linear-gradient(90deg, rgba(0,229,255,.92), rgba(255,61,247,.74));

  box-shadow:
    0 14px 34px rgba(0,0,0,.55),
    0 0 18px rgba(0,229,255,.16),
    0 0 14px rgba(255,61,247,.12),
    inset 0 1px 0 rgba(255,255,255,.14);

  transition: transform .10s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
}
#profileModal .btn-save:hover{
  transform: translateY(-1px);
  filter: saturate(1.08);
  box-shadow:
    0 18px 42px rgba(0,0,0,.62),
    0 0 22px rgba(0,229,255,.22),
    0 0 18px rgba(255,61,247,.16),
    inset 0 1px 0 rgba(255,255,255,.18);
}
#profileModal .btn-save:active{ transform: translateY(1px) scale(.98); }

#profileModal .btn-save:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0,229,255,.16),
    0 0 0 6px rgba(255,61,247,.10),
    0 18px 42px rgba(0,0,0,.62);
}

/* ===== RWD ===== */
@media (max-width:420px){
  #profileModal .profile-pic-container img{ width:112px; height:112px; }
  #profileModal .upload-badge{ width:42px; height:42px; right:-8px; bottom:-8px; }
}


.gameList {
	max-height: 50vh;
	overflow-y: auto;
}

.banner-container {
	overflow: hidden;
	max-width: 100%;
	margin: 0 auto;
}

.banner {
	display: flex;
	transition: transform 0.5s ease-in-out;
}

.banner img {
	width: 100%;
	flex-shrink: 0;
}

.gameBtn {
	position: relative;
	margin: 0 auto;
	margin: 15px;
}

ol {
	letter-spacing: 1px;
}
/* ===== Cyberpunk Footer (match header) ===== */
.app-footer{
  max-width: 560px;
  margin: 0 auto;

  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 160% at 0% 100%, rgba(0,229,255,.16) 0%, transparent 55%),
    radial-gradient(120% 160% at 100% 100%, rgba(255,61,247,.12) 0%, transparent 55%),
    linear-gradient(180deg, rgba(7,10,18,.92) 0%, rgba(6,7,13,.92) 100%),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.05) 0px,
      rgba(255,255,255,.05) 1px,
      rgba(255,255,255,0) 4px,
      rgba(255,255,255,0) 7px
    );

  background-blend-mode: screen, screen, normal, normal;

  /* 往上投影（黑系乾淨）＋ 內部細邊框質感 */
  box-shadow:
    0 -10px 26px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(127,252,255,.10),
    inset 0 -1px 0 rgba(255,61,247,.08);

  border: 1px solid rgba(127,252,255,.16);
  border-top-color: rgba(127,252,255,.28);
  border-radius: 14px 14px 0 0;

  color: rgba(230,255,255,.92);
  backdrop-filter: saturate(1.2) blur(6px);
}

/* 上緣霓虹細線（取代原本金線） */
.app-footer::before{
  content:"";
  position:absolute; left:0; right:0; top:-1px; height:2px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,229,255,.55) 18%,
      rgba(255,61,247,.45) 50%,
      rgba(0,229,255,.55) 82%,
      transparent 100%
    );
  opacity:.9;
  pointer-events:none;
}

/* 讓按鈕可放置底部文字 */
.footer-btn{
  position: relative;
}

/* ✅ Footer 文字：更明顯霓虹感 */
.footer-btn span{
  position: absolute;
  left: 50%;
  bottom: 4px;                 /* 文字貼在按鈕底部 */
  transform: translateX(-50%);
  margin: 0;

  font-size: 1.05rem;          /* 你要更大可 1.15rem */
  font-weight: 900;
  letter-spacing: .12em;

  color: rgba(255,255,255,.96);

  /* 霓虹光暈（青+粉） */
  text-shadow:
    0 0 6px rgba(0,229,255,.55),
    0 0 14px rgba(0,229,255,.28),
    0 0 6px rgba(255,61,247,.45),
    0 0 14px rgba(255,61,247,.22);
}

/* ✅ active / hover 再更亮一階 */
.footer-btn:hover span,
.footer-btn.active span,
.app-footer .active span{
  color: #ffffff;
  text-shadow:
    0 0 8px rgba(0,229,255,.70),
    0 0 18px rgba(0,229,255,.38),
    0 0 8px rgba(255,61,247,.58),
    0 0 18px rgba(255,61,247,.30);
}



.app-footer a:hover,
.app-footer button:hover{
  color: rgba(255,255,255,.98);
  filter: drop-shadow(1px 0 rgba(255,61,247,.25))
          drop-shadow(-1px 0 rgba(0,229,255,.20));
}


.footer-btn {
	flex: 1;
	text-align: center;
	background: none;
	border: none;
	outline: none;
	font-size: 0.9rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 5px;
	cursor: pointer;
	transition: color 0.3s ease, transform 0.3s ease;
	position: relative;
	top: -1.5rem;
	width: 20%;
	  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

.footer-btn img {
	width: 60%;
}


.footer-btn:hover {
	color: var(--gold-bright);
}

.footer-btn i {
	font-size: 1.75rem;
	margin-bottom: 2px;
}



.footer-btn.active img,
.app-footer .active img{
  filter: brightness(1.15) saturate(135%)
          drop-shadow(0 0 10px rgba(60, 228, 240, 0.35));
}

.container-content svg {
	position: absolute;
	top: 15%;
	left: 55%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
}

/* Tekststijl: vul met patroon, en gebruik dikkere stroke */
.container-content text {
	fill: url(#imagePattern);
	font-family: "Protest Guerrilla", sans-serif;
	font-size: 200px;
	letter-spacing: 5px;
	stroke: rgb(130, 217, 252);
	stroke-width: 1px;
	stroke-dasharray: 500;
	stroke-dashoffset: 500;
	filter: url(#glowFilter); /* Voeg gloedfilter toe */
}

@property --gradient-angle {
	syntax: "<angle>";
	initial-value: 0turn;
	inherits: false;
}

@keyframes gradient-angle {to { --gradient-angle:1turn;
	
}

}
.image-wrapper {
	position: relative;
	display: inline-block;
	overflow: hidden; /* 确保内容不会溢出容器 */
}

.image {
	width: 100%;
	display: block;
	-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 30%,
		rgba(0, 0, 0, 0) 100%);
	mask-image: radial-gradient(circle, rgb(0 0 0) 30%, rgb(0 0 0/ 0%) 100%);
	-webkit-mask-size: cover;
	mask-size: cover;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.theme-radial-gradient {
	background: radial-gradient(ellipse at 30% 30%, #59beff 0%, #39929b 50%, #28b8cf
		100%);
}

.app-footer .nav-link {
	position: relative;
	padding: 8px;
	height: 76px;
	width: 76px;
	margin: 0 auto;
	margin-top: -30px;
	transition: none;
	background: none;
	border: none;
	outline: none;
}

.app-footer .nav-link {
	text-align: center;
	background: transparent;
	align-self: center;
	-webkit-align-self: center;
	-moz-align-self: center;
	height: 100%;
	line-height: 44px;
	color: #96a1ff;
	padding: calc(var(--finwallapp-padding)- 5px)
		calc(var(--finwallapp-padding)- 10px);
}

.app-footer .nav-link>span {
	height: 60px;
	line-height: 59px;
	width: 60px;
	border-radius: 20px 20px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	margin: 0px auto 0 auto;
	color: #ffffff;
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
	-webkt-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
}

.app-footer .nav-link span {
	display: inline-block;
	vertical-align: middle;
}

.app-footer .nav-link>span i {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	display: inline-block;
	font-size: 22px;
    transform-origin: center center;
    animation: spin 3s linear infinite;
}

.bi-grid::before {
  content: "\f3fc";
}

[class^="bi-"]::before, [class*=" bi-"]::before {
	display: inline-block;
	font-family: bootstrap-icons !important;
	font-style: normal;
	font-weight: normal !important;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: -.125em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

}

@keyframes spin {
  from { transform: rotate(45deg);   }
  to   { transform: rotate(405deg);  /* 45° + 360° */ }
}

/* ===== Card -> HUD Panel (cut corners, not like old) ===== */
.card{
  position: relative;
  padding: 12px 14px;

  background:
    radial-gradient(140% 200% at 0% 0%, rgba(0,229,255,.14) 0%, transparent 55%),
    radial-gradient(140% 200% at 100% 0%, rgba(255,61,247,.12) 0%, transparent 55%),
    linear-gradient(180deg, var(--cp-bgA) 0%, var(--cp-bgB) 100%);

  border: 1px solid var(--cp-line);
  color: var(--cp-text);

  /* ✅ 切角，明顯不同 */
  clip-path: polygon(
    18px 0%,
    100% 0%,
    100% calc(100% - 18px),
    calc(100% - 18px) 100%,
    0% 100%,
    0% 18px
  );

  box-shadow:
    0 22px 58px rgba(0,0,0,.55),
    0 0 18px rgba(0,229,255,.10),
    0 0 14px rgba(255,61,247,.08),
    inset 0 1px 0 rgba(127,252,255,.10);
  backdrop-filter: blur(6px) saturate(1.2);
}

/* HUD 角落線條裝飾 */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    /* 左上角 */
    linear-gradient(90deg, rgba(0,229,255,.65), transparent 60%) 12px 12px/40px 2px no-repeat,
    linear-gradient(180deg, rgba(0,229,255,.65), transparent 60%) 12px 12px/2px 40px no-repeat,
    /* 右下角 */
    linear-gradient(270deg, rgba(255,61,247,.55), transparent 60%) calc(100% - 12px) calc(100% - 12px)/40px 2px no-repeat,
    linear-gradient(0deg, rgba(255,61,247,.55), transparent 60%) calc(100% - 12px) calc(100% - 12px)/2px 40px no-repeat;
  opacity:.85;
}

/* 掃描線（淡） */
.card::after{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.06) 0px,
    rgba(255,255,255,.06) 1px,
    rgba(255,255,255,0) 4px,
    rgba(255,255,255,0) 7px
  );
  opacity:.14;
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* 提领按钮样式 */
.withdraw-btn {
	display: block;
	margin: 10px auto;
	padding: 10px 20px;
	font-size: 1rem;
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.withdraw-btn:hover {
	background-color: #0056b3;
}

/* 卡片容器样式 */
.card-container {
	max-height: 400px;
	overflow-y: scroll; /* 横向滚动 */
}

.card-container::-webkit-scrollbar {
	height: 8px;
}

.card-container::-webkit-scrollbar-thumb {
	background: #007bff;
	border-radius: 10px;
}

.card-container::-webkit-scrollbar-track {
	background: #f0f0f0;
}

/* 卡片顶部序号 */
.card-header {
	font-size: 1.5rem;
	font-weight: bold;
	color: white;
}

/* 卡片主体内容 */
.card-body {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

/* 出金时间和金额 */
.card-body .detail {
	display: flex;
	flex-direction: row;
	gap: 5px;
	font-size: 1.25rem;
	padding: 0;
}

.time {
	color: #888;
}

.amount {
	color: #007bff;
	font-weight: bold;
}

/* 状态 */
.card .status {
	font-size: 1.25rem;
	font-weight: bold;
	text-align: right;
}

.card .complete {
	color: green;
}

.card .failed {
	color: rgb(255, 0, 0);
}

.card .pending {
	color: rgb(255, 230, 0);
}



/* ===== Tabs Container: slim HUD rail ===== */
.tab-buttons{
  width: min(90%, 580px);
  margin: 0 auto;
  margin-top: 3rem;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;

  padding: 10px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(120% 180% at 0% 0%, rgba(0,229,255,.12) 0%, transparent 55%),
    radial-gradient(120% 180% at 100% 0%, rgba(255,61,247,.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--cp-bgA) 0%, var(--cp-bgB) 100%);
  border: 1px solid rgba(127,252,255,.14);

  box-shadow:
    0 16px 34px rgba(0,0,0,.48),
    0 0 18px rgba(0,229,255,.08),
    0 0 14px rgba(255,61,247,.06),
    inset 0 1px 0 rgba(127,252,255,.10);
  backdrop-filter: blur(6px) saturate(1.2);
}

/* 容器掃描線（淡） */
.tab-buttons::after{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.06) 0px,
    rgba(255,255,255,.06) 1px,
    rgba(255,255,255,0) 4px,
    rgba(255,255,255,0) 7px
  );
  opacity:.14;
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* ===== Cut-corner Tab ===== */
.tab-btn{
  position: relative;
  overflow: hidden;
  cursor: pointer;

  padding: .95rem .6rem;
  color: var(--cp-dim);
  font-weight: 900;
  letter-spacing: .18em;
  font-size: 1rem;

  background:
    linear-gradient(180deg, rgba(8,10,18,.52) 0%, rgba(7,10,18,.34) 100%);
  border: 1px solid rgba(127,252,255,.16);

  /* 切角（關鍵） */
  clip-path: polygon(
    14px 0%,
    100% 0%,
    100% calc(100% - 14px),
    calc(100% - 14px) 100%,
    0% 100%,
    0% 14px
  );

  box-shadow:
    0 10px 22px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition:
    transform .12s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    filter .18s ease,
    background .18s ease;
}

/* 角落 HUD 短線（上左、下右） */
.tab-btn::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    /* 上左短線 */
    linear-gradient(90deg, rgba(0,229,255,.55), transparent 60%) 10px 10px/32px 2px no-repeat,
    linear-gradient(180deg, rgba(0,229,255,.55), transparent 60%) 10px 10px/2px 32px no-repeat,
    /* 下右短線 */
    linear-gradient(270deg, rgba(255,61,247,.45), transparent 60%) calc(100% - 10px) calc(100% - 10px)/32px 2px no-repeat,
    linear-gradient(0deg, rgba(255,61,247,.45), transparent 60%) calc(100% - 10px) calc(100% - 10px)/2px 32px no-repeat;
  opacity:.75;
}

/* 斜向能量條（hover/active 更明顯） */
.tab-btn::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-30%;
  width: 60%;
  height: 180%;
  background: linear-gradient(135deg,
    rgba(0,229,255,.18),
    rgba(255,61,247,.14),
    rgba(0,0,0,0)
  );
  transform: rotate(18deg);
  opacity:.35;
  pointer-events:none;
}

/* hover：框變亮、稍微浮起 */
.tab-btn:hover{
  color: rgba(255,255,255,.92);
  border-color: rgba(127,252,255,.30);
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px rgba(0,0,0,.38),
    0 0 14px rgba(0,229,255,.12),
    0 0 12px rgba(255,61,247,.09),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* active：亮框 + 霓虹內光 + 上緣能量線 */
.tab-btn.active{
  color: rgba(255,255,255,.98);
  border-color: rgba(127,252,255,.38);
  background:
    radial-gradient(120% 160% at 20% 0%, rgba(0,229,255,.16) 0%, transparent 55%),
    radial-gradient(120% 160% at 80% 0%, rgba(255,61,247,.14) 0%, transparent 55%),
    linear-gradient(180deg, rgba(8,10,18,.55) 0%, rgba(7,10,18,.38) 100%);

  box-shadow:
    0 18px 40px rgba(0,0,0,.44),
    0 0 18px rgba(0,229,255,.18),
    0 0 16px rgba(255,61,247,.14),
    inset 0 0 0 1px rgba(0,229,255,.10),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* active：上緣霓虹能量線 */
.tab-btn.active::after{
  opacity: .65;
}
.tab-btn.active span{ opacity: 1; }

/* 按下回饋 */
.tab-btn:active{
  transform: translateY(1px);
}

/* （可選）如果你希望 active 有更明顯的頂部霓虹條 */
.tab-btn.active .tab-glowbar{ display:none; } /* 你沒有這元素可忽略 */
.tab-btn.active{
  /* 額外上緣條用背景做 */
}
.tab-btn.active{
  background-image:
    linear-gradient(90deg,
      transparent,
      rgba(0,229,255,.70),
      rgba(255,61,247,.55),
      rgba(0,229,255,.70),
      transparent
    ),
    radial-gradient(120% 160% at 20% 0%, rgba(0,229,255,.16) 0%, transparent 55%),
    radial-gradient(120% 160% at 80% 0%, rgba(255,61,247,.14) 0%, transparent 55%),
    linear-gradient(180deg, rgba(8,10,18,.55) 0%, rgba(7,10,18,.38) 100%);
  background-size: 100% 2px, auto, auto, auto;
  background-position: 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
}


/* 内容区切换 */
.tab-contents {
  position: relative;
}
.tab-content-lobby {
  display: none;
  animation: fadeInContent 0.4s ease forwards;
}
.tab-content-lobby.active {
  display: block;
}

/* 内容淡入动画 */
@keyframes fadeInContent {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.transaction-type {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.5rem 1rem;
  background: rgba(10, 10, 30, 0.8);
  border-radius: 0.5rem;
  box-shadow:
    0 0 8px rgba(0,255,255,0.6),
    inset 0 0 12px rgba(0,255,255,0.3);
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  color: #00ffff;
  user-select: none;
  width: 70%;
  margin-left: 15%;
}

/* Label 样式 */
.transaction-type label {
  flex-shrink: 0;
  font-weight: bold;
  text-shadow:
    0 0 4px rgba(0,255,255,0.8),
    0 0 8px rgba(0,255,255,0.6);
}

/* 下拉框样式 */
.transaction-type select {
  flex-grow: 1;
  padding: 0.4rem 0.6rem;
  background: rgba(0,0,0,0.5);
  border: 1px solid #00ffff;
  border-radius: 0.25rem;
  color: #fff;
  font-family: inherit;
  font-size: 1.5rem;
  appearance: none;
  background-image:
    url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path fill='%23fff' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 10px 6px;
  box-shadow: inset 0 0 6px rgba(0,255,255,0.4);
  transition: box-shadow 0.2s;
}
.transaction-type select:focus {
  outline: none;
  box-shadow:
    0 0 12px rgba(0,255,255,0.8),
    inset 0 0 12px rgba(0,255,255,0.4);
}

/* 提领表单样式 */
.form-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 8px;
}

.card label {
	font-size: 1rem;
	color: #ffffff;
}

.card input[type="text"], .card input[type="number"] {
	padding: 10px;
	font-size: 1.5rem;
	border: 1px solid #004c4f;
	border-radius: 5px;
	outline: none;
	transition: border-color 0.3s;
	background: #08141e;
}

.card input[type="text"]:focus, .card input[type="number"]:focus {
	border-color: #00969b;
}

.copy-success-message {
	position: absolute; /* 绝对定位 */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* 水平垂直居中 */
	padding: 10px;
	color: #ffffff;
	background-color: #28a74587;
	border-radius: 5px;
	font-size: 1rem;
	text-align: center;
	animation: fadeInOut 3s ease forwards;
	z-index: 10; /* 确保显示在其他内容之上 */
}

@keyframes fadeInOut { 0% {
	opacity: 0;
}

10%
{
opacity
:
1;
}
90%
{
opacity
:
1;
}
100%
{
opacity
:
0;
}
}
.input-group {
	display: flex;
}

.tab-title {
	display: flex; /* 使用 Flexbox 布局 */
	flex-direction: column; /* 垂直排列 */
	align-items: center; /* 水平居中 */
	justify-content: center; /* 垂直居中 */
	text-align: center; /* 文本居中 */
	margin-top: 20px;
}

.title-container {
	position: relative;
	display: inline-block;
	width: 200px; /* 控制宽度 */
	height: 80px; /* 控制高度 */
	/* background: linear-gradient(to right, #001F3F, #012A5A);  */
	border-radius: 10px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* 添加阴影 */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: white;
	font-family: 'Arial', sans-serif;
}

.title-text {
	font-size: 2rem; /* 标题文字大小 */
	font-weight: bold;
	margin-bottom: 5px;
}

.number-win {
font-size: 2rem;
    font-weight: bold;
    color: #e5b849;
    text-shadow: 0px 0px 8px #dfbe56;
}

.number-lose {
	font-size: 2rem;
	font-weight: bold;
	color: #ff0000;
}

.card table th {
	color: #909090;
}

.card table th td {
	text-align: center;
}

.table-responsive {
	overflow-x: auto; /* 横向滚动 */
	-webkit-overflow-scrolling: touch; /* 平滑滚动，在移动设备上生效 */
}

table {
	white-space: nowrap; /* 禁止换行 */
}

.table-hover tbody tr:hover {
	background-color: #f5ff3233; /* 可选：在 hover 时高亮 */
}

.card-footer {
	padding: 10px;
	justify-content: space-between;
}

.paginationInfo {
	font-size: 0.9rem;
	color: gray;
}

.btn-sm {
	font-size: 0.85rem;
	padding: 5px 10px;
}

.modalcontent::before {
	position: absolute;
	content: "";
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 2.25rem;
	z-index: -1;
	border: 0.155rem solid transparent;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
}

.customModal .modalcontent {
	background: radial-gradient(ellipse at right top, #00458f8f 0%, #151419 45%, #151419
		100%);
}

.customModal .modalcontent::before {
	background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #1890ff)
		border-box;
}


.modal-body {
	position: relative;
	padding: 15px;
}


.banner {
  margin-bottom: 16px;
}


.game-categories {
  display: flex;
  gap: 12px;
  padding: 0 16px 16px;
      margin: 1rem 0;
}
.live-frame {
  position: relative;
  width: 600px;     
  height: 30px;   
  background: url("../images/title-border.png")
              no-repeat center center;
  background-size: contain;

}
.live-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  font-family: "Noto Sans TC", "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5em;
  line-height: 1;
  color: #f6d66a;
  text-shadow: 0 2px 6px rgba(36, 24, 8, 0.45);
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}

@media (max-width: 480px) {
  .live-text { font-size: 14px; letter-spacing: 0.5em; }
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  overflow: visible;
  margin-top: 2rem;
}

.game-wrapper {
  position: relative;
  overflow: visible;
}

/* —— 保留原 .game-item 和 .game-frame 样式 —— */
.game-item {
  position: relative;
  cursor: pointer;
  aspect-ratio: 16/9;
  overflow: visible;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 这是你原来的边框背景 */
.game-frame {
  position: absolute;
  inset: 0;
  background: url("../images/game-border2.png") no-repeat center center;
  background-size: contain;
  overflow: hidden;
}
.game-frame::after {
  content: "";
  position: absolute;
  inset: 7%;
  background: var(--thumb-url) no-repeat center center;
  background-size: contain;
  z-index: 1;
}

.game-detail {
    display: none;
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    aspect-ratio: 212 / 242;
    pointer-events: auto;
    z-index: 10;
    animation: popIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* 背景图全铺 */
.detail-bg {
  position: absolute;
  inset: 0;
  background: url("../images/modal-bg3-short.png") no-repeat center/contain;
  background-size: contain;
}


.game-wrapper.active .game-detail {
  display: block;
}

.game-wrapper.active .game-item {
	z-index: 11;
  transform: scale(0.85);
}

.detail-title {
  position: absolute;
  top: 12%; width: 100%;
  text-align: center;
  font-family: "Orbitron", sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  z-index: 2;
      color: #00ffff;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.8), 0 0 16px rgba(0, 255, 255, 0.6);
}

.detail-play-btn {
  position: absolute;
  bottom: 10%; 
  left: 50%;
  transform: translateX(-50%);
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  background: linear-gradient(
    135deg,
    rgba(154,29,255,1) 0%,
    rgba(29,154,255,1) 100%
  );
  color: #fff;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 0.5rem;
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow:
    0 0 8px rgba(29,154,255,0.8),
    0 0 16px rgba(154,29,255,0.6),
    inset 0 0 4px rgba(255,255,255,0.4);
  cursor: pointer;
  transition: 
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.3s ease;
  z-index: 2;
}

/* Hover/按下 效果 */
.detail-play-btn:hover {
  transform: translateX(-50%) scale(1.05);
  box-shadow:
    0 0 12px rgba(29,154,255,1),
    0 0 24px rgba(154,29,255,0.8),
    inset 0 0 6px rgba(255,255,255,0.6);
}

.detail-play-btn:active {
  transform: translateX(-50%) scale(0.95);
}

.detail-play-btn:disabled,
.detail-play-btn.disabled {
  box-shadow: none !important;
  background: linear-gradient(
    135deg,
    rgba(100,100,100,0.6) 0%,
    rgba(80,80,80,0.6) 100%
  ) !important;
  color: #ccc !important;
  transform: translateX(-50%) scale(1) !important;
  cursor: not-allowed !important;
  transition: none !important;
  pointer-events: none;
}

.detail-play-btn:disabled:hover,
.detail-play-btn.disabled:hover,
.detail-play-btn:disabled:active,
.detail-play-btn.disabled:active {
  transform: translateX(-50%) scale(1);
  box-shadow: none;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.7);
  }
  80% {
    opacity: 1;
    transform: translateX(-50%) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

.game-categories {
  display: flex;
  justify-content: center;
  padding:0;
}

.banner-wrapper{
  position: relative;
  overflow: visible;
  --orn-top-h: clamp(32px, 6vw, 80px);
  --orn-bottom-h: clamp(36px, 7vw, 96px);

}


.banner-wrapper{
  position: relative;
  margin: 0 auto;
  padding: 16px;           
  border-radius: 22px;
  overflow: visible;
  margin-top: 30px;
}

/* 外層霓虹燈管（最明顯） */
.banner-wrapper::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 22px;
  pointer-events:none;
  z-index: 0;

  /* 霓虹燈管：青→粉→青 */
  background: linear-gradient(90deg,
    rgba(0,229,255,1),
    rgba(255,61,247,1),
    rgba(0,229,255,1)
  );

  /* 讓它看起來像「燈管」：不要整片實心 */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 3px; /* 燈管粗細 */

  /* ✅ 強烈光暈（招牌感） */
  box-shadow:
    0 0 14px rgba(0,229,255,.55),
    0 0 28px rgba(0,229,255,.35),
    0 0 16px rgba(255,61,247,.45),
    0 0 34px rgba(255,61,247,.28),
    0 22px 60px rgba(0,0,0,.55);
}

/* 第二層內框霓虹（增加層次） */
.banner-wrapper::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 18px;
  pointer-events:none;
  z-index: 1;

  background: linear-gradient(135deg,
    rgba(0,229,255,.55),
    rgba(255,61,247,.38),
    rgba(0,229,255,.55)
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;

  box-shadow:
    0 0 10px rgba(0,229,255,.35),
    0 0 14px rgba(255,61,247,.25);
  opacity: .95;
}

/* 內部 Carousel 本體：玻璃面板 */
.banner-carousel{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  z-index: 2;

  background:
    radial-gradient(120% 180% at 0% 0%, rgba(0,229,255,.10) 0%, transparent 55%),
    radial-gradient(120% 180% at 100% 0%, rgba(255,61,247,.08) 0%, transparent 55%),
    linear-gradient(180deg, rgba(10,14,28,.70), rgba(7,10,18,.85));

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,229,255,.14),
    inset 0 1px 0 rgba(255,61,247,.10);
}

/* 圖片：更像霓虹螢幕（對比/飽和拉起來） */
.banner-carousel .slide{
  min-width: 100%;
  display:block;
  transform: scale(1.01);
  filter: contrast(1.12) saturate(1.18) brightness(1.02);
}

/* 掃描線 + 微雜訊（很賽博） */
.banner-carousel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 5;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.10) 0px,
      rgba(255,255,255,.10) 1px,
      rgba(255,255,255,0) 4px,
      rgba(255,255,255,0) 7px
    ),
    radial-gradient(circle at 30% 20%, rgba(0,229,255,.08), transparent 45%),
    radial-gradient(circle at 70% 30%, rgba(255,61,247,.06), transparent 45%);
  opacity:.22;
  mix-blend-mode: overlay;
}

/* Slides 動畫保持 */
.banner-carousel .slides{
  display:flex;
  transition: transform .55s ease;
  will-change: transform;
}

/* ===== 左右箭頭：招牌側燈按鍵（更大更亮） ===== */
.banner-carousel .nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 54px;
  height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(127,252,255,.28);

  background:
    linear-gradient(135deg, rgba(0,229,255,.22), rgba(255,61,247,.16)),
    rgba(7,10,18,.55);

  color: rgba(255,255,255,.96);
  font-size: 2.2rem;
  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  user-select:none;

  /* ✅ 明顯霓虹光暈 */
  box-shadow:
    0 0 16px rgba(0,229,255,.30),
    0 0 18px rgba(255,61,247,.22),
    0 16px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.14);

  transition: transform .12s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.banner-carousel .nav:hover{
  transform: translateY(-50%) translateY(-3px);
  border-color: rgba(127,252,255,.40);
  box-shadow:
    0 0 22px rgba(0,229,255,.40),
    0 0 22px rgba(255,61,247,.30),
    0 18px 50px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.banner-carousel .nav:active{
  transform: translateY(-50%) translateY(1px);
}

.banner-carousel .prev{ left: 12px; }
.banner-carousel .next{ right: 12px; }


/* ===== 霓虹閃爍（可關掉） ===== */
.banner-wrapper.neon-flicker::before{
  animation: neonFlicker 2.6s infinite;
}
@keyframes neonFlicker{
  0%, 100%{ opacity: 1; }
  7%{ opacity: .78; }
  9%{ opacity: 1; }
  38%{ opacity: .88; }
  40%{ opacity: 1; }
  78%{ opacity: .82; }
  80%{ opacity: 1; }
}


.unmusic-icon {
  position: absolute;
  bottom: 0;    /* 距离底部 */
  right: 0;    /* 距离右侧 */
  width: 4em;    /* 根据实际图大小调整 */
  height: auto;
  z-index: 10;    /* 确保盖在幻灯片和按钮之上 */
  cursor: pointer;
   transform: translate3d(0,0,0);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.header__logo{
  position: absolute;
  left: 50%;
  top: 30%;                      
  transform: translate(-50%, -20%);
  margin: 0;                      
  width: clamp(140px, 30%, 240px);
  display: flex;
  justify-content: center;
  filter: drop-shadow(0 6px 14px rgba(240,200,60,.28));
  z-index: 9;
}
.header_profile{
	margin-right: 8px;
}


/* 左侧 LOGO 区 */
.header__logo img {
  width: 100%;
}
/* 中间标题：绝对居中 */
.header__title {
  /* position: absolute;
  left: 50%;
  transform: translateX(-50%); */
  font-size: 1.25rem;
  color: #fff;
  font-weight: bold;
    top: 35%;
    width: 40%;
height: 65%;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.header__title .icon-btn {
  z-index: 20;
    touch-action: manipulation;
  -ms-touch-action: manipulation;
}

:root {
	--btn-height: 2rem;
	--btn-width: 6rem;
	--gradient-angle: 0deg;
}

.btn-base {
	position: relative;
	height: var(--btn-height);
	width: var(--btn-width);
	border: none;
	background: linear-gradient(0deg, #000000 0%, var(--hcolor) 100%);
	box-sizing: border-box;
	overflow: hidden;
	color: white;
	cursor: pointer;
}
.plain {
	border-radius: .5rem;
}
.btn-base.edgy {
	clip-path: polygon(0 0, 100% 0, 100% 80%, 60% 80%, 40% 100%, 0 100%);
}

.cutted {
	clip-path: polygon(0 0, 100% 0, 100% 80%, 60% 80%, 40% 100%, 0 100%);
}
.cutted::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1em;
	width: 1em;
	height: 1em;
	background: radial-gradient(
		circle,
		var(--hcolor) 0%,
		rgba(255, 255, 255, 0) 100%
	);
	transition: all 0.3s ease;
	animation: pulsar 2s infinite linear;
	opacity: 0;
}

@keyframes pulsar {
	0% {
		left: 0;
		top: 1em;
		transform: rotate(0deg) translateX(2em) rotate(0deg);
	}
	15% {
		left: 0;
		top: 1em;
		transform: rotate(45deg) translateX(2em) rotate(-45deg);
	}
	30% {
		left: 0;
		top: 1em;
		transform: rotate(90deg) translateX(2em) rotate(-90deg);
	}
	45% {
		left: 0;
		top: 1em;
		transform: rotate(135deg) translateX(2em) rotate(-135deg);
	}
	70% {
		left: 0;
		top: 1em;
		transform: rotate(180deg) translateX(2em) rotate(-180deg);
	}
	85% {
		left: 0;
		top: 1em;
		transform: rotate(270deg) translateX(2em) rotate(-270deg);
	}
	100% {
		left: 0;
		top: 1em;
		transform: rotate(360deg) translateX(2em) rotate(-360deg);
	}
}
.cutted:hover .cutted::before {
	opacity: 1;
}
.pixel-grid {
	background: linear-gradient(
			0deg,
			var(--hcolor) 1%,
			rgba(255, 255, 255, 0) 2%,
			rgba(255, 255, 255, 0) 30%,
			var(--hcolor) 31%,
			rgba(255, 255, 255, 0) 32%,
			rgba(255, 255, 255, 0) 60%,
			var(--hcolor) 61%,
			rgba(255, 255, 255, 0) 62%,
			rgba(255, 255, 255, 0) 90%,
			var(--hcolor) 91%,
			rgba(255, 255, 255, 0) 92%,
			rgba(255, 255, 255, 0) 100%
		),
		linear-gradient(
			90deg,
			var(--hcolor) 1%,
			rgba(255, 255, 255, 0) 2%,
			rgba(255, 255, 255, 0) 10%,
			var(--hcolor) 11%,
			rgba(255, 255, 255, 0) 12%,
			rgba(255, 255, 255, 0) 20%,
			var(--hcolor) 21%,
			rgba(255, 255, 255, 0) 22%,
			rgba(255, 255, 255, 0) 30%,
			var(--hcolor) 31%,
			rgba(255, 255, 255, 0) 32%,
			rgba(255, 255, 255, 0) 40%,
			var(--hcolor) 41%,
			rgba(255, 255, 255, 0) 42%,
			rgba(255, 255, 255, 0) 50%,
			var(--hcolor) 51%,
			rgba(255, 255, 255, 0) 52%,
			rgba(255, 255, 255, 0) 60%,
			var(--hcolor) 61%,
			rgba(255, 255, 255, 0) 62%,
			rgba(255, 255, 255, 0) 70%,
			var(--hcolor) 71%,
			rgba(255, 255, 255, 0) 72%,
			rgba(255, 255, 255, 0) 80%,
			var(--hcolor) 81%,
			rgba(255, 255, 255, 0) 82%,
			rgba(255, 255, 255, 0) 90%,
			var(--hcolor) 91%,
			rgba(255, 255, 255, 0) 92%,
			rgba(255, 255, 255, 0) 99%,
			var(--hcolor) 100%
		);
	background-blend-mode: screen;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: background 0.3s ease;
}
@keyframes grids {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0.6;
	}
	100% {
		opacity: 0;
	}
}
.btn-base:hover > .pixel-grid {
	animation: grids 3s infinite;
}
.pixel {
	background: var(--hcolor);
	height: 30%;
	width: 10%;
	position: absolute;
	top: 1%;
	left: 1%;
	transition: all 0.5s ease;
	opacity: 0;
}
.btn-base:hover > .pixel {
	opacity: 0.6;
}
.btn-base:hover {
	border: 1px solid var(--hcolor);
}
.btn-text {
	position: relative;
	font-family: sans-serif;
	font-weight: bold;
	text-shadow: 0, 0, 1rem black;
	z-index: 2;
}

.btn-base:hover > .shine {
	animation: shining 5s infinite;
}


/* 禁止 iOS Safari 的触摸弹出菜单 */
img {
  -webkit-touch-callout: none; /* 禁止长按呼出菜单 */
  -webkit-user-select: none;   /* 禁止选中 */
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;           /* 禁止选中文字／图片 */
}



.icon-btn {
  background: transparent;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #00f7ff;
  transition: color 0.2s, transform 0.2s;
}

.icon-btn:hover {
  color: #85efff;
  transform: scale(1.1);
}

.icon-btn:active {
  color: #00cccc;
  transform: scale(0.95);
}

.repeat-btn {
  /* 如果要加一个圈形背景 */
  border-radius: 50%;
  /* box-shadow 或发光效果 */
  box-shadow: 0 0 8px rgba(0,255,255,0.5);
}

#userProfile { 
	display: flex; 
    flex-direction: column;    /* 垂直排列 */
    align-items: center;       /* 水平置中 */
    justify-content: center;   /* 垂直置中（若父容器有高度的话） */
    height: 100%;         
	    cursor: pointer;
    user-select: none;
}

/* ===== Cyber hamburger（霓虹玻璃） ===== */
#userProfile.gold-hamburger{
  --c1: rgba(0,229,255,.95);   /* cyan */
  --c2: rgba(255,61,247,.85);  /* magenta */
  --ink: rgba(10,12,18,.78);

  display:grid;
  place-items:center;

  width: 44px;
  height: 44px;
  border-radius: 12px;
  cursor:pointer;
  position:relative;

  /* 中間那條（第2條）+ 玻璃底 */
  background-image:
    linear-gradient(90deg, var(--c1), var(--c2)),
    radial-gradient(120% 140% at 20% 0%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(18,22,32,.70), rgba(8,10,14,.86));
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-size: 22px 2px, 100% 100%, 100% 100%;
  background-position:center, center, center;
  backdrop-filter: blur(10px) saturate(1.15);
  transition: transform .10s ease, box-shadow .18s ease, border-color .18s ease, background-size .25s ease;
}

/* 外圈能量描邊（淡淡一圈） */
#userProfile.gold-hamburger::marker{ content:""; } /* 防某些怪 reset */


/* 上、下兩條（用偽元素畫，方便轉 X） */
#userProfile.gold-hamburger::before,
#userProfile.gold-hamburger::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--c1), var(--c2));
  box-shadow:
    0 0 10px rgba(0,229,255,.20),
    0 0 10px rgba(255,61,247,.14);
  transform-origin: 50% 50%;
  transition: transform .25s ease, opacity .2s ease;
}

#userProfile.gold-hamburger::before{ transform: translate(-50%,-50%) translateY(-6px); }
#userProfile.gold-hamburger::after { transform: translate(-50%,-50%) translateY( 6px); }

/* hover：更亮、外框更清楚 */
#userProfile.gold-hamburger:hover{
  transform: translateY(-1px);
  border-color: rgba(0,229,255,.28);
  box-shadow:
    0 18px 46px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 22px rgba(0,229,255,.18),
    0 0 18px rgba(255,61,247,.12);
}

/* active：按下 */
#userProfile.gold-hamburger:active{
  transform: translateY(0) scale(.98);
}

/* focus */
#userProfile.gold-hamburger:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0,229,255,.18),
    0 0 0 6px rgba(255,61,247,.10),
    0 16px 40px rgba(0,0,0,.60);
}

/* ===== 開合動畫：變成 X，並把中間那條縮成 0 ===== */
#userProfile.gold-hamburger.is-open{
  background-size: 0 2px, 100% 100%, 100% 100%;
}

#userProfile.gold-hamburger.is-open::before{
  transform: translate(-50%,-50%) rotate(45deg);
}
#userProfile.gold-hamburger.is-open::after{
  transform: translate(-50%,-50%) rotate(-45deg);
}


.avatar {
  width: 60%; 
  height: 60%;
  border-radius: 50%;
  object-fit: cover;
}
.nickname {
  font-size: 1.2rem;
  color: white;
}

/* ===== 個人資料頭部區：霓虹名牌框 ===== */
.profile-section{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 2.2rem;

  max-width: 580px;
  margin: 5rem auto 1rem;
  padding: 22px 14px;

  border-radius: 20px;
  overflow: hidden;

  background:
    radial-gradient(120% 180% at 0% 0%, rgba(0,229,255,.10) 0%, transparent 55%),
    radial-gradient(120% 180% at 100% 0%, rgba(255,61,247,.08) 0%, transparent 55%),
    linear-gradient(180deg, var(--cp-bgA), var(--cp-bgB));

  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    0 0 22px rgba(0,229,255,.16),
    0 0 18px rgba(255,61,247,.12),
    inset 0 1px 0 rgba(255,255,255,.10);

  backdrop-filter: blur(10px) saturate(1.2);
}

/* 外層霓虹燈管框（更像招牌） */
.profile-section::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 22px;
  pointer-events:none;

  background: linear-gradient(90deg, var(--cp-cyan), var(--cp-mag), var(--cp-cyan));
  opacity:.95;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;

  box-shadow:
    0 0 10px rgba(0,229,255,.45),
    0 0 18px rgba(0,229,255,.26),
    0 0 10px rgba(255,61,247,.38),
    0 0 18px rgba(255,61,247,.20);
}

@keyframes profileScan{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(340%); }
}

/* ===== 頭像：霓虹圓環框（取代金框圖） ===== */
.profile-pic-container{
  position: relative;
  flex-shrink: 0;
  width: 152px;
  height: 152px;
  border-radius: 24px;          /* 你原本是 22%，這裡固定像壓克力盒 */
  padding: 10px;
  background: rgba(0,0,0,.18);
  box-shadow:
    0 18px 44px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* 霓虹外圈 */
.profile-pic-container::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius: 26px;
  pointer-events:none;

  background: conic-gradient(from 0deg,
    var(--cp-cyan),
    var(--cp-mag),
    var(--cp-cyan)
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 3px;

  box-shadow:
    0 0 14px rgba(0,229,255,.35),
    0 0 14px rgba(255,61,247,.22);
}

/* 內圈微光 */
.profile-pic-container::after{
  content:"";
  position:absolute;
  inset: 6px;
  border-radius: 20px;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 18px rgba(0,229,255,.10);
  opacity:.9;
}

.profile-pic-container img{
  display:block;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.08);
}

/* ===== 文字區 ===== */
.profile-info{ color: var(--cp-dim); }

/* 名字：霓虹字（青粉 glow） */
.profile-name{
  margin:0 0 .35rem;
  font-size: 1.8rem;
  font-weight: 1000;
  letter-spacing:.10em;

  color: var(--cp-text);
  text-shadow:
    0 0 10px rgba(0,229,255,.28),
    0 0 18px rgba(0,229,255,.18),
    0 0 10px rgba(255,61,247,.22),
    0 0 18px rgba(255,61,247,.14);
    padding: 0;
}

/* 帳號：較淡，像副標 */
.profile-account{
  margin:0 0 .9rem;
  font-size: 1.25rem;
  letter-spacing:.08em;
  color: rgba(230,255,255,.78);
}

/* ===== 編輯按鈕：賽博 HUD 按鍵（切角 + 跑光） ===== */
.btn-edit-profile{
  position: relative;
  padding: .6rem 1.15rem;
  border: 1px solid rgba(127,252,255,.22);
  cursor: pointer;
  font-weight: 900;
  letter-spacing:.14em;

  color: rgba(255,255,255,.96);
  background:
    linear-gradient(135deg, rgba(0,229,255,.18), rgba(255,61,247,.14)),
    rgba(8,10,18,.55);

  border-radius: 0;
  clip-path: polygon(12px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 12px);

  box-shadow:
    0 14px 30px rgba(0,0,0,.42),
    0 0 14px rgba(0,229,255,.14),
    0 0 12px rgba(255,61,247,.10),
    inset 0 1px 0 rgba(255,255,255,.12);

  transition: transform .12s ease, filter .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* 跑光 */
.btn-edit-profile::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:55%;
  height:220%;
  transform: rotate(18deg);
  pointer-events:none;

  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.35),
    rgba(0,229,255,.80),
    rgba(255,61,247,.65),
    rgba(255,255,255,.18),
    transparent
  );

  opacity:0;
  animation: btnShine 2.4s linear infinite;
}
@keyframes btnShine{
  0%{ transform: translateX(0) rotate(18deg); opacity:0; }
  12%{ opacity:.85; }
  60%{ opacity:.55; }
  100%{ transform: translateX(320%) rotate(18deg); opacity:0; }
}

.btn-edit-profile:hover{
  transform: translateY(-2px);
  border-color: rgba(127,252,255,.34);
  filter: saturate(1.06) brightness(1.03);
  box-shadow:
    0 18px 44px rgba(0,0,0,.48),
    0 0 22px rgba(0,229,255,.20),
    0 0 18px rgba(255,61,247,.14),
    inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-edit-profile:active{ transform: translateY(1px); }

/* ===== 下方數據卡片：霓虹條列（像機台狀態列） ===== */
.profilecss .card{
  position: relative;
  overflow: hidden;

  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;

  margin: .7rem 0;
  padding: .95rem 1.05rem;

  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(12,16,30,.56), rgba(7,10,18,.90));
  border: 1px solid rgba(255,255,255,.10);

  box-shadow:
    0 16px 44px rgba(0,0,0,.50),
    0 0 14px rgba(0,229,255,.10),
    0 0 12px rgba(255,61,247,.08),
    inset 0 1px 0 rgba(255,255,255,.10);

  backdrop-filter: blur(8px) saturate(1.15);
}

/* 卡片上方細霓虹線（像導軌） */
.profilecss .card::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:0px;
  height:2px;
  border-radius: 99px;

  background: linear-gradient(90deg,
    transparent,
    rgba(0,229,255,.70),
    rgba(255,61,247,.55),
    rgba(0,229,255,.70),
    transparent
  );
  box-shadow:
    0 0 12px rgba(0,229,255,.18),
    0 0 10px rgba(255,61,247,.12);
  opacity:.85;
  pointer-events:none;
}

/* 左側標籤：小牌 */
.profilecss .card > span{
  width: 42%;
  font-size: 1.35rem;
  font-weight: 1000;
  letter-spacing:.14em;

  color: rgba(230,255,255,.78);
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  padding: 8px 10px;
  border-radius: 999px;
  text-align:left;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* 右側數值：霓虹顯示器 */
.profilecss .card > p{
  margin:0;
  padding: 8px 10px;
  border-radius: 14px;

  font-size: 1.55rem;
  font-weight: 1000;
  letter-spacing:.06em;
  font-variant-numeric: tabular-nums;

  color: rgba(255,255,255,.95);
  background:
    linear-gradient(90deg, rgba(0,229,255,.16), rgba(255,61,247,.12)),
    rgba(0,0,0,.14);
  border: 1px solid rgba(127,252,255,.14);

  text-shadow:
    0 0 10px rgba(0,229,255,.22),
    0 0 10px rgba(255,61,247,.14);
}

/* 移除舊的 span 全域覆寫（保留你原意，但不破壞卡片內樣式） */
.profilecss span{
  font-family: inherit;
  animation: none;
}

/* ===== RWD ===== */
@media (max-width: 520px){
  .profile-pic-container{
    width: 128px;
    height: 128px;
  }
  .profilecss .card{
    padding: .85rem .9rem;
  }
  .profilecss .card > span{
    width: 48%;
    font-size: 1.1rem;
  }
  .profilecss .card > p{
    font-size: 1.35rem;
  }
}

/* 動畫減量 */
@media (prefers-reduced-motion: reduce){
  .profile-section::after{ animation: none; opacity:.35; }
  .btn-edit-profile::after{ animation: none; opacity:.25; }
}

/* 外觀：切角面板 + 霓虹邊框 */
.btn-login{
  width: 86px;
  height: 30px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  cursor: pointer;

  /* 切角，直接看起來就不同 */
  clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 10px);
  border-radius: 0; /* 刻意取消圓角 */

  /* 玻璃底 */
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(0,229,255,.14) 0%, transparent 55%),
    radial-gradient(120% 160% at 100% 0%, rgba(255,61,247,.12) 0%, transparent 55%),
    linear-gradient(180deg, rgba(12,16,30,.85), rgba(7,10,18,.92));

  /* 霓虹外框 + 明顯光暈 */
  border: 1px solid rgba(127,252,255,.26);
  box-shadow:
    0 10px 22px rgba(0,0,0,.35),
    0 0 14px rgba(0,229,255,.18),
    0 0 12px rgba(255,61,247,.14),
    inset 0 0 0 1px rgba(0,229,255,.10),
    inset 0 1px 0 rgba(255,255,255,.10);

  transition: transform .12s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* 角落 HUD 短線（像面板固定點） */
.btn-login::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    /* 左上角 */
    linear-gradient(90deg, rgba(0,229,255,.80), transparent 60%) 8px 8px/26px 2px no-repeat,
    linear-gradient(180deg, rgba(0,229,255,.80), transparent 60%) 8px 8px/2px 26px no-repeat,
    /* 右下角 */
    linear-gradient(270deg, rgba(255,61,247,.70), transparent 60%) calc(100% - 8px) calc(100% - 8px)/26px 2px no-repeat,
    linear-gradient(0deg, rgba(255,61,247,.70), transparent 60%) calc(100% - 8px) calc(100% - 8px)/2px 26px no-repeat;

  opacity:.9;
}

/* 掃描線（淡，賽博質感） */
.btn-login::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;

  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.10) 0px,
    rgba(255,255,255,.10) 1px,
    rgba(255,255,255,0) 4px,
    rgba(255,255,255,0) 7px
  );
  opacity:.18;
  mix-blend-mode: overlay;
}

/* 內部跑光（能量掃過） */
.btn-login .shine{
  display:none; /* 你沒有這元素也沒關係 */
}

/* 用 a 本身做跑光層，不用加新 HTML */
.btn-login a{
  position: relative;
  z-index: 2;

  display:flex;
  align-items:center;
  justify-content:center;

  width: 100%;
  height: 100%;

  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;

  /* 霓虹字 */
  color: rgba(255,255,255,.96);
  text-shadow:
    0 0 6px rgba(0,229,255,.35),
    0 0 10px rgba(255,61,247,.22);
}

/* 跑光帶：在文字上方掃過 */
.btn-login a::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 55%;
  height: 220%;
  transform: rotate(18deg);

  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.45),
    rgba(0,229,255,.80),
    rgba(255,61,247,.70),
    rgba(255,255,255,.25),
    transparent
  );

  opacity:.0;
  filter: blur(.2px);
  pointer-events:none;

  animation: cpShine 2.2s linear infinite;
}

@keyframes cpShine{
  0%   { transform: translateX(0) rotate(18deg); opacity: 0; }
  10%  { opacity: .9; }
  55%  { opacity: .65; }
  100% { transform: translateX(320%) rotate(18deg); opacity: 0; }
}

/* hover：更亮、更霓虹 */
.btn-login:hover{
  border-color: rgba(127,252,255,.38);
  transform: translateY(-1px);
  filter: saturate(1.06) brightness(1.03);
  box-shadow:
    0 14px 30px rgba(0,0,0,.40),
    0 0 22px rgba(0,229,255,.28),
    0 0 18px rgba(255,61,247,.20),
    inset 0 0 0 1px rgba(0,229,255,.14),
    inset 0 1px 0 rgba(255,255,255,.14);
}

/* active：按下回饋 */
.btn-login:active{
  transform: translateY(1px);
  box-shadow:
    0 10px 22px rgba(0,0,0,.36),
    0 0 14px rgba(0,229,255,.20),
    0 0 12px rgba(255,61,247,.16),
    inset 0 2px 0 rgba(0,0,0,.25);
}

/* （可選）小螢幕字稍微縮 */
@media (max-width: 420px){
  .btn-login{ width: 78px; height: 28px; }
  .btn-login a{ font-size: 11px; letter-spacing: .14em; }
}


/* 容器：左右兩張卡，窄螢幕換行 */
.userDetail{
  width: min(92%, 640px);
  margin: 10px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ===== 卡片：霓虹名牌框（乾淨、很賽博） ===== */
.ud-card{
  position: relative;
  overflow: hidden;

  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;

  padding: 0px 6px;
  border-radius: 18px;

  /* 玻璃底（更像招牌壓克力） */
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(0,229,255,.10) 0%, transparent 55%),
    radial-gradient(120% 180% at 100% 0%, rgba(255,61,247,.08) 0%, transparent 55%),
    linear-gradient(180deg, rgba(12,16,30,.62), rgba(7,10,18,.86));

  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 16px 40px rgba(0,0,0,.48),
    0 0 18px rgba(0,229,255,.16),
    0 0 16px rgba(255,61,247,.12),
    inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(8px) saturate(1.2);
}

/* 外層霓虹燈管（更明顯的賽博感） */
.ud-card::before{
  content:"";
  position:absolute;
  inset: -2px;
  border-radius: 20px;
  pointer-events:none;

  background: linear-gradient(90deg, var(--cp-cyan), var(--cp-mag), var(--cp-cyan));
  opacity:.95;

  /* 做成「只剩邊框」 */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;

  /* ✅ 霓虹光暈很明顯 */
  box-shadow:
    0 0 10px rgba(0,229,255,.45),
    0 0 18px rgba(0,229,255,.26),
    0 0 10px rgba(255,61,247,.38),
    0 0 18px rgba(255,61,247,.20);
}


/* 左側 label：霓虹小牌（比純文字更像招牌） */
.ud-label{
  display:inline-flex;
  align-items:center;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: .95rem;
  font-weight: 900;
  letter-spacing: .14em;

  color: var(--cp-dim);
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.08);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 10px rgba(0,229,255,.08);
}

/* 右側值：霓虹字（不再金箔） */
.ud-value{
  font-weight: 1000;
  font-size: clamp(1.05rem, 4.2vw, 1.35rem);
  letter-spacing: .06em;

  color: var(--cp-text);
  text-shadow:
    0 0 8px rgba(0,229,255,.30),
    0 0 14px rgba(0,229,255,.18),
    0 0 8px rgba(255,61,247,.22),
    0 0 14px rgba(255,61,247,.14);

  font-variant-numeric: tabular-nums;
}

/* 點數卡的左側內容 */
.ud-card--points{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.ud-card--points .ud-content{
  display:flex;
  align-items:center;
  gap:10px;
}

/* ===== coin：變成「霓虹圓環按鈕」像街機按鍵 ===== */
.ud-coin{
  flex:0 0 auto;
  width: 35px;
  height: 35px;
  padding: 0px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  cursor: pointer;
  position: relative;
}

/* coin 圖 */
.ud-coin img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  filter:
    drop-shadow(0 0 10px rgba(0,229,255,.18))
    drop-shadow(0 0 8px rgba(255,61,247,.12));
  transition: transform .12s ease, filter .18s ease;
}


.ud-coin:hover img{
  transform: scale(1.08);
  filter:
    drop-shadow(0 0 14px rgba(0,229,255,.26))
    drop-shadow(0 0 10px rgba(255,61,247,.18));
}
.ud-coin:active{
  transform: translateY(1px);
}

/* 觸控優化 */
button, a, .ud-coin, .ud-refresh, #userProfile{
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}


/* 外框：HUD 玻璃條 */
.marquee{
  position: relative;
  width: 98%;
  height: 34px;
  display: flex;
  align-items: center;

  overflow: hidden;
  border-radius: 10px;

  background:
    radial-gradient(120% 180% at 0% 0%, rgba(0,229,255,.14) 0%, transparent 55%),
    radial-gradient(120% 180% at 100% 0%, rgba(255,61,247,.12) 0%, transparent 55%),
    linear-gradient(180deg, rgba(11,16,32,.70) 0%, rgba(7,10,18,.70) 100%);

  border: 1px solid rgba(127,252,255,.16);

  box-shadow:
    0 8px 22px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(127,252,255,.10),
    inset 0 -1px 0 rgba(255,61,247,.08);

  backdrop-filter: blur(6px) saturate(1.2);
}

/* 掃描線（很淡） */
.marquee::after{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.06) 0px,
    rgba(255,255,255,.06) 1px,
    rgba(255,255,255,0) 4px,
    rgba(255,255,255,0) 7px
  );
  opacity:.18;
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* 左側「公告」標籤 */
.marquee-label{
  flex: 0 0 auto;
  height: 100%;
  display: inline-flex;
  align-items: center;

  padding: 0 12px 0 12px;
  margin-left: 6px;
  margin-right: 10px;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;

  color: rgba(255,255,255,.96);
  border-radius: 8px;

  /* 不用厚光暈，用微色差 */
  filter: drop-shadow(1px 0 rgba(255,61,247,.20))
          drop-shadow(-1px 0 rgba(0,229,255,.16));
  position: relative;
}

/* 標籤右邊分隔線（HUD） */
.marquee-label::after{
  content:"";
  position:absolute;
  right:-10px;
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent,
    rgba(0,229,255,.45),
    rgba(255,61,247,.25),
    transparent
  );
  opacity: .9;
}

/* 右側跑馬燈軌道 */
.marquee-track{
  position: relative;
  flex: 1 1 auto;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
}

/* 文字 */
.marquee-track span{
  display: inline-block;
  padding-left: 100%;

  color: rgba(230,255,255,.95);
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 13px;
  line-height: 34px;

  filter: drop-shadow(1px 0 rgba(255,61,247,.18))
          drop-shadow(-1px 0 rgba(0,229,255,.14));

  --marquee-duration: 12s; /* 越大越慢 */
  animation: marquee var(--marquee-duration) linear infinite;
}

/* 控制跑/停（可選） */
.marquee:not(.is-running) .marquee-track span{
  animation-play-state: paused;
}

/* 動畫 */
@keyframes marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}


/* ===== Cyberpunk table (keep original layout behavior) ===== */
.cyberable{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  color: rgba(230,255,255,.88);
  table-layout: auto;          /* ✅ 保持原本自然分配，不要 fixed */
}

/* 不要讓 table-bordered 變粗框 */
.cyberable.table-bordered,
.cyberable.table-bordered td,
.cyberable.table-bordered th{
  border-color: rgba(127,252,255,.12) !important;
}

/* 表頭：HUD 分段面板（不是整塊底色） */
.cyberable thead.table-dark{
  background: transparent !important;
  color: rgba(255,255,255,.96) !important;
}

.cyberable thead th{
  position: sticky;
  top: 0;
  z-index: 2;

  padding: .75rem .7rem;
  font-weight: 900;
  letter-spacing: .14em;

  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0)),
    rgba(8,10,18,.35);

  border-bottom: 1px solid rgba(127,252,255,.22) !important;
  /* ✅ 每個 th 之間有分隔線，整體更像控制台 */
  border-right: 1px solid rgba(127,252,255,.10) !important;
}
.cyberableable thead th:last-child{
  border-right: none !important;
}

/* 表頭下緣霓虹導軌：放在 thead 本身，不用 tr::after 避免怪疊層 */
.cyberable thead{
  box-shadow: inset 0 -2px 0 rgba(0,229,255,.22);
}

/* 內容列：改成細格線 + 輕掃描感（但不影響欄寬） */
.cyberable td{
  padding: .6rem .7rem;
  vertical-align: middle;
  white-space: nowrap;

  background: rgba(8,10,18,.18);
  border-bottom: 1px solid rgba(127,252,255,.10) !important;
  border-right: 1px solid rgba(127,252,255,.06) !important;
}
.cyberable td:last-child{
  border-right: none !important;
}

/* 斑馬紋：不要用「顏色塊」，改成「透明層差」更賽博 */
.cyberable tbody tr:nth-child(odd) td{
  background: rgba(8,10,18,.12);
}

/* hover：改成 HUD 高亮框（不要 outline，避免你說的怪） */
.cyberable tbody tr:hover td{
  background: rgba(0,229,255,.08);
  box-shadow: inset 0 0 0 999px rgba(255,61,247,.03);
  border-bottom-color: rgba(0,229,255,.18) !important;
}

/* 贏/輸：青/粉霓虹（比金紅更像賽博） */
.win{
  color: rgba(0,229,255,.95);
  text-shadow: 0 0 10px rgba(0,229,255,.22), 0 0 6px rgba(0,229,255,.14);
}
.loss{
  color: rgba(255,61,247,.92);
  text-shadow: 0 0 10px rgba(255,61,247,.20), 0 0 6px rgba(255,61,247,.12);
}

/* 總計列：HUD 彙總條（不再是金箔底） */
.cyberable tfoot td{
  background:
    radial-gradient(120% 160% at 0% 50%, rgba(0,229,255,.10) 0%, transparent 55%),
    radial-gradient(120% 160% at 100% 50%, rgba(255,61,247,.08) 0%, transparent 55%),
    rgba(8,10,18,.32);

  font-weight: 900;
  letter-spacing: .10em;

  border-top: 1px solid rgba(127,252,255,.22) !important;
}
/* 贏/輸：改成青/粉（明顯不一樣） */
.win{
  color: rgba(0,229,255,.95);
  text-shadow:
    0 0 10px rgba(0,229,255,.28),
    0 0 6px rgba(0,229,255,.18);
}
.loss{
  color: rgba(255,61,247,.92);
  text-shadow:
    0 0 10px rgba(255,61,247,.26),
    0 0 6px rgba(255,61,247,.16);
}

/* ===== Card Footer / Pagination -> HUD controls ===== */
.card-footer{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(127,252,255,.14);
  position: relative;
}

/* 上緣霓虹細線 */
.card-footer::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-1px; height:2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(0,229,255,.45),
    rgba(255,61,247,.28),
    rgba(0,229,255,.45),
    transparent
  );
  opacity:.75;
  pointer-events:none;
}

/* 分頁資訊字樣 */
.paginationInfo{
  color: rgba(230,255,255,.78);
  letter-spacing: .08em;
  font-weight: 800;
}

/* 分頁按鈕：HUD 切角按鈕（不再是 Bootstrap outline 那套） */
.card .submit-btn{
  border: 1px solid rgba(127,252,255,.20) !important;
  color: rgba(255,255,255,.92) !important;
  background: rgba(8,10,18,.45) !important;

  padding: 8px 18px !important;
  border-radius: 0 !important; /* 取消原本圓角 */
  clip-path: polygon(12px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 12px);
  box-shadow:
    0 10px 22px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(127,252,255,.10);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease;
}

.card .submit-btn:hover, .card .submit-btn:hover{
  border-color: rgba(127,252,255,.34) !important;
  transform: translateY(-1px);
  filter: drop-shadow(0 0 14px rgba(0,229,255,.16)) drop-shadow(0 0 12px rgba(255,61,247,.10));
}

.card .submit-btn:active,.card .submit-btn:active{
  transform: translateY(1px);
}