/*
 * 暴雪仙境 贊助儲值：版面沿用遊戲內「贊助官」對話窗的樣子。
 *   深色夜空舞台  ＋  霜白紙面（＝對話窗）
 *   酒紅標題 #772E38、青銅強調、灰色虛線分隔、炭黑內文 #302C2A（皆為遊戲 UI 同款色碼）
 *   紙面上緣的「封印徽章」是訂單狀態圖示（見 bz_seal_svg）：這是整站唯一的視覺重點。
 * 不引用任何外部資源（內容安全政策只允許本站），字型使用系統字型。
 */

:root {
    --night: #0e1520;
    --night-2: #16222f;
    --frost: #9fd8ea;
    --bone: #e9e4d8;
    --ash: #93a0ae;
    --paper: #eef3f5;
    --paper-2: #e2e9ed;
    --line: #b9c5cd;
    --ink: #302c2a;
    --ink-2: #5a626b;
    --wine: #772e38;
    --wine-2: #8f3a46;
    --bronze: #7a5818;
    --bronze-line: #b58a3a;
    --focus: #1f6f93;
    --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", system-ui, -apple-system, "Segoe UI", sans-serif;
    --serif: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", "Times New Roman", serif;
    --num: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
    --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body.stage {
    margin: 0;
    min-height: 100vh;
    font: 16px/1.7 var(--sans);
    color: var(--bone);
    background:
        radial-gradient(1.4px 1.4px at 11% 14%, rgba(233, 228, 216, .55) 50%, transparent 52%),
        radial-gradient(1px 1px at 83% 8%, rgba(233, 228, 216, .45) 50%, transparent 52%),
        radial-gradient(1.2px 1.2px at 64% 31%, rgba(159, 216, 234, .45) 50%, transparent 52%),
        radial-gradient(1px 1px at 27% 47%, rgba(233, 228, 216, .35) 50%, transparent 52%),
        radial-gradient(1.4px 1.4px at 91% 63%, rgba(233, 228, 216, .4) 50%, transparent 52%),
        radial-gradient(1px 1px at 39% 82%, rgba(159, 216, 234, .35) 50%, transparent 52%),
        linear-gradient(180deg, var(--night-2) 0%, var(--night) 46%, #0a0f17 100%);
    background-size: 330px 280px, 410px 360px, 270px 340px, 380px 300px, 300px 390px, 350px 310px, auto;
}

a { color: var(--frost); text-underline-offset: 3px; }
a:hover { color: #c8ecf6; }
.sheet a:not(.btn) { color: var(--focus); }
.sheet a:not(.btn):hover { color: #174f69; }

:focus-visible { outline: 2px solid var(--frost); outline-offset: 2px; border-radius: 3px; }
.sheet :focus-visible { outline-color: var(--focus); }

.sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- 舞台與導覽 */

.stage-in { max-width: 640px; margin: 0 auto; padding: 14px 16px 44px; }

.stage-nav {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
    gap: 2px 18px; font-size: .92rem; color: var(--ash); min-height: 28px;
}
.nav-user { color: var(--bone); font-weight: 600; word-break: break-all; }
.inline { display: inline; margin: 0; }
.linklike {
    background: none; border: 0; padding: 0; font: inherit; color: var(--frost);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.linklike:hover { color: #c8ecf6; }

/* ---------------------------------------------------------------- 封印徽章 */

.seal-wrap { position: relative; z-index: 1; display: flex; justify-content: center; margin: 14px 0 -50px; }
.seal {
    display: block; width: 100px; height: 100px; color: var(--frost);
    filter: drop-shadow(0 0 0 rgba(159, 216, 234, 0)) drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
}
.seal-disc { fill: var(--night); stroke: rgba(159, 216, 234, .3); stroke-width: 1.5; }
.seal-ring { fill: none; stroke: currentColor; stroke-width: 2; }
.seal-ring-in { stroke-width: 1.5; opacity: .75; }
.seal-ticks line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .85; }
.seal-glyph { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.seal-glyph .dot { fill: currentColor; stroke: none; }

.seal-wait { color: #dcb765; }
.seal-wait .seal-ring-out { stroke-dasharray: 5 7; }
.seal-ok {
    color: #7fe3c1;
    filter: drop-shadow(0 0 14px rgba(127, 227, 193, .5)) drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
}
.seal-bad { color: #e8909c; }
.seal-muted { color: #7f8b98; }
.seal-muted .seal-ticks { opacity: .4; }

/* 登入頁：封印的外圈畫一次（整站唯一的自動動態） */
.page-login .seal-ring-out { stroke-dasharray: 340; stroke-dashoffset: 340; animation: seal-draw 1.1s .2s ease-out forwards; }
@keyframes seal-draw { to { stroke-dashoffset: 0; } }

/* 付款頁：輸入有效金額時封印亮一下（使用者操作的回饋） */
.seal.is-pulse { animation: seal-pulse .7s ease-out; }
@keyframes seal-pulse {
    0%   { filter: drop-shadow(0 0 0 rgba(159, 216, 234, 0)) drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
    35%  { filter: drop-shadow(0 0 18px rgba(159, 216, 234, .9)) drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
    100% { filter: drop-shadow(0 0 0 rgba(159, 216, 234, 0)) drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
}

@media (prefers-reduced-motion: reduce) {
    .page-login .seal-ring-out { animation: none; stroke-dashoffset: 0; }
    .seal.is-pulse { animation: none; }
}

/* ---------------------------------------------------------------- 紙面（對話窗） */

.sheet {
    position: relative; color: var(--ink); background: var(--paper);
    border-radius: 14px; padding: 66px 20px 26px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.sheet-head { text-align: center; }
.wordmark { margin: 0; font-family: var(--serif); font-size: 1.4rem; font-weight: 700; letter-spacing: .08em; color: var(--wine); }
.role { margin: 0; font-size: .95rem; color: var(--bronze); }
.rule { border: 0; border-top: 1px dashed #8d98a1; margin: 12px 0 20px; }

.sheet h1 { margin: 0 0 .35em; font-size: 1.3rem; line-height: 1.4; color: var(--ink); }
.sheet h2 { margin: 1.4em 0 .4em; font-size: 1.05rem; }
.lead { margin: 0 0 1em; color: var(--ink-2); text-wrap: pretty; }
.hint { margin: .7em 0 0; font-size: .92rem; color: var(--ink-2); text-wrap: pretty; }
.steps li, .alert, .radio-body small { text-wrap: pretty; }
.muted { color: var(--ink-2); }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }

/* ---------------------------------------------------------------- 表單 */

.form { display: block; }
.group { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.group legend { padding: 0; margin: 0 0 8px; font-weight: 700; color: var(--ink); }
.field { display: block; margin: 0 0 14px; }
.field > span { display: block; margin-bottom: 4px; font-size: .92rem; color: var(--ink-2); }

input[type="text"], input[type="password"] {
    display: block; width: 100%; min-height: 46px; padding: 10px 12px; font: inherit; color: var(--ink);
    background: #fff; border: 1px solid var(--line); border-radius: 8px;
}
input[type="text"]:focus-visible, input[type="password"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
input::placeholder { color: #8a949c; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 46px; padding: 10px 20px;
    font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
    border: 1px solid transparent; border-radius: 8px; transition: background-color .15s, border-color .15s;
}
.btn-primary { background: var(--wine); color: #f6f1e6; }
.btn-primary:hover { background: var(--wine-2); color: #fff; }
.btn-ghost { background: transparent; color: var(--bronze); border-color: var(--bronze-line); }
.btn-ghost:hover { background: rgba(181, 138, 58, .14); color: var(--bronze); }
.btn-danger { color: #8e2d3b; border-color: #c9929a; }
.btn-danger:hover { background: rgba(142, 45, 59, .1); color: #8e2d3b; }
.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: 36px; padding: 5px 14px; font-size: .9rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.chip {
    min-height: 40px; padding: 6px 15px; font: inherit; font-family: var(--num); font-variant-numeric: lining-nums tabular-nums;
    color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s;
}
.chip:hover { border-color: var(--bronze-line); }
.chip.is-on { color: #fff; background: var(--bronze); border-color: var(--bronze); }

.preview {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .15em .4em; min-height: 3.6rem; margin: 12px 0 0; padding: 12px 0 0;
    color: var(--ink-2); border-top: 1px dashed #9aa6af;
}
.preview:empty::before { content: "輸入金額後，這裡會顯示可獲得的點數"; color: #7a858e; }
.preview .num { font-family: var(--num); font-variant-numeric: lining-nums tabular-nums; font-weight: 700; color: var(--bronze); }
.preview .num-big { font-size: 2rem; line-height: 1.1; }
.preview-bad { color: #8e2d3b; }

.radio-list { display: grid; gap: 10px; }
.radio {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; cursor: pointer;
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
.radio input { flex: none; width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--wine); }
.radio-body { display: block; }
.radio-body strong { display: block; color: var(--ink); }
.radio-body small { display: block; color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.radio input:checked + .radio-body strong { color: var(--wine); }
.radio:has(input:checked) { border-color: var(--wine); background: #fbf6f6; }
.radio:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

.check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; cursor: pointer; font-size: .96rem; }
.check input { flex: none; width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--wine); }

/* ---------------------------------------------------------------- 提示與狀態 */

.alert { margin: 0 0 16px; padding: 10px 14px; font-size: .96rem; border: 1px solid; border-radius: 8px; }
.alert a { color: inherit; font-weight: 700; }
.alert-ok { color: #14503a; background: #dcefe6; border-color: #9fd1ba; }
.alert-warn { color: #6f3d0b; background: #f6e3c6; border-color: #e0bf86; }
.alert-error { color: #6e1f2b; background: #f3d9dd; border-color: #dfa4ad; }

.badge { display: inline-block; padding: 1px 10px; font-size: .88rem; font-weight: 700; line-height: 1.7; border-radius: 6px; }
.badge-ok { color: #1e6b4e; background: #dcefe6; }
.badge-wait { color: var(--bronze); background: #f1e6c8; }
.badge-muted { color: #4a5560; background: #e1e7eb; }
.badge-warn { color: #8a4b0f; background: #f6e3c6; }
.badge-bad { color: #8e2d3b; background: #f3d9dd; }

/* ---------------------------------------------------------------- 訂單頁 */

.order-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.order-head h1 { margin-bottom: .1em; }
.order-head p { margin: 0; font-size: .92rem; }
.order-head .badge { margin-top: 4px; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 16px 0; padding: 14px 0; border-top: 1px dashed #9aa6af; border-bottom: 1px dashed #9aa6af; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; min-width: 0; }
.money { font-family: var(--num); font-variant-numeric: lining-nums tabular-nums; font-size: 1.3rem; font-weight: 700; color: var(--bronze); line-height: 1.4; }

.pay-code { margin: 18px 0; padding: 16px; background: var(--paper-2); border: 1px dashed var(--bronze-line); border-radius: 10px; }
.pay-code-label { margin: 0 0 6px; font-weight: 700; }
.code-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 8px; }
.code-box .mono { font-size: 1.5rem; font-weight: 700; letter-spacing: .06em; color: var(--ink); word-break: break-all; }
.bank-code { margin: 0 0 4px; }
.bank-code .mono { font-size: 1.15rem; font-weight: 700; letter-spacing: .06em; color: var(--ink); }
.pay-card { margin: 4px 0 8px; }
.form-inline { margin: 0 0 4px; }

/* ---------------------------------------------------------------- 紀錄列表（窄螢幕直排、寬螢幕左右分欄） */

.orders { margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px dashed #9aa6af; }
.order-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 16px; padding: 14px 0; border-bottom: 1px dashed #9aa6af; }
.order-no { display: block; font-size: .95rem; word-break: break-all; }
.order-meta { display: flex; flex-wrap: wrap; gap: 0 14px; font-size: .88rem; color: var(--ink-2); }
.order-row-side { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.order-row-side .money { font-size: 1.1rem; }
.order-points { font-size: .92rem; color: var(--ink-2); }

@media (min-width: 480px) {
    .order-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .order-row-side { justify-content: flex-end; }
}

/* ---------------------------------------------------------------- 測試模式（只有 config.php 的 test 名單內帳號看得到） */

.test-banner {
    margin: 0 0 16px; padding: 10px 14px; font-size: .94rem; font-weight: 700; line-height: 1.6; text-wrap: pretty;
    color: #5b3a00; background: repeating-linear-gradient(135deg, #f8e7b0 0 14px, #f3dc95 14px 28px);
    border: 1px solid #d9b45a; border-radius: 8px;
}
.test-panel { margin: 18px 0; padding: 14px 16px; background: #fbf3dc; border: 1px dashed #d9b45a; border-radius: 10px; }
.test-panel-title { margin: 0; font-weight: 700; color: #6f4a00; }
.test-panel .hint { margin: .4em 0 .8em; }
.badge-test { color: #6f4a00; background: #f6e3b0; }

/* 從別台電腦經 http（未加密）連進來時，登入頁的提醒 */
.insecure-note {
    margin: 0 0 16px; padding: 8px 12px; font-size: .9rem; line-height: 1.6; text-wrap: pretty;
    color: #6f3d0b; background: #f6e3c6; border-left: 4px solid #d9a441; border-radius: 6px;
}

/* ---------------------------------------------------------------- 須知與紙面外的說明 */

.prose ol { margin: .6em 0 1em; padding-left: 1.4em; }
.prose li { margin: .55em 0; }

.after { margin: 26px 6px 0; color: var(--bone); }
.after h2 { margin: 0 0 .4em; font-size: 1rem; color: var(--frost); }
.steps { margin: 0; padding-left: 1.4em; color: #cdd5dc; }
.steps li { margin: .35em 0; }

.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin-top: 32px; font-size: .88rem; color: var(--ash); }

/* ---------------------------------------------------------------- 寬螢幕 */

@media (min-width: 640px) {
    .stage-in { padding-top: 20px; }
    .seal { width: 112px; height: 112px; }
    .seal-wrap { margin-bottom: -56px; }
    .sheet { padding: 76px 32px 32px; }
    .wordmark { font-size: 1.55rem; }
    .sheet h1 { font-size: 1.45rem; }
}