:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#251a3b;background:#f6f3fb;font-size:16px;line-height:1.6;--purple:#7136d8;--line:#e7dff1;--muted:#736781}*{box-sizing:border-box}body{margin:0}header{background:white;border-bottom:1px solid var(--line);padding:20px max(20px,calc((100vw - 1060px)/2));display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-size:26px;font-weight:800;color:var(--purple)}.brand>span{font-size:20px;color:#251a3b}.brand small{display:block;color:var(--muted);font-size:12px;font-weight:400}nav{display:flex;gap:16px}a{color:var(--purple)}main{max-width:1060px;margin:32px auto;padding:0 20px;min-height:60vh}h1{font-size:clamp(25px,4vw,38px);line-height:1.3;margin:8px 0 14px}h2{font-size:21px}h3{font-size:17px}.eyebrow{letter-spacing:2px;color:var(--purple);font-size:12px;font-weight:700}.muted,small{color:var(--muted)}.lead{max-width:640px;color:var(--muted);margin-bottom:24px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card,.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:16px}.game{display:flex;flex-direction:column;text-align:left;gap:8px;min-height:138px;color:inherit;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}.game:hover{border-color:var(--purple);box-shadow:0 5px 20px #7136d810}.game b{font-size:17px}.game small{margin-top:auto}.search{margin:20px 0}.row{display:flex;align-items:center;gap:12px;justify-content:space-between}.pack{padding:16px 0;border-bottom:1px solid var(--line)}.pack:last-child{border:0}.pack .info{flex:1}.price{font-weight:700;white-space:nowrap}.quantity{width:76px!important;padding:8px!important}.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px;align-items:start}.summary{position:sticky;top:20px}.total{font-size:26px;font-weight:800;color:var(--purple);margin:16px 0}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}button,.button{font:inherit;cursor:pointer;border:0;border-radius:10px;padding:11px 17px;background:var(--purple);color:white;text-decoration:none;display:inline-block;text-align:center}button:hover,.button:hover{filter:brightness(.94)}button:disabled{opacity:.45;cursor:not-allowed}button.secondary,.button.secondary{background:#eee7fb;color:var(--purple)}button.active{background:#251a3b}.block{width:100%}input,select,textarea{font:inherit;width:100%;padding:12px;border:1px solid #cfc3df;border-radius:10px;background:white;color:inherit}textarea{min-height:90px}label{display:block;margin:16px 0 6px}input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:3px solid #bba0ee;outline-offset:2px}.check{display:flex;gap:10px;align-items:flex-start}.check input{width:20px;flex-shrink:0;margin-top:5px}.note{padding:12px 16px;border-radius:10px;background:#f1ebfb;color:#5d4682;font-size:14px;white-space:pre-line}.warning{background:#fff1db;color:#815218}.error{color:#b42318;background:#fff0ef;padding:12px;border-radius:8px}.success{color:#15603b;background:#e9f8ef;padding:14px;border-radius:12px}.badge{font-size:12px;color:var(--purple);background:#eee7fb;padding:4px 9px;border-radius:20px;display:inline-block}.closed{opacity:.6}.code{font:700 clamp(16px,3.5vw,26px)/1.5 ui-monospace,monospace;overflow-wrap:anywhere;color:var(--purple);background:#f1ebfb;border-radius:12px;padding:18px;margin:14px 0}.details{display:grid;grid-template-columns:140px 1fr;gap:8px;overflow-wrap:anywhere}.details dt{color:var(--muted)}.details dd{margin:0;white-space:pre-wrap}.slip{display:block;max-width:100%;max-height:600px;object-fit:contain;margin:20px auto}.actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.empty{padding:40px;text-align:center;color:var(--muted)}#notice{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);max-width:90vw;background:#251a3b;color:white;border-radius:12px;padding:12px 20px;z-index:5;display:none}footer{text-align:center;color:var(--muted);font-size:12px;padding:30px 20px;border-top:1px solid var(--line)}.order{display:block;width:100%;text-align:left;color:inherit;background:white;border:1px solid var(--line);margin:10px 0}.order small{display:block}.login{max-width:440px;margin:40px auto}.split{display:grid;grid-template-columns:1fr 1.4fr;gap:24px}.safe{overflow-wrap:anywhere}table{border-collapse:collapse;width:100%}td,th{text-align:left;padding:10px 4px;border-bottom:1px solid var(--line)}@media(max-width:760px){.grid{grid-template-columns:1fr 1fr}.layout,.split{grid-template-columns:1fr}.summary{position:static}header{padding:16px}.brand>span{font-size:17px}nav{font-size:13px;gap:10px}main{margin:24px auto}.panel,.card{padding:18px}.details{grid-template-columns:110px 1fr}}@media(max-width:380px){.grid{grid-template-columns:1fr}.pack{flex-wrap:wrap}.brand small{display:none}}
[hidden]{display:none!important}
.method-picker{margin:18px 0 22px;padding-bottom:18px;border-bottom:1px solid var(--line)}.method-line{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.method-buttons{display:flex;gap:8px;flex-wrap:wrap}.method-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;min-width:116px;padding:8px 16px;background:white;color:#251a3b;border:1px solid #aea2bd;font-weight:700}.method-button.selected{background:var(--purple);color:white;border-color:var(--purple)}.method-check{display:inline-block;width:14px}.method-help{font-size:14px;color:var(--muted);margin:8px 0 0}.pack-list h2{margin:0 0 4px}.pack-hint{font-size:13px;margin:0 0 16px}.pack-choice{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;background:#fff}.pack-choice.in-cart{border-color:#a57ce6;background:#faf7ff}.pack-name{align-self:stretch;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:5px;background:transparent;color:inherit;border-radius:8px;padding:5px;min-height:44px;user-select:none;touch-action:manipulation}.pack-name:hover{background:#f1eafa;filter:none}.pack-title{font-weight:700;line-height:1.45}.pack-name small{font-size:12px}.pack-note{font-size:12px;color:#78618b;white-space:pre-line}.pack-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.pack-meta .badge{font-size:11px;white-space:nowrap}.pack-meta .price{font-size:16px}.qty-controls{grid-column:1/-1;display:flex;justify-content:flex-end;align-items:center;gap:8px}.qty-controls button{width:44px;height:40px;padding:0;font-size:23px;line-height:1;touch-action:manipulation}.qty-controls output{min-width:26px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}.pack-choice.closed{opacity:.55}@media(min-width:1000px){.pack-choice{grid-template-columns:minmax(0,1fr) auto auto;gap:10px}.qty-controls{grid-column:auto;gap:4px}.qty-controls button{width:36px}.qty-controls output{min-width:22px}.pack-meta .price{font-size:14px}}@media(max-width:480px){.method-line{gap:10px}.method-line>b{width:100%}.method-buttons{width:100%}.method-button{flex:1;min-width:100px;padding:8px 12px}.pack-list{padding:14px}.pack-choice{gap:6px 10px;padding:10px}.pack-title{font-size:14px}.pack-meta .price{font-size:14px}.pack-meta .badge{font-size:10px}.method-help{font-size:13px}}

.mobile-cart{display:none}@media(max-width:760px){.mobile-cart{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:3;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:white;border-top:1px solid var(--line);align-items:center;justify-content:space-between;gap:12px;box-shadow:0 -5px 20px #251a3b0d}body:has(.mobile-cart){padding-bottom:78px}}
.payment-options{display:grid;gap:12px;max-width:680px}.payment-option{color:inherit;text-align:left;display:grid;gap:10px;width:100%;margin:0}.payment-option strong{font-size:24px;color:var(--purple)}.payment-option span{font-weight:400;font-size:14px}.payment-option.chosen{border:2px solid var(--purple);background:#f5f0ff}.payment-options+button{max-width:680px;margin-top:20px}
.cart-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}.cart-actions button{padding:8px 10px;font-size:13px;min-height:40px;flex:1;white-space:nowrap}.cart-actions kbd{font:11px system-ui;background:#ffffff80;border-radius:4px;padding:2px 4px;margin-left:3px}.cart-actions .clear-cart{background:white;border:1px solid #cf5a5a;color:#a52f2f}.cart-actions button:disabled{color:#8b8495;border-color:#d8d2df;background:#f3f1f5;opacity:1}.cart-empty{color:var(--muted);text-align:center;padding:22px 0}#cartFeedback:not(:empty){padding:10px;background:#e9f8ef;color:#15603b;border-radius:10px;font-size:13px;margin:12px 0}#cartFeedback button{padding:5px 8px;font-size:12px;margin-left:4px}
.game-icon{width:56px;height:56px;object-fit:cover;border-radius:13px}.game-heading{display:flex;align-items:center;gap:14px;margin:8px 0 14px}.game-heading h1{margin:0}.game-hero-icon{width:64px;height:64px;object-fit:cover;border-radius:15px;flex-shrink:0}

.pack-choice.closed{opacity:1;border-color:#f3a6a6;background:#fff1f1;color:#a51d28}.pack-choice.closed .badge{background:#ffe0e2;color:#a51d28}.pack-choice.closed .pack-name:disabled{opacity:1}.pack-choice.closed small{color:#b42318}.pack-choice.closed .qty-controls button{background:#f2d5d8;color:#9c4149;opacity:.7}

.pack-choice.closed{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;background:#ed1c24;border:1px solid #ed1c24;border-radius:5px;color:#fff;padding:7px 10px;margin-bottom:5px;opacity:1}.pack-choice.closed .pack-name{min-height:0;padding:0}.pack-choice.closed .pack-name:hover{background:transparent}.pack-choice.closed .pack-title{font-size:14px;line-height:1.4}.pack-choice.closed .pack-name small,.pack-choice.closed .pack-note{color:#fff}.pack-choice.closed .qty-controls,.pack-choice.closed .pack-meta .badge,.pack-choice.closed .pack-meta .price{display:none}.sold-out-label{display:inline-block;background:#fff;color:#d61520;border-radius:20px;padding:1px 9px;white-space:nowrap;font-size:12px;font-weight:700}

/* Match regular pack sizing while retaining the sold-out treatment. */
.pack-choice.closed{grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;border-radius:12px;padding:12px;margin-bottom:10px}.pack-choice.closed .pack-name{min-height:44px;padding:5px}.pack-choice.closed .pack-title{font-size:inherit;line-height:1.45}.pack-choice.closed .qty-controls{display:flex;visibility:hidden}.pack-choice.closed .pack-meta .badge,.pack-choice.closed .pack-meta .price{display:block}.pack-choice.closed .pack-meta .badge{display:none}.pack-choice.closed .pack-meta .price{color:white}@media(min-width:1000px){.pack-choice.closed{grid-template-columns:minmax(0,1fr) auto auto;gap:10px}}@media(max-width:480px){.pack-choice.closed{gap:6px 10px;padding:10px}.pack-choice.closed .pack-title{font-size:14px}}

.pack-choice.closed .qty-controls button{display:inline-block}

/* Approved compact pack layout: product, price, quantity/status. */
.pack-choice,.pack-choice.closed{grid-template-columns:minmax(0,1fr) 88px 104px;gap:12px;padding:14px 16px;min-height:76px;margin-bottom:12px;border-radius:12px}
.pack-choice .pack-name,.pack-choice.closed .pack-name{min-height:44px;padding:0}
.pack-choice .pack-title,.pack-choice.closed .pack-title{font-size:15px;font-weight:600;line-height:1.45;overflow-wrap:anywhere}
.pack-choice .pack-meta{justify-content:center;align-items:flex-end}
.pack-choice .pack-meta .price{display:block;font-size:18px;font-weight:600;line-height:1.4;white-space:nowrap}
.pack-choice .qty-controls{grid-column:auto;gap:6px;justify-content:flex-end}
.pack-choice .qty-controls button{width:32px;height:32px;font-size:21px;border-radius:9px}
.pack-choice .qty-controls output{min-width:22px;font-size:14px}
.pack-choice.closed .qty-controls{display:none}
.pack-choice.closed .sold-out-label{justify-self:end;font-size:12px;font-weight:500;line-height:18px;padding:2px 9px}
@media(max-width:480px){.pack-choice,.pack-choice.closed{grid-template-columns:minmax(0,1fr) 66px 90px;gap:7px;padding:12px 10px}.pack-choice .pack-title,.pack-choice.closed .pack-title{font-size:14px}.pack-choice .pack-meta .price{font-size:16px}.pack-choice .qty-controls{gap:4px}.pack-choice .qty-controls button{width:30px;height:32px}.pack-choice .qty-controls output{min-width:22px}}

@font-face{font-family:Kanit;font-style:normal;font-weight:400;font-display:swap;src:url('/kanit-400.ttf') format('truetype')}@font-face{font-family:Kanit;font-style:normal;font-weight:600;font-display:swap;src:url('/kanit-600.ttf') format('truetype')}
:root{font-family:Kanit,system-ui,sans-serif}

.pack-choice:not(.closed){cursor:pointer}.pack-choice .qty-controls{cursor:default}.pack-choice:not(.closed):hover:not(:has(.qty-controls:hover)){background:#f1eafa;border-color:#c6b0e9}.pack-choice:not(.closed) .pack-name:hover{background:transparent}

.shop-header{min-height:96px;padding-top:14px;padding-bottom:14px;border-bottom:1px solid #e2d6f5}.shop-header .brand{gap:14px;flex-shrink:0}.shop-logo{width:64px;height:64px;object-fit:contain;display:block}.shop-header .brand>span{font-size:20px;font-weight:600}.shop-header .brand small{font-size:12px;color:#736781;font-weight:400}.shop-contacts{align-items:center;gap:10px}.contact-label{font-size:14px;color:#736781;margin-right:4px}.contact-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:40px;padding:8px 14px;border:1px solid;border-radius:10px;text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap;transition:background .15s}.contact-facebook{background:#edf5ff;color:#0866c6;border-color:#c8e0ff}.contact-facebook:hover{background:#deedff}.contact-line{background:#edfaef;color:#138b2f;border-color:#c3eccb}.contact-line:hover{background:#dcf5e0}.contact-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:white}.facebook-icon{border-radius:50%;background:#1877f2;font:700 25px/1 Arial;padding-top:5px;overflow:hidden}.line-icon{border-radius:50%;background:#06c755;font:700 7px/1 Arial;position:relative}.line-icon:after{content:'';position:absolute;bottom:-2px;left:6px;border-top:5px solid #06c755;border-right:5px solid transparent}@media(max-width:640px){.shop-header{flex-wrap:wrap;gap:12px;padding:12px 16px}.shop-logo{width:52px;height:52px}.shop-header .brand>span{font-size:18px}.shop-contacts{width:100%;justify-content:flex-end}.contact-label{margin-right:auto}.contact-button{padding:8px 12px}}@media(max-width:380px){.shop-header .brand small{display:block}}
/* ค้นหาในหน้าเกม: การ์ดคำนวณ (6000 shard / งบ 500 / แพ็กไหนคุ้มสุด) */
.calc-box{display:grid;gap:8px;margin:4px 0 14px}.calc-head{font-weight:600;color:#5b21b6}.calc-head small{font-weight:400;color:var(--muted)}
.calc-option{display:block;width:100%;text-align:left;background:#fff;color:#251a3b;border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;cursor:pointer;font:inherit}
.calc-option:hover{border-color:var(--purple)}.calc-option.best{border-color:var(--purple);background:#faf7ff}
.calc-top{display:flex;justify-content:space-between;gap:10px;font-weight:600}.calc-list{display:block;font-size:.88rem;color:#4b3f63;margin:4px 0}
.calc-foot{display:flex;justify-content:space-between;gap:10px;font-size:.82rem;color:var(--muted)}.calc-foot span{color:var(--purple);font-weight:600}
.calc-rank{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.calc-rank button{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;text-align:left;padding:7px 10px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:#fff;color:#251a3b;font:inherit;font-size:.9rem;cursor:pointer}
.calc-rank button:last-child{border-bottom:0}.calc-rank button.best{background:#f0fdf4;font-weight:600}.calc-rank button:hover{background:#faf7ff}

.saved-game{background:#f1ebfb;border:1px solid #e0d4f3;border-radius:12px;padding:14px 16px;margin-bottom:16px}.saved-game p{font-size:14px;margin:6px 0;color:#68517f}.saved-game .actions{margin:10px 0 0}.remember-choice{margin-top:20px}.remember-help{font-size:13px;margin:4px 0 12px}

.calc-box[hidden]{display:none}

.checkout-progress{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:#736781;margin-bottom:18px}.checkout-progress b{color:#7136d8}.transfer-payment{min-width:0}.transfer-payment>.slip{max-height:390px}.slip-preview{display:block;max-width:100%;max-height:180px;object-fit:contain;margin:12px auto}.transfer-payment #sendSlip{margin-top:16px}@media(max-width:760px){.transfer-layout .summary{grid-row:1}.checkout-progress{font-size:12px;gap:7px}}

.selected-item{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid #eee7f6}.selected-item>span{flex:1;min-width:0;overflow-wrap:anywhere}.remove-selected{flex-shrink:0;background:#fff0f0;color:#b42318;border:1px solid #f3cccc;font-size:12px;padding:5px 9px;min-height:32px;border-radius:8px}

.password-field{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;align-items:center}.password-field label{grid-column:1/-1}.password-field .password-toggle{font-size:13px;min-height:44px;padding:8px 12px;white-space:nowrap}

.remember-dialog{border:1px solid #e7dff1;border-radius:18px;padding:26px;max-width:460px;width:calc(100% - 32px);color:#251a3b;box-shadow:0 20px 70px #251a3b30}.remember-dialog::backdrop{background:#21163166}.remember-dialog h2{margin-top:0}.remember-dialog .actions{justify-content:flex-end}.remember-dialog .muted{font-size:13px}#rememberDialogError{color:#b42318}

/* Transfer redesign: amount, destination, slip */
.transfer-layout{grid-template-columns:minmax(0,1.65fr) minmax(270px,1fr);align-items:start;gap:20px}.transfer-layout .transfer-payment{padding:0;border:0;background:transparent;display:grid;gap:18px}.transfer-details,.transfer-upload{padding:24px;margin:0}.transfer-amount{display:grid;gap:2px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line)}.transfer-amount>strong{font-size:42px;line-height:1.3;color:var(--purple);font-weight:600}.transfer-bank{font-size:21px;margin:0 0 16px}.transfer-account{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.transfer-account strong{font-size:24px;white-space:nowrap}.transfer-account button{margin-left:auto;font-size:13px;background:white;border:1px solid #c5a5ed;padding:8px 12px}.transfer-owner{display:flex;gap:20px;flex-wrap:wrap}.transfer-memo{display:flex;align-items:center;gap:10px;border-radius:10px;background:#f1ecf8;padding:10px 12px;font-size:14px}.transfer-memo span{flex:1}.transfer-memo button{flex-shrink:0;background:white;border:1px solid #d8c5ee;font-size:13px;padding:7px 10px}.transfer-small{font-size:12px;margin-bottom:0}.transfer-upload h2{margin-top:0;font-size:22px}.slip-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:110px;padding:18px;border:1.5px dashed #a879e7;border-radius:12px;background:#faf7ff;color:var(--purple);cursor:pointer}.slip-drop span{font-size:19px;font-weight:600}.slip-drop small{font-size:12px;color:var(--muted)}.slip-file{position:absolute;width:1px;height:1px;padding:0;opacity:0;overflow:hidden}.slip-drop:has(+input:focus-visible){outline:3px solid #b998e8;outline-offset:3px}.transfer-upload #sendSlip{min-height:48px}.upload-help{text-align:center}.transfer-summary{padding:24px}.transfer-summary summary{display:none}.transfer-summary h2{margin-top:0}.transfer-summary .total{background:#f1eafa;padding:12px;border-radius:10px;font-size:26px}.transfer-summary .pack{align-items:flex-start;gap:12px}.transfer-summary .pack b{white-space:nowrap}.transfer-intro{margin-top:-12px;margin-bottom:22px}
@media(max-width:760px){.transfer-layout{grid-template-columns:1fr;gap:14px}.transfer-layout .transfer-summary{grid-row:1;padding:14px 18px}.transfer-summary summary{display:list-item;cursor:pointer;font-weight:600}.transfer-summary details[open] summary{margin-bottom:16px}.transfer-summary h2{display:none}.transfer-details,.transfer-upload{padding:18px}.transfer-amount>strong{font-size:36px}.transfer-account{gap:8px}.transfer-account strong{font-size:21px}.transfer-account>.muted{width:100%;font-size:13px}.transfer-account button{font-size:12px}.transfer-bank{font-size:19px}.transfer-owner{gap:8px;font-size:14px}.transfer-memo{font-size:12px;padding:10px}.transfer-upload h2{font-size:21px}.slip-drop span{font-size:17px}}

/* Kasikorn account identity; upload stays unchanged */
.kasikorn-panel{background:#f0fbf3;border:1px solid #99d4ad;border-radius:14px;padding:20px;margin-bottom:16px;color:#095c31}.kasikorn-panel .transfer-bank{display:flex;align-items:center;gap:12px;color:#086235}.kasikorn-logo{display:inline-block;flex:none;width:52px;height:52px;border-radius:11px;background-image:url('/assets/bank.png');background-size:550px 407.4px;background-position:-27.2px -66.8px;background-repeat:no-repeat}.kasikorn-panel .transfer-account{gap:10px}.kasikorn-panel .transfer-account>.muted{width:100%;color:#537362;font-size:13px}.kasikorn-panel .transfer-account strong{font-size:34px;line-height:1.3;letter-spacing:.2px;color:#075d2e}.kasikorn-panel .transfer-account button{border-color:#2d9d58;color:#087638;background:#fff;font-size:12px}.kasikorn-panel .transfer-owner{margin-bottom:0;font-size:14px;gap:10px}.kasikorn-panel .transfer-owner .muted{color:#537362}@media(max-width:760px){.kasikorn-panel{padding:16px}.kasikorn-panel .transfer-bank{font-size:18px;gap:10px}.kasikorn-panel .transfer-account strong{font-size:29px;white-space:nowrap}.kasikorn-panel .transfer-account button{margin-left:0}.kasikorn-panel .transfer-owner{display:block}.kasikorn-panel .transfer-owner b{display:block;margin-top:4px}.kasikorn-logo{width:44px;height:44px;background-size:465.4px 344.7px;background-position:-23px -56.5px}}@media(max-width:360px){.kasikorn-panel .transfer-account strong{font-size:25px}}

/* Transfer memo reminder */
.memo-reminder{background:#fff8df;border:1px solid #edc66c;border-radius:14px;padding:16px;margin-bottom:12px}.memo-reminder-title{color:#87520b;font-weight:600;font-size:17px;line-height:1.5;margin:0 0 5px}.memo-reminder-help{color:#786444;font-size:13px;margin:0 0 12px}.memo-reminder .transfer-memo{background:white;border:1px solid #eee1bd;margin:0}.memo-reminder .transfer-memo button{background:white}@media(max-width:760px){.memo-reminder{padding:13px}.memo-reminder-title{font-size:16px}.memo-reminder-help{font-size:12px}}

.basket-badge{position:fixed;right:18px;top:14px;z-index:30;box-shadow:0 3px 12px #32145b20;font-size:14px}.shop-header{padding-right:185px}.profile-option{display:flex;gap:8px;margin:10px 0}.profile-option>button:first-child{flex:1;text-align:left}.profile-option small{display:block;font-weight:400;overflow-wrap:anywhere}.basket-group{margin-bottom:16px}.basket-group .game-icon{float:right}.price-updated{text-align:right;font-size:11px;margin-top:-8px}.basket-group .row{gap:12px}.basket-group .row b{white-space:nowrap}@media(max-width:640px){.basket-badge{top:auto;bottom:82px;right:12px;font-size:12px}.shop-header{padding-right:16px}.price-updated{font-size:10px}.basket-group .actions{flex-wrap:wrap}}

/* Memo example and readable saved accounts */
.memo-example{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;padding:14px 0 0;background:transparent;color:#493b25;font-size:13px;border:0}.memo-example:hover{background:transparent;color:#251a3b}.memo-example-image{display:block;position:relative;overflow:hidden;width:200px;max-width:100%;aspect-ratio:383 / 720;border-radius:9px;border:1px solid #d9d4cd}.memo-example-image img{position:absolute;height:100%;width:253.7859%;max-width:none;left:-153.7859%;top:0}.memo-example small{color:#736549;font-size:12px}.memo-image-dialog{border:0;border-radius:14px;padding:14px;width:min(430px,94vw);max-height:94vh;overflow:auto}.memo-image-dialog::backdrop{background:#171124b3}.memo-image-dialog>button{display:block;margin:0 0 12px auto}.memo-image-dialog .memo-example-image{width:100%}.profile-option>button:first-child{background:#fff;color:#251a3b;border:1px solid #cbb6e9;padding:12px 14px;font-size:16px}.profile-option>button:first-child:hover{background:#f8f3ff;border-color:#7b3cdb}.profile-option small{color:#4e4265;font-size:14px;line-height:1.65;margin-top:5px;font-weight:400}.profile-option{align-items:stretch}.profile-option .secondary{flex-shrink:0}@media(max-width:640px){.profile-option small{font-size:13px}.memo-example-image{width:180px}}

.id-count-controls,.pack-id-choice{background:#f2ecfb;border-radius:12px;padding:12px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:14px 0}.id-count-controls label,.pack-id-choice label{display:flex;align-items:center;gap:6px;margin:0}.id-count-controls input[type=radio],.pack-id-choice input[type=radio]{width:auto;margin:0}.pack-id-choice input[type=number]{width:70px;padding:6px;margin:0}.pack-id-choice small{width:100%}.basket-id{border-top:1px solid #e4d8f1;padding:14px 0}.group-form-list{display:grid;gap:10px;margin:16px 0}.group-form-tab{display:grid;text-align:left;gap:5px;background:#fff;color:#251a3b;border:1px solid #d9c8ee}.group-form-tab.active{border:2px solid #7835dc;background:#f5efff}.group-form-tab span,.group-form-tab small{font-size:13px;color:#5e4e77}.pack-choice .qty-controls input.pack-quantity{width:44px;min-width:0;margin:0;padding:5px 2px;text-align:center;border:1px solid #d8c4f0;background:white;color:#251a3b;border-radius:7px;font:inherit;font-size:14px;appearance:textfield}.pack-quantity::-webkit-inner-spin-button,.pack-quantity::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.pack-choice .qty-controls{gap:4px}@media(max-width:480px){.pack-choice,.pack-choice.closed{grid-template-columns:minmax(0,1fr) 66px 110px}.pack-choice .qty-controls input.pack-quantity{width:38px}.basket-id .row{flex-wrap:wrap}}

/* Price timestamp follows viewport */
.price-updated{position:fixed;right:10px;bottom:8px;z-index:20;margin:0!important;padding:3px 7px;border-radius:6px;background:rgba(255,255,255,.9);color:#746980;font-size:10px;line-height:1.4;pointer-events:none;text-align:right}@media(max-width:640px){.price-updated{bottom:calc(8px + env(safe-area-inset-bottom));right:8px;font-size:9px}.mobile-cart{padding-bottom:30px}}

.shop-header{padding-right:24px}.cart-game{border:1px solid #e3d8f0;border-radius:12px;margin:12px 0;overflow:hidden}.cart-game-title{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:#f8f5fc;color:#251a3b;border-radius:0;padding:10px;font-size:14px}.cart-game-title img{width:34px;height:34px}.cart-id-settings{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:10px;background:#f0e9fc;font-size:12px}.cart-id-settings label{display:flex;align-items:center;gap:4px;margin:0}.cart-id-settings input[type=radio]{width:auto;margin:0}.cart-id-stepper{display:flex;align-items:center;gap:4px}.cart-id-stepper input{width:44px;padding:4px;margin:0;text-align:center}.cart-id-stepper button{padding:4px 9px}.cart-id-box{margin:8px;border:1px solid #e7ddf4;border-radius:8px;padding:6px}.cart-id-box.selected{border-color:#7734df;background:#f8f4ff}.cart-id-tab{width:100%;text-align:left;padding:6px 8px;background:#eee6fb;color:#5923aa;font-size:12px}.cart-line{display:grid;grid-template-columns:minmax(0,1fr) auto 26px;gap:5px;align-items:center;padding:6px 0;border-bottom:1px solid #eee7f7}.cart-line>button:first-child{background:transparent;color:#251a3b;text-align:left;padding:0;font-size:12px}.cart-line b{font-size:12px;white-space:nowrap}.cart-line .remove-selected{padding:3px;min-height:26px}.cart-id-box>p{font-size:12px;margin:8px}.cart-game-title:hover,.cart-line>button:first-child:hover{background:#ede5fa}

.cart-id-box{cursor:pointer}.cart-id-box:hover{border-color:#ad82ef}.remove-empty-game{display:block;margin:8px 10px;padding:5px 10px;background:#fff1f1;color:#c32d3a;border:1px solid #ffcaca;font-size:12px}.cart-add-game{margin-top:10px;margin-bottom:14px}

.group-form-tab.is-complete{background:#effaf3;border-color:#8bce9f;color:#165b32}.group-form-tab.is-complete small{color:#16723a;font-weight:600}.group-form-tab.is-pending{background:#fff3f3;border-color:#efa4aa;color:#852332}.group-form-tab.is-pending small{color:#bb263b;font-weight:600}.group-form-tab.is-complete.active{box-shadow:0 0 0 2px #42a568}.group-form-tab.is-pending.active{box-shadow:0 0 0 2px #dd6676}

.cart-game{position:relative}.cart-game-title{padding-right:42px}.remove-cart-game{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:28px;height:28px;padding:0;border-radius:8px;border:1px solid #efb9bf;background:#fff1f2;color:#b8293d;font-size:21px;line-height:1}.remove-cart-game:hover{background:#ffe0e5}

.remove-game-dialog{width:min(440px,calc(100% - 32px));border:1px solid #dfd2f1;border-radius:16px;padding:24px;color:#251a3b}.remove-game-dialog::backdrop{background:#21133480}.remove-game-dialog h2{margin-top:0}.remove-game-dialog [data-confirm]{background:#c42b42}

#games{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.game.game-tile{align-items:center;justify-content:flex-start;text-align:center;padding:18px 10px 14px;gap:12px;min-height:152px;background:#fff;border-radius:18px;transition:transform .15s,box-shadow .15s}.game.game-tile:hover{transform:translateY(-3px);box-shadow:0 6px 18px #7136d817;filter:none}.game-tile-art{display:grid;place-items:center;width:80px;height:80px}.game-tile .game-icon{width:80px;height:80px;border-radius:20px;box-shadow:0 3px 9px #251a3b1a}.game.game-tile b{font-size:14px;line-height:1.4;overflow-wrap:anywhere}.game-icon-fallback{display:grid;place-items:center;width:80px;height:80px;border-radius:20px;background:linear-gradient(135deg,#eee6ff,#d9cef7);color:#6833bc;font-size:24px;font-weight:600}@media(max-width:800px){#games{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:560px){#games{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.game.game-tile{padding:12px 6px;min-height:130px;gap:9px;border-radius:14px}.game-tile-art,.game-tile .game-icon,.game-icon-fallback{width:64px;height:64px;border-radius:16px}.game.game-tile b{font-size:12px;line-height:1.45}}

#games{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.game.game-banner{position:relative;isolation:isolate;overflow:hidden;flex-direction:row;align-items:center;text-align:left;justify-content:flex-start;min-height:94px;padding:14px;gap:13px;border:1px solid #ffffff38;background:#514465;color:#fff;border-radius:15px;box-shadow:0 3px 10px #251a3b12}.game-banner-bg{position:absolute;inset:0;z-index:-2;background:linear-gradient(110deg,#786289,#413955);pointer-events:none}.game-banner-bg .game-icon{width:100%;height:100%;border-radius:0;object-fit:cover;filter:blur(12px);transform:scale(1.22);opacity:.8;box-shadow:none}.game.game-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#17122230,#17122280);z-index:-1;pointer-events:none}.game-banner .game-tile-art{flex:0 0 62px;width:62px;height:62px}.game-banner .game-tile-art .game-icon,.game-banner .game-icon-fallback{width:62px;height:62px;border-radius:13px;box-shadow:0 2px 8px #0003}.game.game-banner b{font-size:17px;line-height:1.35;color:#fff;text-shadow:0 1px 3px #0009;overflow-wrap:anywhere}.game.game-banner:hover{filter:none;transform:translateY(-2px);border-color:#bda0ef;box-shadow:0 5px 16px #251a3b26}@media(max-width:900px){#games{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){#games{grid-template-columns:1fr;gap:10px}.game.game-banner{min-height:86px;padding:12px 14px;gap:14px}.game.game-banner b{font-size:18px}.game-banner .game-tile-art,.game-banner .game-tile-art .game-icon,.game-banner .game-icon-fallback{width:58px;height:58px;flex-basis:58px}}

.pack-selection-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}.pack-selection-header>h2{margin:7px 0 0;white-space:nowrap}.pack-selection-header .method-picker{margin:0;padding:0;border:0}.pack-selection-header .method-line{gap:8px;justify-content:flex-end}.pack-selection-header .method-line>b{font-size:12px}.pack-selection-header .method-button{min-width:90px;padding:7px 11px;font-size:14px}.pack-selection-header .method-help{font-size:12px;margin:6px 0 0;text-align:right}@media(max-width:560px){.pack-selection-header{gap:10px}.pack-selection-header .method-picker{width:100%}.pack-selection-header .method-line{justify-content:flex-start}.pack-selection-header .method-line>b{width:auto}.pack-selection-header .method-buttons{width:auto;flex:1}.pack-selection-header .method-help{text-align:left}}

.pack-selection-header .method-button{min-width:106px;padding:10px 15px;font-size:16px;min-height:48px;transition:background .2s,box-shadow .2s,transform .2s}.pack-selection-header .method-button.selected{animation:method-selected-glow 2.8s ease-in-out infinite}.pack-selection-header .method-button:active{transform:scale(.97)}@keyframes method-selected-glow{0%,100%{box-shadow:0 0 0 2px #7136d81a,0 2px 8px #7136d81a}50%{box-shadow:0 0 0 4px #7136d82e,0 3px 14px #7136d83d}}@media(prefers-reduced-motion:reduce){.pack-selection-header .method-button.selected{animation:none;box-shadow:0 0 0 3px #7136d82e}.pack-selection-header .method-button{transition:none}}

/* Automatic storefront day/night theme, isolated from admin. */
html[data-shop-theme=day]{background:#fafafa}
.shop-night-sky{display:none;position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
html[data-shop-theme] body{isolation:isolate}
html[data-shop-theme=night]{color-scheme:dark;background:#0c1127;color:#f0effb;--line:#41415e;--muted:#b3b7cf;--purple:#a985ff}
html[data-shop-theme=night] .shop-night-sky{display:block;background:radial-gradient(ellipse at 72% 0%,#24204766,transparent 65%)}
.shop-star{position:absolute;width:var(--star-size);height:var(--star-size);border-radius:50%;background:#dce7ff;opacity:.4;animation:shop-twinkle var(--star-time) ease-in-out var(--star-delay) infinite}
.shop-meteor{position:absolute;width:100px;height:1px;background:linear-gradient(90deg,transparent,#dce5ff);transform:rotate(-24deg);opacity:0;animation:shop-meteor 18s linear infinite}
@keyframes shop-twinkle{0%,100%{opacity:.16;transform:scale(.8)}50%{opacity:.72;transform:scale(1.1)}}
@keyframes shop-meteor{0%,84%,100%{opacity:0;transform:translate(0,0) rotate(-24deg)}86%{opacity:.7}93%{opacity:0;transform:translate(-260px,115px) rotate(-24deg)}}
.shop-page-hidden .shop-star,.shop-page-hidden .shop-meteor{animation-play-state:paused}
html[data-shop-theme=night] :is(.shop-header,.card,.panel,.mobile-cart,dialog,.transfer-layout .transfer-payment){background:#1b203a;color:#f0effb;border-color:var(--line)}
html[data-shop-theme=night] .brand>span{color:#f0effb}
html[data-shop-theme=night] :is(.brand small,.contact-label){color:#b3b7cf}
html[data-shop-theme=night] :is(input,select,textarea,.pack-choice,.pack-choice .qty-controls input.pack-quantity){background:#20253f;color:#f0effb;border-color:#595675}
html[data-shop-theme=night] input::placeholder,html[data-shop-theme=night] textarea::placeholder{color:#acb1c9;opacity:1}
html[data-shop-theme=night] :is(.method-button,button.secondary,.button.secondary,.badge,.note,.saved-game,.transfer-summary .total,.id-count-controls,.pack-id-choice,.cart-id-settings,.cart-id-tab,.calc-option,.calc-rank button,.transfer-memo,.slip-drop){background:#30294c;color:#ded1ff;border-color:#5d4c7a}
html[data-shop-theme=night] :is(button:not(.secondary):not(.method-button):not(.game):not(.pack-name):not(.cart-game-title):not(.cart-id-tab):not(.remove-selected):not(.remove-cart-game):not(.group-form-tab),.button){--purple:#7136d8}
html[data-shop-theme=night] .method-button.selected{background:#7136d8;color:white;border-color:#b190ff}
html[data-shop-theme=night] .pack-name{color:#f0effb;background:transparent}
html[data-shop-theme=night] :is(.pack-choice.in-cart,.pack-choice:not(.closed):hover:not(:has(.qty-controls:hover)),.pack-choice:not(.closed) .pack-name:hover,.cart-id-box.selected,.payment-option.chosen,.calc-option.best,.calc-rank button.best){background:#2c264a;border-color:#a382e4}
html[data-shop-theme=night] :is(.cart-game-title,.cart-line>button:first-child,.profile-option>button:first-child){background:#242944;color:#f0effb}
html[data-shop-theme=night] :is(.cart-game-title:hover,.cart-line>button:first-child:hover,.profile-option>button:first-child:hover){background:#343052}
html[data-shop-theme=night] :is(.cart-game,.cart-id-box,.cart-line,.basket-id,.selected-item){border-color:var(--line)}
html[data-shop-theme=night] :is(.method-help,.pack-note,.group-form-tab span,.group-form-tab small,.profile-option small,.price-updated){color:#c0bdd4}
html[data-shop-theme=night] .price-updated{background:#1b203acc}
html[data-shop-theme=night] .group-form-tab{background:#242944;color:#f0effb;border-color:#595675}
html[data-shop-theme=night] .group-form-tab.is-complete{background:#173b32;color:#c5f4d7;border-color:#43866b}
html[data-shop-theme=night] .group-form-tab.is-complete small{color:#9ce1b7}
html[data-shop-theme=night] .group-form-tab.is-pending{background:#422733;color:#ffdae0;border-color:#a1596e}
html[data-shop-theme=night] .group-form-tab.is-pending small{color:#ffb6c3}
html[data-shop-theme=night] :is(.error,.remove-selected,.remove-cart-game){background:#482636;color:#ffc9d3;border-color:#a85d73}
html[data-shop-theme=night] :is(.success,#cartFeedback:not(:empty)){background:#173b32;color:#b6edca}
html[data-shop-theme=night] :is(.warning,.memo-reminder){background:#45371e;color:#ffe4a9;border-color:#887043}
html[data-shop-theme=night] .memo-reminder .transfer-memo{background:#302b22;color:#ffe7b5}
html[data-shop-theme=night] .memo-reminder .transfer-memo button{background:#615033;color:#fff1ca}
html[data-shop-theme=night] .kasikorn-panel{background:#153b32;border-color:#40846c;color:#e2f7ec}
html[data-shop-theme=night] .kasikorn-panel .transfer-account button{background:#244e40;color:#cdf5df;border-color:#55987b}
html[data-shop-theme=night] .code{background:#30294c;color:#e1ceff}
html[data-shop-theme=night] .memo-example{background:#30294c;color:#ded1ff}
html[data-shop-theme=night] :is(.total,.payment-option strong){color:#c9aaff}
@media(prefers-reduced-motion:reduce){.shop-star{animation:none;opacity:.4}.shop-meteor{display:none}}
html[data-shop-theme=night] .pack-choice.closed{background:#7b2438;border-color:#bf536b;color:#fff}html[data-shop-theme=night] .pack-choice.closed .pack-name{color:#fff}

/* Admin compact expandable order rows */
.admin-orders{margin-top:20px}.admin-table-scroll{overflow-x:auto;border:1px solid #dfd5f2;border-radius:14px;background:#fff}.admin-order-table{border-collapse:collapse;width:100%;font-size:13px}.admin-order-table th{background:#f1ebfc;text-align:left;color:#574479;padding:13px 10px;white-space:nowrap}.admin-order-row{cursor:pointer}.admin-order-row>td{padding:12px 10px;border-top:1px solid #eee7f7;white-space:nowrap}.admin-order-row:hover{background:#faf7ff}.admin-order-row:has([aria-expanded="true"]){background:#f0e8ff}.admin-order-row .admin-game{max-width:240px;overflow:hidden;text-overflow:ellipsis}.admin-amount{font-weight:600;color:#7435df}.admin-order-row button{padding:6px 10px;font-size:12px}.admin-order-detail>td{padding:16px;background:#f8f5fd;white-space:normal}.admin-order-detail .card{margin:0;max-width:850px}.admin-order-detail .details{white-space:normal}.admin-order-table .badge{white-space:nowrap}

.bank-transfer-warning{background:#dc2626;color:#fff;font-size:17px;font-weight:600;padding:16px 18px;border-radius:12px;margin:0 0 16px;line-height:1.6}.receipt-chat-instructions{font-size:18px;line-height:1.9}.receipt-chat-links{display:flex;flex-wrap:wrap;gap:16px;margin:24px 0 8px}.receipt-chat-link{display:flex;align-items:center;justify-content:center;gap:16px;padding:20px 26px;min-height:96px;flex:1 1 260px;border:1px solid;border-radius:18px;text-decoration:none;font-size:20px;font-weight:600}.receipt-chat-link .contact-icon{width:56px;height:56px}.receipt-chat-link .facebook-icon{font-size:58px;padding-top:10px}.receipt-chat-link .line-icon{font-size:15px}.receipt-chat-link .line-icon:after{left:15px;bottom:-3px;border-top-width:10px;border-right-width:10px}@media(max-width:520px){.receipt-chat-link{flex-basis:100%;padding:18px 20px;font-size:19px}.receipt-chat-instructions{font-size:17px}}

button.copy-order-code{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;background:#f0eafa;color:#7135e9;border:1px solid transparent;cursor:pointer;white-space:normal;overflow-wrap:anywhere}button.copy-order-code:hover{border-color:#a78bfa}button.copy-order-code:focus-visible{outline:3px solid #a78bfa;outline-offset:3px}.code-copy-status{font:600 14px Kanit,sans-serif;flex-shrink:0}.copy-order-code.copied{animation:code-copy-flash .65s ease-out}@keyframes code-copy-flash{0%,100%{background:#f0eafa}45%{background:#d4f5df;color:#16733a}}@media(max-width:540px){button.copy-order-code{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){.copy-order-code.copied{animation:none;background:#d4f5df;color:#16733a}}

.cart-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.cart-heading-total{font-size:20px;font-weight:700;color:#7135e9;white-space:nowrap}

.cart-heading-total{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;justify-content:flex-end}.cart-heading-count{font-size:13px;font-weight:400;color:#756b89}

#basketSubmit .check{display:flex;align-items:center;gap:12px;padding:18px;border:2px solid #b69ae9;border-radius:12px;background:#f3edff;font-size:17px;font-weight:600;cursor:pointer}#basketSubmit .check input{width:24px;height:24px;flex:0 0 24px;accent-color:#7135e9;cursor:pointer}#basketSubmit .check:has(input:checked){border-color:#7135e9;background:#ebe0ff}#basketSubmit .actions{display:flex;flex-wrap:wrap;gap:10px}#basketSend{flex-basis:100%;min-height:56px;font-size:19px;font-weight:600;margin-top:8px}#basketSend:disabled{opacity:1;background:#e4dbee;color:#756385;cursor:not-allowed}#basketError:empty{display:none}

.receipt-code-panel{scroll-margin-top:16px}.copy-code-heading{font-size:clamp(21px,3vw,28px);color:#7135e9;margin:0 0 18px;font-weight:700}.receipt-code-panel #copyCode{font-size:18px;min-height:54px;padding:14px 24px}

.receipt-intro{color:#776c8c}.receipt-guide{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;margin:24px 0}.receipt-guide .receipt-code-panel,.receipt-guide .receipt-example{margin:0;padding:26px;min-width:0}.receipt-step{display:flex;gap:14px;align-items:flex-start}.receipt-number{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#7135e9;color:#fff;font-weight:600}.receipt-step h2{margin:0;font-size:21px}.receipt-step p,.receipt-example>p{color:#776c8c;margin:6px 0}.receipt-guide .copy-order-code{margin:20px 0 12px;text-align:center;justify-content:center;font-size:21px}.receipt-guide #copyCode{width:100%}.receipt-guide hr{border:0;border-top:1px solid #eee8f5;margin:24px 0}.receipt-guide .receipt-chat-links{margin-top:16px;gap:10px}.receipt-guide .receipt-chat-link{min-height:68px;padding:12px;gap:10px;font-size:16px}.receipt-guide .contact-icon{width:34px;height:34px;flex:0 0 34px}.receipt-guide .facebook-icon{font-size:30px}.receipt-guide .line-icon{font-size:10px}.receipt-slip-tip{padding:16px;background:#f8f6fc;border-radius:12px;margin-top:16px;color:#655877}.receipt-guide .note{margin-top:20px}.receipt-example h2{font-size:19px;margin:0 0 4px}.receipt-chat-demo{margin-top:20px;background:#f6f7fa;border:1px solid #e8e8ed;border-radius:16px;overflow:hidden}.receipt-demo-head{background:white;padding:14px;border-bottom:1px solid #eee;font-weight:600}.receipt-messages{padding:20px 14px;display:flex;flex-direction:column;align-items:flex-end;gap:14px}.receipt-bubble{background:#7135e9;color:white;border-radius:15px 15px 3px 15px;padding:12px;font-size:13px;overflow-wrap:anywhere;max-width:100%}.receipt-messages>small{font-size:12px;color:#8a7c9e}.receipt-demo-slip{width:158px;background:white;border-radius:12px;padding:17px;box-shadow:0 2px 8px #ddd;color:#675a80;text-align:center}.receipt-demo-slip b{display:block;font-size:24px;color:#1aac65}.receipt-demo-slip strong{display:block}.receipt-demo-slip i{display:block;height:5px;background:#ece9f3;margin:10px auto;border-radius:5px;width:90%}.receipt-demo-slip span{font-size:12px}.receipt-example .receipt-example-note{padding:18px 0 0;font-size:14px;line-height:1.8}@media(max-width:760px){.receipt-guide{grid-template-columns:1fr}.receipt-guide .receipt-example{display:none}.receipt-guide .receipt-code-panel{padding:20px}.receipt-guide .copy-order-code{font-size:17px}.receipt-step h2{font-size:19px}.receipt-guide .receipt-chat-links{grid-template-columns:1fr 1fr}.receipt-guide .receipt-chat-link{font-size:14px;flex-wrap:wrap}} 

.receipt-guide .copy-order-code{font-size:clamp(24px,2.8vw,32px);font-weight:700;line-height:1.45;padding:22px 16px}.receipt-guide .copy-order-code>span{min-width:0;overflow-wrap:anywhere}@media(max-width:760px){.receipt-guide .copy-order-code{font-size:clamp(22px,5.7vw,28px);padding:20px 12px}}

/* Six-step storefront: clear hierarchy, one primary next action per viewport. */
.flow-progress{display:block;margin:0 0 26px;padding:16px 20px;background:#fff;border:1px solid var(--line);border-radius:16px}.flow-progress ol{display:flex;list-style:none;padding:0;margin:0;gap:12px}.flow-progress li{flex:1;display:flex;align-items:center;gap:8px;color:#8e849c;font-size:13px;position:relative}.flow-progress li:not(:last-child):after{content:'';height:2px;background:#e7def5;flex:1;min-width:8px}.flow-progress li span{width:28px;height:28px;display:grid;place-items:center;flex:none;border-radius:50%;background:#ede7f5;color:#746682;font-weight:600}.flow-progress .current{color:#7135e9}.flow-progress .current span,.flow-progress .complete span{background:#7135e9;color:white}.flow-progress p{display:none}.flow-title-number{display:inline-grid;place-items:center;background:#7135e9;color:#fff;width:36px;height:36px;border-radius:50%;font-size:21px;margin-right:12px;vertical-align:middle;flex:none}
main[data-flow-step] h1{font-size:clamp(25px,3.2vw,34px)}main[data-flow-step="2"]{max-width:780px}main[data-flow-step="2"] .payment-options{max-width:none;margin:24px 0 18px}main[data-flow-step="2"] .payment-option{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:4px 16px;padding:20px 50px 20px 20px;border-width:2px;min-height:112px}main[data-flow-step="2"] .payment-option:before{content:'🏦';grid-row:1/4;width:50px;height:50px;align-self:center;display:grid;place-items:center;background:#e8f6ed;border-radius:12px;font-size:28px}.payment-option[data-basket-payment="wallet"]:before,.payment-option[data-payment="wallet"]:before{content:'🧧';background:#fff1e3}.payment-option[data-basket-payment="card"]:before,.payment-option[data-payment="card"]:before{content:'💳';background:#eaf3ff}main[data-flow-step="2"] .payment-option>b{grid-column:2;font-size:19px}main[data-flow-step="2"] .payment-option>strong{grid-column:3;grid-row:1/3;align-self:center;font-size:25px}main[data-flow-step="2"] .payment-option>span{grid-column:2;font-size:14px;color:var(--muted)}main[data-flow-step="2"] .payment-option:after{content:'';position:absolute;right:18px;top:calc(50% - 9px);width:17px;height:17px;border:2px solid #c7b8da;border-radius:50%}main[data-flow-step="2"] .payment-option.chosen:after{background:#7135e9;border-color:#7135e9;box-shadow:inset 0 0 0 3px white}main[data-flow-step="2"]>#basketReview,main[data-flow-step="2"]>#paymentNext{max-width:none;min-height:54px;font-size:19px;margin-top:20px}
#orderForm>.check,.flow-confirm,#allFieldsConfirm>.check{padding:16px;border:2px solid #cfb8f4;border-radius:12px;background:#f5efff;cursor:pointer;font-weight:600;align-items:center}#orderForm>.check input,.flow-confirm input,#allFieldsConfirm>.check input{width:24px;height:24px;flex:none;margin:0;accent-color:#7135e9}#orderForm>.check:has(input:checked),.flow-confirm:has(input:checked){background:#eee3ff;border-color:#7135e9}#orderForm #submitOrder,#allIdsReview,#reviewForm #submitOrder{min-height:54px;font-size:18px;width:100%;margin-top:12px}#orderForm input[data-field],#orderForm select[data-field]{min-height:50px}#orderForm label{font-weight:500}#orderForm .saved-game{border-radius:14px}#orderForm #formError:empty{display:none}#orderForm>.note{font-size:13px}.group-form-tab{padding:18px!important}.group-form-tab b{font-size:17px}
main[data-flow-step="4"]{max-width:900px}main[data-flow-step="4"]>.card h2{margin-top:0;padding-bottom:14px;border-bottom:1px solid var(--line)}main[data-flow-step="4"] .details{background:#f8f5fc;padding:16px;border-radius:12px;font-size:15px}main[data-flow-step="4"] #basketSubmit .total{font-size:32px}main[data-flow-step="4"] #basketSubmit .actions .secondary{font-size:14px}main[data-flow-step="5"] .transfer-amount{padding:20px;background:#f2eafb;border-radius:14px;text-align:center}main[data-flow-step="5"] .transfer-amount strong{font-size:42px}main[data-flow-step="5"] #receiveCode{min-height:56px;font-size:20px}main[data-flow-step="5"] .transfer-upload>p{font-size:15px;color:var(--muted)}main[data-flow-step="1"] .game-heading{margin-bottom:22px}main[data-flow-step="1"] #checkout{min-height:52px;font-weight:600}main[data-flow-step="1"] .cart-heading{margin-top:0}.receipt-guide{margin-top:20px}
html[data-shop-theme=night] .flow-progress{background:#1b203a;border-color:var(--line)}html[data-shop-theme=night] .flow-progress .current{color:#d2b7ff}html[data-shop-theme=night] :is(#orderForm>.check,.flow-confirm,#allFieldsConfirm>.check,main[data-flow-step="4"] .details,main[data-flow-step="5"] .transfer-amount){background:#2c264a;color:#f0effb}html[data-shop-theme=night] .flow-progress li{color:#bbb0d0}
@media(max-width:760px){.flow-progress{padding:12px;margin-bottom:20px}.flow-progress ol{gap:6px}.flow-progress li{gap:5px}.flow-progress li b{display:none}.flow-progress li span{width:26px;height:26px}.flow-progress p{display:block;margin:10px 0 0;color:var(--muted);font-size:13px}.flow-title-number{width:30px;height:30px;font-size:18px;margin-right:9px}.game-heading h1{font-size:24px}.game-heading .game-hero-icon{width:48px;height:48px}.pack-selection-header{align-items:flex-start}.method-buttons{gap:7px}main[data-flow-step="2"] .payment-option{padding:16px 36px 16px 14px;grid-template-columns:40px minmax(0,1fr);gap:3px 12px;min-height:104px}main[data-flow-step="2"] .payment-option:before{width:40px;height:40px;font-size:23px}main[data-flow-step="2"] .payment-option>b{font-size:17px}main[data-flow-step="2"] .payment-option>strong{grid-column:2;grid-row:auto;font-size:23px}main[data-flow-step="2"] .payment-option>span{font-size:13px}main[data-flow-step="2"] .payment-option:after{right:12px}#orderForm>.check,.flow-confirm{font-size:15px}main[data-flow-step="4"] .details{grid-template-columns:100px minmax(0,1fr);font-size:14px}main[data-flow-step="4"] #basketSubmit .actions .secondary{flex:1;padding:10px;font-size:13px}main[data-flow-step="5"] .transfer-amount strong{font-size:36px}main[data-flow-step="1"] #checkout{display:none}main[data-flow-step="1"] .mobile-cart button{font-size:15px;padding:12px}main[data-flow-step="1"] .mobile-cart .total{font-size:22px}}

.flow-progress li{flex-direction:column;gap:6px}.flow-progress li b{white-space:nowrap;font-size:12px}.flow-progress li:not(:last-child):after{position:absolute;top:13px;left:calc(50% + 20px);width:calc(100% - 28px)}main[data-flow-step="2"] .payment-option[data-basket-payment="wallet"]:before,main[data-flow-step="2"] .payment-option[data-payment="wallet"]:before{content:'🧧';background:#fff1e3}main[data-flow-step="2"] .payment-option[data-basket-payment="card"]:before,main[data-flow-step="2"] .payment-option[data-payment="card"]:before{content:'💳';background:#eaf3ff}

/* High-contrast night colors for the six-stage checkout and receipt. */
html[data-shop-theme=night]{--muted:#c4c5dc}
html[data-shop-theme=night] :is(.cart-heading-total,.copy-code-heading,.receipt-step h2,.flow-progress .current,.receipt-example h2){color:#ddc5ff}
html[data-shop-theme=night] :is(.cart-heading-count,.receipt-intro,.receipt-step p,.receipt-example>p,.receipt-example .receipt-example-note,.receipt-messages>small,.memo-reminder-help,.memo-reminder-title,.transfer-owner .muted,.transfer-account .muted){color:#cdd0e5}
html[data-shop-theme=night] .receipt-guide .copy-order-code{background:#30294c;color:#eadfff;border-color:#9e81d5}
html[data-shop-theme=night] .receipt-guide .copy-order-code .code-copy-status{color:#d5f8df}
html[data-shop-theme=night] .receipt-guide .copy-order-code.copied{animation:none;background:#174734;color:#d5f8df}
html[data-shop-theme=night] :is(.receipt-slip-tip,.receipt-chat-demo,.receipt-demo-head){background:#242944;color:#e9e9f7;border-color:#555a79}
html[data-shop-theme=night] .receipt-demo-slip{background:#303650;color:#f0effb;box-shadow:none}
html[data-shop-theme=night] .receipt-demo-slip b{color:#8ce0ad}
html[data-shop-theme=night] .receipt-demo-slip i{background:#646a86}
html[data-shop-theme=night] .receipt-guide hr{border-color:#55516d}
html[data-shop-theme=night] :is(.flow-progress .complete,.flow-progress p,.details dt){color:#cdd0e5}
html[data-shop-theme=night] .flow-progress li:not(:last-child):after{background:#68617f}
html[data-shop-theme=night] .flow-progress li:not(.current):not(.complete) span{background:#343a55;color:#dedff1}
html[data-shop-theme=night] :is(#basketSubmit .check,#orderForm>.check,.flow-confirm,#allFieldsConfirm>.check){background:#30294c;color:#f4edff;border-color:#aa8bd9}
html[data-shop-theme=night] :is(#basketSubmit .check,#orderForm>.check,.flow-confirm,#allFieldsConfirm>.check):has(input:checked){background:#41315e;color:#fff;border-color:#c5a6ff}
html[data-shop-theme=night] #basketSend:disabled,html[data-shop-theme=night] :is(#submitOrder,#allIdsReview,#checkout,#mobileCheckout):disabled{opacity:1;background:#41445b;color:#d2d2e2}
html[data-shop-theme=night] main[data-flow-step="2"] .payment-option>span{color:#d1cde3}
html[data-shop-theme=night] main[data-flow-step="2"] .payment-option>b{color:#f4f0ff}
html[data-shop-theme=night] main[data-flow-step="2"] .payment-option:after{border-color:#b9a4d8}
html[data-shop-theme=night] main[data-flow-step="4"] .details,html[data-shop-theme=night] main[data-flow-step="5"] .transfer-amount{color:#f4efff}
html[data-shop-theme=night] .memo-reminder :is(.memo-reminder-help,.memo-reminder-title){color:#ffe5ae}
html[data-shop-theme=night] :is(.kasikorn-panel .transfer-account strong,.kasikorn-panel .transfer-bank,.kasikorn-panel .transfer-owner b){color:#d0f6df}
html[data-shop-theme=night] .receipt-chat-link.contact-facebook{background:#182f50;color:#b5d8ff;border-color:#537caa}
html[data-shop-theme=night] .receipt-chat-link.contact-line{background:#143b2b;color:#a6efc1;border-color:#478767}