@font-face{font-family:LakornPwa;font-style:normal;font-weight:400;font-display:swap;src:url('/assets/pwa/noto-thai-400.ttf') format('truetype')}

@font-face{font-family:LakornPwa;font-style:normal;font-weight:700;font-display:swap;src:url('/assets/pwa/noto-thai-700.ttf') format('truetype')}

@font-face{font-family:LakornPwa;font-style:normal;font-weight:800;font-display:swap;src:url('/assets/pwa/noto-thai-800.ttf') format('truetype')}



.pwa-install{position:fixed;inset:auto auto max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));z-index:120;font-family:LakornPwa,"Noto Sans Thai",sans-serif;color:#f7f7fa;background:#151519;border:1px solid #55515a;border-radius:18px;padding:0;width:min(340px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));margin:0;overflow:auto;overscroll-behavior:contain;box-sizing:border-box;box-shadow:0 12px 32px #0008;text-align:left}

.pwa-install:not([open]){display:none}.pwa-install *{box-sizing:border-box}

.pwa-art{display:none}.pwa-content{position:relative;padding:16px}

.pwa-close{position:absolute;right:6px;top:6px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#24242b;color:white;padding:12px;z-index:1}.pwa-close img{width:20px;height:20px}

.pwa-app-icon{display:block;float:left;width:48px;height:48px;border-radius:13px;margin:2px 12px 10px 0}

.pwa-install h2{font-size:19px;font-weight:800;line-height:1.45;margin:0 28px 12px 0;letter-spacing:-.2px}

.pwa-install p{clear:both;font-size:13px;line-height:1.65;margin:0 0 12px;color:#c4c4ce}.pwa-install button{font-family:inherit;cursor:pointer;touch-action:manipulation}

.pwa-primary,.pwa-secondary{display:block;width:100%;min-height:44px;border-radius:11px;padding:10px 8px;font-weight:700}

.pwa-primary{border:0;background:#ff642f;color:#fff;font-size:15px}.pwa-primary:hover{background:#ff763c}

.pwa-secondary{margin-top:8px;background:#202026;border:1px solid #494950;color:#c8c8d2;font-size:14px}.pwa-secondary:hover{background:#292932;color:#fff}

.pwa-install button:focus-visible,.pwa-install a:focus-visible{outline:2px solid white;outline-offset:-3px}.pwa-install button:disabled{opacity:.65;cursor:wait}.pwa-install [hidden]{display:none!important}

.pwa-install .pwa-status{margin:12px 0 0;font-size:13px}.pwa-install .pwa-status:empty{display:none}

.pwa-install.is-help .pwa-app-icon{display:none}.pwa-install.is-help h2{font-size:19px;margin-right:32px}.pwa-install .pwa-help-intro{margin-bottom:10px;font-size:13px}

.pwa-steps{padding:0;margin:0 0 12px;list-style:none;counter-reset:pwa-steps}.pwa-steps li{counter-increment:pwa-steps;display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid #ffffff20;font-size:13px;line-height:1.65}.pwa-steps li::before{content:counter(pwa-steps);color:#ff986c;min-width:18px;font-weight:800}

.pwa-install .pwa-hint{font-size:12px;color:#b2b2be;margin-bottom:12px}.pwa-open-link{display:inline-block;min-height:44px;line-height:1.5}

@media(max-width:900px){.pwa-install{left:max(12px,env(safe-area-inset-left,0px));bottom:calc(var(--mobile-tabbar-height,76px) + 12px);width:min(320px,calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));max-height:calc(100dvh - var(--mobile-tabbar-height,76px) - 28px - env(safe-area-inset-top,0px))}}

@media(prefers-reduced-motion:no-preference){.pwa-install[open]{animation:pwa-enter .18s ease-out}@keyframes pwa-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}



/* Compact character invitation; keep the help panel readable. */

.pwa-install{width:min(288px,calc(100vw - 32px));border-radius:15px}

.pwa-art{display:block;position:absolute;inset:0 auto 0 0;width:88px;overflow:hidden;border-radius:14px 0 0 14px;pointer-events:none}

.pwa-art>img{display:block;width:100%;height:100%;object-fit:cover;object-position:8% top}

.pwa-content{padding:12px 10px 8px 98px}

.pwa-app-icon{display:none}

.pwa-install h2{font-size:16px;line-height:1.4;letter-spacing:0;margin:0 26px 7px 0}

.pwa-install p{font-size:12px;line-height:1.55;margin-bottom:8px}

.pwa-primary{font-size:13px;padding:9px 5px;min-height:44px}

.pwa-secondary{font-size:12px;padding:8px 4px;min-height:44px;margin-top:4px}

.pwa-close{right:2px;top:2px;background:transparent;width:44px;height:44px;padding:13px}.pwa-close img{width:18px;height:18px}

.pwa-install.is-help{width:min(320px,calc(100vw - 32px))}

.pwa-install.is-help .pwa-art{display:none}

.pwa-install.is-help .pwa-content{padding:14px}

.pwa-install.is-help h2{font-size:18px;margin-right:32px}

.pwa-install.is-help p,.pwa-install.is-help .pwa-primary,.pwa-install.is-help .pwa-secondary{font-size:13px}

@media(max-width:900px){.pwa-install{width:min(276px,calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)))}.pwa-install.is-help{width:min(304px,calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)))}}