/*
	style.css
	说明：页面样式（响应式）。使用 CSS 变量集中管理配色与尺寸，
	并优先采用相对单位（rem / clamp / vw）以提升可伸缩性与可访问性。
*/
:root{--bg:#f5f7fb;--card:#ffffffd9;--accent:#1d7dfa;--accent-2:#1ac8b9;--text:#0f172a;--muted:#64748b;--line:#dbe6ff;
	/* sizing scale */
	--space-1:0.5rem; /* 8px */
	--space-2:0.75rem; /* 12px */
	--space-3:1rem; /* 16px */
	--space-4:1.5rem; /* 24px */
	--radius:1.25rem; /* 20px */
	--small-radius:0.75rem; /* 12px */
	--btn-size:2.75rem; /* 44px */
	--icon-size:1.875rem; /* 30px */
	--icon-small:1.375rem; /* 22px */
	--card-width:75rem; /* ~1200px */
	--bg-size-a:16rem; /* ~256px */
	--bg-size-b:20rem; /* ~320px */
	--bg-offset-a:5rem; /* ~80px */
	--bg-offset-b-right:6.25rem; /* ~100px */
	--bg-offset-b-bottom:7.5rem; /* ~120px */
	--blur:1.875rem; /* 30px */
	/* shared component sizing */
	--action-btn-font-size:clamp(1.125rem,2.1vw,1.625rem);
	--action-btn-min-height:3rem;
	--action-cell-width:4.5rem;
	--icon-btn-size-current:var(--btn-size);
	--icon-btn-font-current:var(--icon-size);
	--icon-glyph-shift:-0.125rem;
	--remove-btn-size-current:2.125rem;
	--remove-btn-font-current:var(--icon-small);
	--remove-glyph-shift:-0.125rem;
	--lift-y:-0.0625rem;
	--button-hover-shadow:0 0.5rem 1.375rem rgba(29,125,250,.28);
	--circle-hover-shadow:0 0.5rem 1.375rem rgba(26,200,185,.3);
	--modal-overlay-bg:rgba(0,0,0,0.5);
}
*{box-sizing:border-box;font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 10% 20%,#e9f3ff 0,#f8fbff 42%,#f5f7fb 100%);color:var(--text);position:relative;overflow-x:hidden;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);-webkit-text-size-adjust:100%;text-size-adjust:100%}
.bg-shape{position:fixed;border-radius:999px;/* 装饰性背景形状 */filter:blur(var(--blur));opacity:.45;pointer-events:none;z-index:0;animation:float 7s ease-in-out infinite}
/* 左上角大圆形 */
.bg-shape-a{width:var(--bg-size-a);height:var(--bg-size-a);background:#93c5fd;top:calc(-1 * var(--bg-offset-a));left:calc(-1 * var(--bg-offset-a) + var(--space-1))}
/* 右下角大圆形 */
.bg-shape-b{width:var(--bg-size-b);height:var(--bg-size-b);background:#99f6e4;right:calc(-1 * var(--bg-offset-b-right));bottom:calc(-1 * var(--bg-offset-b-bottom));animation-delay:1.2s}
/* 轻微浮动动画，用于背景装饰 */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-0.875rem)}}

.container{position:relative;z-index:1;width:min(var(--card-width),96vw);margin:2.8vh auto;padding:clamp(0.625rem,1.6vw,1.25rem)}
/* 卡片：主要内容承载区域 */
.card{background:var(--card);backdrop-filter:blur(8px);padding:clamp(1.125rem,2.2vw,1.875rem);border-radius:var(--radius);box-shadow:0 0.875rem 2.625rem rgba(29,83,160,.14);border:1px solid rgba(255,255,255,0.15)}
/* 标题样式 */
h1{margin:0 0 1.125rem;font-size:clamp(1.875rem,4.2vw,3.25rem);letter-spacing:2px;text-align:center}
/* 简短说明文字 */
.blurb{text-align:center;color:var(--muted);margin:0.625rem auto 0.875rem;max-width:52rem}
/* 表单行 */
.row{display:flex;gap:var(--space-1);align-items:center;margin:var(--space-1) 0}
/* 标签（输入前的说明） */
label{display:flex;justify-content:center;align-items:center;gap:var(--space-2);font-weight:700;color:#334155;font-size:clamp(1rem,1.8vw,1.25rem);margin:0 auto}
/* 数字输入框 */
input[type=number]{width:clamp(13.75rem,30vw,21.25rem);padding:var(--space-2) var(--space-3);border:1px solid var(--line);border-radius:var(--small-radius);background:var(--card);outline:none;transition:border-color .2s,box-shadow .2s;font-size:clamp(1rem,1.6vw,1.375rem);text-align:center;color:var(--text)}
input[type=number]:focus{border-color:#7cb0ff;box-shadow:0 0 0 0.25rem #bfdbfe55}
.fee-row{justify-content:center;margin:0.375rem 0 0.875rem}
.actions{justify-content:center;margin-top:var(--space-3)}
.action-stack{display:block;width:92%;max-width:320px;margin:0 auto}
button{background:linear-gradient(90deg,var(--accent),#4f9cff);color:#fff;border:none;padding:0.625rem 1rem;border-radius:0.6875rem;cursor:pointer;transition:transform .15s,box-shadow .2s}
button:hover{transform:translateY(var(--lift-y));box-shadow:var(--button-hover-shadow)}
.action-btn{display:block;width:100%;max-width:320px;background:#e2e8f0;color:#0f172a;font-weight:800;padding:0.75rem 1.375rem;font-size:clamp(1.125rem,2.1vw,1.625rem);line-height:1.1;min-height:3rem;margin:0 auto;box-sizing:border-box;-webkit-appearance:none;appearance:none}
.action-btn+.action-btn{margin-top:12px}
#clearBtn,#donateBtn{display:block;width:100%;max-width:320px;height:3rem;line-height:3rem;padding:0 1rem;margin-left:auto;margin-right:auto;background:#e2e8f0;color:#0f172a;font-weight:800;font-size:1.25rem;border:0;border-radius:0.6875rem;box-sizing:border-box;-webkit-appearance:none;appearance:none;text-align:center}
#donateBtn{margin-top:12px}

#playersTable{width:100%;border-collapse:collapse;margin-top:var(--space-1)}
#playersTable th,#playersTable td{padding:0.875rem 0.625rem;border-bottom:1px dashed rgba(229,237,248,0.06);text-align:center}
#playersTable th{font-weight:800;color:#334155;font-size:clamp(0.9375rem,1.5vw,1.375rem)}
#playersTable .fee{color:#0f172a;font-weight:800;min-width:8rem;font-size:clamp(1rem,1.8vw,1.5rem)}
#playersTable .action-cell{width:var(--action-cell-width);text-align:center;vertical-align:middle}
#playersTable input[type=number]{width:100%;max-width:none}

.circle-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:0;background:linear-gradient(90deg,var(--accent-2),#2dd4bf);color:#ffffff;border:none;line-height:1;transform:translateY(0)}
.circle-btn:hover{transform:translateY(var(--lift-y));box-shadow:var(--circle-hover-shadow)}
.circle-btn .glyph{display:block;line-height:1;transform:translateY(-0.0625rem);pointer-events:none}
.icon-btn{display:flex;width:var(--icon-btn-size-current);height:var(--icon-btn-size-current);font-size:var(--icon-btn-font-current);margin:0.875rem auto 0}
.icon-btn .glyph{transform:translateY(var(--icon-glyph-shift))}
.remove-btn{display:flex;width:var(--remove-btn-size-current);height:var(--remove-btn-size-current);font-size:var(--remove-btn-font-current);margin:0 auto}
.remove-btn .glyph{transform:translateY(var(--remove-glyph-shift))}

@media(max-width:768px){
	:root{--action-cell-width:3.75rem;--action-btn-font-size:1.375rem;--icon-btn-size-current:2.375rem;--icon-btn-font-current:1.5rem;--icon-glyph-shift:-0.0625rem;--remove-btn-size-current:2rem;--remove-btn-font-current:1.25rem;--remove-glyph-shift:-0.0625rem}
	.container{padding:0.625rem;margin:12px auto}
	h1{margin-bottom:0.75rem}
	label{flex-direction:column;align-items:center;gap:var(--space-1)}
	input[type=number]{width:100%}
	#playersTable th,#playersTable td{padding:0.625rem 0.25rem}
	#clearBtn,#donateBtn{font-size:1.375rem;height:3rem;line-height:3rem}
}

@media(max-width:480px){
	:root{--action-cell-width:3.25rem;--action-btn-font-size:1.25rem;--action-btn-min-height:2.875rem;--icon-btn-size-current:2.25rem;--icon-btn-font-current:1.375rem;--remove-btn-size-current:1.875rem;--remove-btn-font-current:1.125rem}
	.container{width:98vw;padding:0.5rem}
	.card{padding:0.875rem;border-radius:1rem}
	h1{font-size:clamp(1.5rem,8vw,2rem)}
	#playersTable th{font-size:0.875rem}
	#playersTable .fee{font-size:1.125rem;min-width:5.5rem}
	#playersTable th,#playersTable td{padding:0.5rem 0.125rem}
	#clearBtn,#donateBtn{font-size:1.25rem;height:2.875rem;line-height:2.875rem}
}

@media(max-width:360px){
	:root{--action-btn-font-size:1.125rem}
	label{font-size:0.9375rem}
	input[type=number]{font-size:1.125rem;padding:0.625rem 0.625rem}
	#playersTable .fee{font-size:1rem}
	#clearBtn,#donateBtn{font-size:1.125rem}
}

/* Modal 半透明背景 */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--modal-overlay-bg);display:none;align-items:center;justify-content:center;z-index:100}
.modal-overlay.active{display:flex}

/* Modal 内容框 */
.modal-content{background:var(--card);border-radius:var(--radius);padding:var(--space-4);max-width:24rem;text-align:center;box-shadow:0 1.25rem 3.125rem rgba(0,0,0,0.25);position:relative}
.modal-content h2{margin:0 0 var(--space-3);font-size:1.5rem;color:var(--text)}

/* Modal 关闭按钮 */
.modal-close{position:absolute;top:var(--space-2);right:var(--space-2);background:transparent;border:none;font-size:1.5rem;cursor:pointer;color:var(--muted);transition:color 0.2s}
.modal-close:hover{color:var(--text)}

/* 二维码图片 */
.qr-code{max-width:100%;height:auto;border-radius:0.5rem}