@import"https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap";:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{width:100%;font-family:Bitter;--bottom-row-height: 15vh}.page{display:flex;flex-direction:column;min-height:100vh;padding:clamp(.7rem,.781vw,1.2rem);background-color:#e5e4e2;box-sizing:border-box}.header{display:flex;align-items:center;flex-shrink:0;width:100%}.logo{margin-right:clamp(.6566rem,.733vw,1.1256rem);flex-shrink:0;transition:box-shadow .3s ease-in-out}.logo img:hover{box-shadow:0 .625rem 1.25rem #0006}.logo img{width:100%;max-width:clamp(calc(21.688rem * .7),16.944vw,calc(21.688rem * 1.2));margin-top:clamp(.6566rem,.733vw,1.1256rem)}.header-container{background-color:#353935;width:100%;padding:.625rem .625rem 1.25rem 1.25rem;border-radius:clamp(.63rem,.703vw,1.08rem);border:1px solid transparent;outline:1px solid transparent;display:flex;flex-direction:column;align-items:flex-start;flex-grow:1}.welcome-message{color:#e5e4e2;font-size:clamp(.7875rem,.879vw,calc(1.125rem * 1.2));line-height:1.5}.fetch-trophy-container{display:flex;gap:clamp(.6566rem,.733vw,1.1256rem);align-items:center;position:relative}.input-container{display:flex;align-items:center;justify-content:space-between;position:relative}.input-psn-id{background-color:#e5e4e2;color:#3d6685;padding:.625rem .938rem;width:100%;font-family:Bitter;font-size:clamp(.7rem,.781vw,1.2rem);width:clamp(17.5rem,19.531vw,30rem);border:0}.input-psn-id:focus{outline:none;border:0}.input-psn-id:focus+.shortcut-keys{opacity:.5}.shortcut-keys{display:flex;align-items:center;position:absolute;right:clamp(.2191rem,.245vw,.3756rem)}.shortcut-keys #ctrl-key{height:clamp(1.6191rem,1.807vw,calc(2.313rem * 1.2))}.shortcut-keys #k-key{height:clamp(1.3125rem,1.465vw,2.25rem)}.buttons{font-weight:700;font-size:clamp(.7rem,.781vw,1.2rem);font-family:Montserrat;font-style:italic;color:#e5e4e2;background-color:#0455bf;padding:.625rem .938rem;border:#353935;border-radius:clamp(.1316rem,.147vw,.2256rem);transition:transform .1s ease-out,background-color .2s ease-out}.buttons:hover{cursor:pointer;outline:none;border:#E5E4E2}.buttons:active{background-color:#0047ab;box-shadow:none;border:#353935}.message-container{position:absolute;left:calc(100% + .938rem);top:50%;transform:translateY(-50%);width:100%}.loading-text{color:#e5e4e2;font-size:clamp(.7rem,.781vw,1.2rem);font-weight:700;animation:pulse 1s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.error-text{color:#ee4b2b;font-weight:700;font-size:clamp(.7875rem,.879vw,calc(1.125rem * 1.2))}.content{display:flex;margin-top:clamp(.7rem,.781vw,1.2rem);flex-grow:1;width:100%}.content-container{display:flex;width:100%;position:relative;overflow:hidden;background-color:#353935}.content-container:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;background-image:linear-gradient(to bottom,transparent 10%,#353935 65%);pointer-events:none}.content-container:after{content:"";position:absolute;bottom:0;left:0;width:100%;z-index:1;pointer-events:none;background:linear-gradient(to top,#FB5B36,transparent);height:clamp(3.5rem,3.906vw,6rem);-webkit-mask-image:url(/wave-mask.svg);mask-image:url(/wave-mask.svg);-webkit-mask-size:100% 100%;mask-size:100% 100%}.profile-container{flex-shrink:0;max-width:clamp(26.25rem,29.297vw,45rem);width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:2}.avatar img{width:clamp(calc(12rem * .7),9.375vw,calc(12rem * 1.2));height:clamp(calc(12rem * .7),9.375vw,calc(12rem * 1.2));opacity:.8}.username-and-plus{display:flex;align-items:center}.username{margin-top:0;background:linear-gradient(to right,#3d9970,#98db7c,#3d9970);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-weight:700;font-size:clamp(calc(1.563rem * .7),1.221vw,1.8756rem);font-family:Play}.plus{margin-bottom:clamp(.7rem,.781vw,1.2rem);display:none;margin-right:clamp(.4375rem,.488vw,.75rem);flex-shrink:0}.plus img{width:clamp(calc(1.563rem * .7),1.221vw,1.8756rem);height:clamp(calc(1.563rem * .7),1.221vw,1.8756rem)}.plus-active{display:inline}.level-and-trophy{display:flex;flex-direction:column;background:#0000004d;box-shadow:0 .25rem 1.875rem #00000080;backdrop-filter:blur(.125rem);-webkit-backdrop-filter:blur(.125rem);padding:clamp(.4375rem,.488vw,.75rem);border-radius:clamp(.6566rem,.733vw,1.1256rem);width:50%}.level-and-trophy-pair{display:flex;align-items:center;gap:clamp(.4375rem,.488vw,.75rem)}.trophy-icon img{width:clamp(1.5316rem,1.709vw,2.6256rem);height:clamp(1.5316rem,1.709vw,2.6256rem)}.trophy-icon-text{font-style:italic;font-weight:500;font-size:clamp(.7875rem,.879vw,calc(1.125rem * 1.2));font-family:Montserrat}.trophy-icon-label{font-style:italic;font-weight:800;font-size:clamp(.7875rem,.879vw,calc(1.125rem * 1.2));font-family:Montserrat}.next-level-progress-bar{width:100%;background-color:#353935;border:.1rem solid #353935;overflow:hidden;height:clamp(.7875rem,.879vw,calc(1.125rem * 1.2));position:relative}.next-level-progress-bar-fill{height:100%;background-color:#98db7c;transition:width .3s ease-in-out;display:flex;justify-content:center;align-items:center;position:relative;box-sizing:border-box}.next-level-progress-bar-text{color:#353935;font-style:italic;font-weight:800;font-size:clamp(.63rem,.703vw,1.08rem);font-family:Montserrat}.next-level-progress-bar-text-outside{position:absolute;top:50%;right:clamp(.2191rem,.245vw,.3756rem);transform:translateY(-50%);color:#e5e4e2;font-family:Montserrat;font-size:clamp(.63rem,.703vw,1.08rem);font-weight:800;z-index:1}.last-message{margin-top:clamp(.875rem,.977vw,1.5rem)}.last-message-label{font-size:clamp(.7875rem,.879vw,calc(1.125rem * 1.2));line-height:1.5;font-style:italic;color:#e5e4e2;text-align:center;padding:clamp(.2191rem,.245vw,.3756rem);text-align:left}.last-message-text{font-weight:700}.trophy-card-container{flex-grow:1;display:flex;flex-direction:row;width:max-content;align-items:center;justify-content:center}.trophy-card-and-functions{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:clamp(1.4rem,1.563vw,2.4rem)}.trophy-card{width:clamp(26.25rem,29.297vw,45rem);height:clamp(8.75rem,9.766vw,15rem);background-size:cover;background-position:center center;background-repeat:no-repeat;position:relative;overflow:hidden}.top-row{height:clamp(calc(3rem * .7),2.344vw,calc(3rem * 1.2));background:#0009;box-shadow:0 .25rem 1.875rem #0000001a;backdrop-filter:blur(.125rem);-webkit-backdrop-filter:blur(.125rem);display:flex;justify-content:space-between;opacity:.8}.trophy-card-user-container{display:flex;align-items:center}.trophy-card-avatar{margin-right:clamp(.2191rem,.245vw,.3756rem)}.trophy-card-avatar img{width:clamp(calc(3rem * .7),2.344vw,calc(3rem * 1.2));height:clamp(calc(3rem * .7),2.344vw,calc(3rem * 1.2));display:block}.trophy-card-plus{margin-top:clamp(.3066rem,.342vw,.5256rem);margin-right:clamp(.2191rem,.245vw,.3756rem);display:none}.trophy-card-plus img{width:clamp(.875rem,.977vw,1.5rem);height:clamp(.875rem,.977vw,1.5rem)}.trophy-card-plus-active{display:inline}.trophy-card-username{color:#e5e4e2;font-weight:700;font-size:clamp(.875rem,.977vw,1.5rem);font-family:Bitter;text-shadow:0 .1rem .1rem #353935}.trophy-card-top-row-right-side-container{display:flex;gap:clamp(.875rem,.977vw,1.5rem)}.trophy-card-level-container{display:flex;align-items:center;gap:clamp(.4375rem,.488vw,.75rem)}.trophy-card-level-icon img{width:clamp(1.9691rem,2.198vw,3.3756rem);height:clamp(1.9691rem,2.198vw,3.3756rem);padding:clamp(.0875rem,.098vw,.15rem);display:block;justify-content:center;align-items:center;box-sizing:border-box}.trophy-card-level-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:clamp(calc(.875rem * .7),.684vw,1.05rem)}.trophy-card-level-wrapper p{margin:0;color:#e5e4e2;font-weight:700;font-family:Montserrat;text-shadow:0 .1rem .1rem #353935;margin-bottom:clamp(-.35rem,-.391vw,-.6rem)}.trophy-card-level{color:#e5e4e2;font-weight:700;font-size:clamp(.875rem,.977vw,1.5rem);font-family:Montserrat}.trophy-card-earned-trophies-container{display:flex;align-items:center;gap:clamp(.4375rem,.488vw,.75rem);margin-right:clamp(.4375rem,.488vw,.75rem)}.trophy-card-earned-trophies-icon img{width:clamp(1.5316rem,1.709vw,2.6256rem);height:clamp(1.5316rem,1.709vw,2.6256rem);display:block}.bottom-row{display:flex;justify-content:space-between;align-items:flex-start;height:var(--bottom-row-height);opacity:.8}.trophy-card-game-container{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.4375rem,.488vw,.75rem);place-items:center;padding:clamp(.4375rem,.488vw,.75rem)}.trophy-card-game-pair{display:flex}.trophy-card-game-logo img{width:calc(var(--bottom-row-height) * .5);height:calc(var(--bottom-row-height) * .5);max-width:clamp(calc(3.2rem * .7),2.5vw,3.84rem);max-height:clamp(calc(3.2rem * .7),2.5vw,3.84rem);display:block}.trophy-card-trophy-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:clamp(.4375rem,.488vw,.75rem);padding-top:clamp(.2191rem,.245vw,.3756rem);padding-bottom:clamp(.2191rem,.245vw,.3756rem);padding-left:clamp(.1316rem,.147vw,.2256rem);background:#0009;box-shadow:0 .25rem 1.875rem #0000001a;backdrop-filter:blur(.125rem);-webkit-backdrop-filter:blur(.125rem)}.trophy-card-trophy-pair{display:flex;align-items:center;gap:clamp(.2191rem,.245vw,.3756rem);margin-right:clamp(.4375rem,.488vw,.75rem)}.trophy-card-trophy-icon img{width:clamp(calc(1.563rem * .7),1.221vw,1.8756rem);height:clamp(calc(1.563rem * .7),1.221vw,1.8756rem);display:block}.trophy-card-trophy-text{color:#e5e4e2;font-weight:700;font-size:clamp(.6566rem,.733vw,1.1256rem);font-family:Montserrat;text-shadow:0 .1rem .1rem #353935;margin:0}.trophy-card-function-container{display:flex;flex-direction:column;padding:clamp(.2191rem,.245vw,.3756rem);align-items:center}.trophy-card-function-and-frame{display:flex;flex-direction:column;align-items:center;width:fit-content;box-sizing:border-box;position:relative}.trophy-card-function{display:flex;gap:clamp(.4375rem,.488vw,.75rem);justify-content:center}.trophy-card-function-frame{width:100%;box-sizing:border-box;opacity:0;transform:translateY(-1.25rem);transition:max-height .3s ease-in-out,transform .3s ease-in-out,opacity .3s ease-in-out;position:absolute;top:100%;z-index:1;max-height:0;overflow:hidden}.trophy-card-function-frame.open{max-height:clamp(21.875rem,24.414vw,37.5rem);background-color:#ffffff1a;padding:clamp(.4375rem,.488vw,.75rem);border-radius:clamp(.1316rem,.147vw,.2256rem);opacity:1;transform:translateY(0);transition:max-height .3s ease-in-out,transform .3s ease-in-out,opacity .05s ease-in-out}.trophy-card-function-frame-label{color:#e5e4e2;font-weight:700;font-size:clamp(.7rem,.781vw,1.2rem);font-family:Bitter;display:flex;flex-direction:column;gap:clamp(.4375rem,.488vw,.75rem)}.trophy-card-function-frame-row{display:flex;align-items:center;justify-content:space-between;width:100%}.function-frame-buttons{font-weight:700;font-size:clamp(.7rem,.781vw,1.2rem);font-family:Montserrat;font-style:italic;color:#e5e4e2;background-color:#0455bf;padding:clamp(.35rem,.391vw,.6rem);border:#353935;border-radius:clamp(.1316rem,.147vw,.2256rem);transition:transform .1s ease-out,background-color .2s ease-out}.function-frame-buttons:hover{cursor:pointer;outline:none;border:#E5E4E2}.function-frame-buttons:active{background-color:#0047ab;box-shadow:none;border:#353935}.function-frame-buttons.is-disabled:active{background-color:gray;transform:none;box-shadow:none;border:#353935}.input-upload-image-container{display:flex;gap:clamp(.4375rem,.488vw,.75rem);justify-content:center}.input-upload-image{padding:clamp(.2191rem,.245vw,.3756rem);font-size:clamp(.7rem,.781vw,1.2rem);width:clamp(13.125rem,14.648vw,22.5rem);height:clamp(calc(1.063rem * .7),.83vw,calc(1.063rem * 1.2))}.input-upload-image:focus{outline:none;border:0}.input-upload-image-loading{width:clamp(.6566rem,.733vw,1.1256rem);height:clamp(.6566rem,.733vw,1.1256rem);border:.313rem solid transparent;border-top:.313rem solid #98DB7C;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.border-select-control{display:flex;align-items:center;justify-content:space-between}.border-select-control select{font-weight:700;font-size:clamp(.7rem,.781vw,1.2rem);font-family:Montserrat;color:#0047ab;background-color:#e5e4e2;padding:clamp(.35rem,.391vw,.6rem);border-radius:clamp(.1316rem,.147vw,.2256rem);width:clamp(10.5rem,11.719vw,18rem)}.trophy-card{border-width:clamp(calc(.05rem * .7),.039vw,.06rem);border-style:solid;--shadow-small: clamp(calc(.4rem * .7), .313vw, .48rem );--shadow-med: clamp( .315rem , .352vw, .54rem )}.trophy-card.default{border-color:#535353;box-shadow:0 0 0 var(--shadow-small) #c0c0c0e6,0 0 0 var(--shadow-med) #535353}.trophy-card.blue{border-color:#1f426c;box-shadow:0 0 0 var(--shadow-small) #0096ffe6,0 0 0 var(--shadow-med) #1f426c}.trophy-card.green{border-color:#2a5637;box-shadow:0 0 0 var(--shadow-small) #50c878e6,0 0 0 var(--shadow-med) #2a5637}.trophy-card.orange{border-color:#6e3715;box-shadow:0 0 0 var(--shadow-small) #ff7518e6,0 0 0 var(--shadow-med) #6e3715}.trophy-card.purple{border-color:#542453;box-shadow:0 0 0 var(--shadow-small) #bf40bfe6,0 0 0 var(--shadow-med) #542453}.trophy-card.red{border-color:#5c1e18;box-shadow:0 0 0 var(--shadow-small) #d22b2be6,0 0 0 var(--shadow-med) #5c1e18}