*{box-sizing:border-box}body{margin:0;background:#030a13;color:#edf8ff;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}button,input,a{font:inherit;-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.58}#shell{max-width:480px;margin:auto;box-shadow:0 0 70px #0009}.homepage{position:relative;width:100%;aspect-ratio:863/1823;background:url('assets/home-plate.png') center top/100% 100% no-repeat;container-type:inline-size}.hit,.label{position:absolute;padding:0;margin:0;border:0;background:transparent;color:inherit;text-align:center}.hit{border-radius:6px}.hit:focus-visible,a:focus-visible{outline:2px solid #82eeff;outline-offset:2px}.hit:hover{filter:brightness(1.13);text-shadow:0 0 10px #52dfff70}.headline{left:6.2%;top:7.7%;font-size:6.7cqw;font-style:italic;letter-spacing:.15cqw;font-weight:950;text-shadow:0 .5cqw #0d536d}.subtitle{left:6.6%;top:12.4%;font-size:3.2cqw;letter-spacing:.15cqw}.avatar{left:87%;top:1.5%;width:10%;height:4.2%}.player{left:10%;top:38%;width:79%;height:16%}.video-title{position:absolute;top:74%;width:100%;left:0;font-size:3.8cqw;font-weight:700}.video-detail{position:absolute;top:89%;width:100%;left:0;font-size:2.6cqw;color:#bddbee}.member{left:10%;top:56.3%;width:80%;height:3.6%;display:flex;align-items:center;justify-content:space-between;padding-left:11%;padding-right:5%;font-size:3.2cqw}.member span:first-child{font-weight:700;color:#fff0b2}.member span:last-child{font-size:2.9cqw}.start{left:7%;top:61.3%;width:86%;height:5.5%;color:#002938;font-size:5cqw;font-weight:800;letter-spacing:.1cqw}.start>span{padding-left:2cqw}.task-stat{left:4%;top:68.6%;width:44%;height:8.5%;text-align:left;padding-left:15%}.task-stat>span,.reward-stat>span{font-size:3.2cqw}.task-stat strong{display:block;font-size:5.5cqw;line-height:1.5;font-weight:650;white-space:nowrap}.reward-stat{left:52%;top:68.6%;width:44%;height:8.5%;padding-left:13%;text-align:left}.reward-stat strong{display:block;font-size:5.7cqw;line-height:1.5;white-space:nowrap}.reward-stat b{font-weight:650}.reward-stat small{font-size:2.4cqw;font-weight:400}.progress{position:absolute;left:9%;width:82%;height:1.3cqw;bottom:9%;background:#1d375b;border-radius:2cqw;overflow:hidden}.progress i{display:block;width:0;height:100%;background:#42dcf5}.availability{top:78.4%;left:39%;width:52%;font-size:2.1cqw;text-align:left;color:#bed2e4}.invite,.records{top:81%;height:6.2%;width:42%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-left:14%;gap:.6cqw}.invite{left:4%}.records{left:52%}.invite b,.records b{font-size:3.3cqw}.invite span,.records span{font-size:2.7cqw;color:#b8d4e9}.nav{top:91%;height:5.9%;width:19%;padding-top:5.2cqw;font-size:3cqw;color:#aecbe3}.nav[aria-current]{color:#47dfff;text-shadow:0 0 10px #0cc5ff}.n1{left:1%}.n2{left:21%}.n3{left:41%}.n4{left:61%}.n5{left:81%}.coming{top:90.2%;left:50%;width:14%;font-size:1.9cqw;color:#c5d8e8;border:1px solid #8ba8bd;border-radius:2cqw;background:#0a1b2ee8}
dialog{color:#eef8ff;background:#06182a;border:3px solid #b0cadc;border-radius:23px 9px 23px 9px;box-shadow:0 0 0 4px #1e344b,0 0 0 6px #8da6bc,inset 0 0 0 4px #365773,inset 0 0 0 6px #06101f,0 0 28px #06c1f65c;max-width:440px;width:calc(100% - 34px);max-height:88dvh;padding:25px 19px 22px;overflow:auto}dialog::backdrop{background:#00102580}.close{position:absolute;right:13px;top:10px;background:none;border:0;color:#effaff;font-size:29px;line-height:1;padding:4px}h2{font-size:26px;text-align:center;margin:13px 22px 12px;font-weight:850;color:#d9f7ff;text-shadow:0 2px #227797}dialog p{font-size:12px;color:#b9d2e4;line-height:1.85}.sub{text-align:center;margin-bottom:22px}.line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #3b5a73;font-size:12px}.line span{color:#b8d2e4}.line b{text-align:right}.offer{display:flex;align-items:center;justify-content:space-between;padding:15px 8px 24px;gap:10px}.offer small{display:block;color:#d3e8f5;font-size:12px;text-align:center}.offer strong{display:block;font-size:43px;color:#cffaff;margin-top:7px}.offer strong em{font-size:18px;font-style:normal}.offer>span{font-size:24px;color:#58ccea}.cta{display:flex;justify-content:center;align-items:center;width:100%;min-height:49px;border:2px solid #dcfaff;border-radius:12px 4px;box-shadow:0 0 0 3px #3b809f,0 0 14px #10dfff40;background:#3de4f2;color:#03263a;font-size:17px;font-weight:800;margin-top:22px;text-decoration:none}.cta:disabled{background:#163b52;color:#99bed0;box-shadow:none;border-color:#517c94}.secondary{display:block;text-align:center;background:transparent;color:#b4d9ee;border:0;text-decoration:underline;text-underline-offset:5px;font-size:13px;margin:18px auto 0;padding:5px}.note{font-size:10px!important;color:#9ebdd1!important;padding-top:5px}.tier-table{width:100%;border-collapse:collapse;font-size:11px;table-layout:fixed;margin:20px 0}.tier-table th{font-size:10px;color:#b0ccde;font-weight:500}.tier-table td,.tier-table th{padding:12px 2px;text-align:center;border:1px solid #345773}.tier-table tr.selected{background:#09445d;outline:2px solid #3dd7f8}.tier-table button{border:0;background:none;color:inherit;font:inherit;padding:7px 1px;min-height:35px;width:100%}.deposit{padding:14px;border:1px solid #527a96;margin:18px 0;font-size:13px;line-height:1.9}.deposit b{color:#83e8ff}.empty{text-align:center;padding:22px 5px}.steps{display:flex;gap:5px;margin:20px 0}.steps i{height:12px;flex:1;border:1px solid #74c9e9;border-radius:5px;background:#123653}.steps i.complete{background:#47e9ff}.total{font-size:24px;color:#93efff}dialog input{width:100%;margin-top:10px;padding:12px;border-radius:6px;background:#0b263b;border:1px solid #537d9a;color:#fff}a{color:#71e3ff}.error{color:#ffc5c5!important}.list{list-style:none;padding:0}.list li{border-bottom:1px solid #2b4b65;padding:12px 0;font-size:12px;line-height:1.8}.list time{display:block;color:#91b2ca;font-size:10px}@media(max-width:360px){dialog{padding-inline:15px}h2{font-size:23px}.tier-table{font-size:10px}.tier-table th{font-size:9px}.offer strong{font-size:37px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Keep the original portrait visible above the lower modal panel. */
dialog{top:auto;bottom:3dvh;margin:0 auto;max-height:72dvh;padding:24px 20px 20px}.tier-table{margin:14px 0}.tier-table td,.tier-table th{padding:4px 2px}.tier-table button{min-height:27px;padding:3px 1px}.line{padding:9px 0}dialog h2{margin:7px 20px 10px}.sub{margin-bottom:15px}.cta{margin-top:18px}dialog .note{margin-block:9px}.tier-table th{height:31px}@media(max-height:600px){dialog{max-height:91dvh}}
/* Reuse the approved metallic artwork as a nine-slice frame. */
dialog{border:20px solid transparent;border-image:url('assets/modal-frame.png') 90 fill / 20px stretch;border-radius:0;background:transparent;box-shadow:none;padding:9px 9px 12px}.close{right:17px;top:13px}dialog .tier-table th{font-size:10px}dialog .tier-table td{font-size:12px}dialog .line{font-size:13px}dialog .cta{font-size:16px}@media(max-width:360px){dialog .tier-table td{font-size:10px}dialog .tier-table th{font-size:9px}dialog .line{font-size:11px}}
/* Functional content inside the existing approved modal frame. */
.address{overflow-wrap:anywhere;user-select:all}.task-video{display:block;width:100%;height:auto;max-height:39dvh;object-fit:contain;background:#000;margin:14px 0}dialog form label{display:block;margin:12px 0;color:#c7e4f4;font-size:12px}dialog h3{font-size:14px;margin-top:24px;color:#c7eaf7}dialog small{overflow-wrap:anywhere}dialog .list .line{padding-top:0}dialog .order-links{overflow-wrap:anywhere}
dialog.video-dialog{top:50%;bottom:auto;transform:translateY(-50%);max-width:min(940px,96vw);width:94vw;max-height:94dvh;background:#02111fee;overflow:auto}dialog.video-dialog[data-orientation=portrait]{width:min(94vw,460px)}dialog.video-dialog .task-video{width:auto;height:auto;max-width:100%;max-height:68dvh;object-fit:contain;margin:12px auto}

dialog.video-dialog .task-video{width:min(100%,calc(68dvh * var(--video-ratio,1.7778)));height:auto;max-height:68dvh}

/* Shared frontend modal shell. Source of truth: the approved homepage frame. */
dialog{box-sizing:border-box;color:#eef8ff;border:20px solid transparent;border-image:url('assets/modal-frame.png') 90 fill / 20px stretch;border-radius:0;background:transparent;box-shadow:none;width:calc(100% - 34px);max-width:440px;max-height:72dvh;top:auto;bottom:3dvh;margin:0 auto;padding:9px 9px 12px;overflow:auto;text-align:left}
dialog::backdrop{background:#00102580;backdrop-filter:blur(4px)}
dialog .close{position:absolute;right:17px;top:13px;z-index:8;width:auto;height:auto;min-height:0;line-height:1;padding:4px;margin:0;border:0;border-radius:0;background:transparent;color:#effaff;font-size:29px;box-shadow:none;cursor:pointer}
dialog h2{font-size:26px;line-height:1.3;text-align:center;margin:7px 24px 10px;font-weight:850;color:#d9f7ff;text-shadow:0 2px #227797}
dialog p{font-size:12px;color:#b9d2e4;line-height:1.85;overflow-wrap:anywhere}
dialog .primary{display:flex;align-items:center;justify-content:center;width:100%;min-height:49px;border:2px solid #dcfaff;border-radius:12px 4px;box-shadow:0 0 0 3px #3b809f,0 0 14px #10dfff40;background:#3de4f2;color:#03263a;font-size:16px;font-weight:800;margin-top:18px;padding:10px;text-decoration:none}
dialog .primary:disabled{background:#163b52;color:#99bed0;box-shadow:none;border-color:#517c94}
dialog .detail-button{width:100%;margin:10px 0;padding:12px 10px;border:1px solid #527a96;border-radius:6px;background:linear-gradient(130deg,#14364e,#061b2c);color:#ccecff;font-size:13px;line-height:1.65;overflow-wrap:anywhere;text-align:left}
dialog :focus-visible{outline:2px solid #8aeaff;outline-offset:2px}
dialog.video-dialog{top:50%;bottom:auto;transform:translateY(-50%);max-width:min(940px,96vw);width:94vw;max-height:94dvh}
dialog.video-dialog[data-orientation=portrait]{width:min(94vw,460px)}
/* Keep the approved reward content and compact geometry inside the same outer frame. */
#turn-result.reward-view{border:20px solid transparent;border-image:url('assets/modal-frame.png') 90 fill / 20px stretch;border-radius:0;background:transparent;box-shadow:none;padding:0;top:50%;bottom:auto;transform:translateY(-50%);margin:0 auto}
#turn-result.reward-view>.close{right:17px;top:13px;width:auto;height:auto;padding:4px;font-size:29px;line-height:1}
.reward-view .reveal-art{clip-path:inset(14% 11% 14% 11%)}
@media(max-width:360px){dialog h2{font-size:23px}dialog .detail-button{font-size:12px}}
@media(max-height:600px){dialog{max-height:91dvh}}