@font-face{font-family:NotoTC;src:url('assets/noto-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:NotoTC;src:url('assets/noto-700.ttf') format('truetype');font-weight:700;font-display:swap}
:root{color-scheme:dark;font-family:NotoTC,'PingFang TC','Microsoft JhengHei',sans-serif;background:#272a40;color:white;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,label:focus-within{outline:3px solid #fff1a2;outline-offset:4px}button:disabled{cursor:default}img{display:block}h1,p{margin:0}


.progress-card{--card-width:378px;position:relative;width:min(var(--card-width),100%);flex:none;isolation:isolate;padding-bottom:18px}
/* The 378 × 337 SVG is sliced at 40 / 24 / 24 / 24.
   Corners and top contour keep their height; only edges and fill stretch. */
.card-background{position:absolute;inset:4px 0 0;z-index:-1;border-style:solid;border-color:transparent;border-width:40px 24px 24px;border-image-source:url('assets/556f0.svg');border-image-slice:40 24 24 24 fill;border-image-width:40px 24px 24px 24px;border-image-repeat:stretch;pointer-events:none}
.card-header{padding:18px 12px 0}
.card-heading{width:149.667px;height:34px;font-size:0}
.description{margin-top:6px;width:calc(100% - 120px);font-weight:400;font-size:14px;line-height:19px;color:#fff;overflow-wrap:break-word}
.bear-decoration{position:absolute;right:16px;top:-2px;object-fit:cover}
.prize{margin:12px 8px 0;width:calc(100% - 16px);height:auto;aspect-ratio:362 / 114;object-fit:contain}
.progress-actions{margin:6px auto 0;width:min(306px,calc(100% - 48px));display:flex;flex-direction:column;align-items:center;gap:14px}
.progress-status{height:30px;line-height:30px;font-size:17px;font-weight:700;white-space:nowrap;text-align:center;text-shadow:2px 2px 0 #0000001f;display:flex;align-items:baseline;justify-content:center}
.progress-status strong{font-size:26px;font-weight:700;color:#ffec8c;line-height:30px;display:inline-block}
.action-row{display:flex;gap:12px;width:100%;height:51px}
.continue{border:0;flex:1;min-width:0;height:51px;border-radius:42px;background:linear-gradient(#fef3cd,#fcc43c);box-shadow:inset 0 -2px 8px #ffffff80;display:flex;align-items:center;justify-content:center;gap:6px;color:#333;font-size:20px;line-height:25px;font-weight:700;transition:filter .15s,transform .15s}
.continue:active{transform:scale(.97);filter:brightness(.96)}
.refresh{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;flex:0 0 54px;width:54px;height:51px;border:1px solid #ffffff4d;background:#0000001a;border-radius:16px;color:#fff;font-size:12px;font-weight:400;line-height:17px;transition:background .15s}
.refresh:active{background:#0003}.refresh.loading img{animation:spin .7s linear infinite}.refresh:disabled{opacity:.75}
.count-pop{animation:pop .4s ease-out}

.progress-status{gap:8px} .progress-status #count{padding:0;margin:0;font-variant-numeric:tabular-nums}
.progress-overlay{position:absolute;inset:4px 0 0;z-index:5;display:flex;align-items:center;justify-content:center}
