@import"https://fonts.googleapis.com/css2?family=Jua&display=swap";:root{font-family:Jua,sans-serif;line-height:1.5;font-weight:400;font-size:16px;--color-fg: #333;--color-bg: #EEE;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}body,html{width:100vw;height:100svh}#root{display:flex;width:100%;height:100%}@property --toastTime{syntax: "<time>"; inherits: false; initial-value: 3s;}html,body{overscroll-behavior-y:contain;height:100%;overflow:hidden;user-select:none!important;-webkit-touch-callout:none!important;-webkit-user-select:none!important;touch-action:none!important}#game{--card-w: 150px;--card-h: 10svh;--m-blue: #007bff;padding:1rem 0;width:100vw;height:100svh;display:flex;justify-content:space-evenly;align-items:center;flex-direction:column;position:relative;align-self:center;justify-self:center;font-size:1rem;text-align:center;-webkit-user-select:none;user-select:none}#game.dev{background:#1919c840}#game .hud{position:fixed;bottom:4rem;right:-2rem}#game .hud .coins{display:flex;justify-content:center;align-items:center;font-size:2rem;line-height:1;border-radius:12px;background:var(--m-blue);color:#fff;min-width:10rem;padding:.5rem 4rem .5rem 2rem}#game .hud .coins .coin-container{margin-right:1rem}#game .view{display:flex;flex-direction:column;justify-content:center;align-items:center}#game .view .btn{position:relative;display:flex;justify-content:space-between;align-items:center;width:250px}#game .view .btn>span{padding-right:1rem}#game .view .btn>span>svg{vertical-align:text-bottom}#game .view.menu-view{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}#game .view.menu-view h1{font-size:3.5rem;text-shadow:2px 2px 4px rgba(0,0,0,.3);animation:wobble 3s ease-in-out infinite}#game .view.menu-view .btn{position:relative;display:flex;justify-content:space-between;align-items:center;width:250px;background:transparent}#game .view.menu-view .btn:before{content:"";position:absolute;inset:0;background:#007bff;border-radius:.25rem 1rem 1rem .25rem;z-index:-1;transition:width ease-in-out .25s,background ease-in-out .35s;width:100%}#game .view.menu-view .btn:active:before{width:110%;background:#0056b3}@media (hover: hover){#game .view.menu-view .btn:hover:before{width:110%;background:#0056b3}}#game .view.menu-view .info{position:absolute;bottom:0;font-size:1rem;animation:bounce 1.2s ease-in-out infinite}#game .view.collection-view .collection{height:60%;overflow-y:scroll}#game .view.collection-view .collection .cards{gap:2px;padding:1rem}#game .effect-overlay{position:fixed;inset:0;pointer-events:none;z-index:25;width:100vw;height:100svh;background:transparent}#game .btn{margin-top:1rem;padding:.5rem 1rem;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:1.5rem;transition:background .3s;text-align:center;-webkit-user-select:none;user-select:none}#game .btn:active{background:#0056b3}@media (hover: hover){#game .btn:hover{background:#0056b3}}#game .pop-up{position:fixed;inset:0;-webkit-user-select:none;user-select:none;background:#00000026;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:10}#game .pop-up p{text-align:center;font-size:1rem}#game .pop-up .content{background:#fff;padding:2rem 4rem;border-radius:8px;box-shadow:0 4px 6px #0000001a;max-height:90svh;max-width:90vw;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}#game .cards{display:grid;width:95vw;max-width:600px;max-height:90svh;gap:2svh;grid-template-columns:repeat(4,1fr);justify-items:center}#game .card{width:100%;height:auto;aspect-ratio:3 / 4;border-radius:8px;perspective:1000px;transition:transform .6s;cursor:pointer;position:relative}#game .card.rare .card-back:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);background-size:1000% 1000%;background-repeat:no-repeat;animation:shine 8s alternate infinite;mix-blend-mode:color-dodge;opacity:.5}#game .card .new-tag{position:absolute;bottom:0;left:50%;transform:translate(-50%);text-align:center;font-size:.8rem;width:50%;background:#fffc;border-radius:6px}#game .card .card-front,#game .card .card-back{width:100%;height:100%;position:absolute;backface-visibility:hidden;border:1px solid #222;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:2rem}#game .card .card-front{background:var(--card-bg)}#game .card .card-back{transform:rotateY(180deg)}#game .card.flipped{transform:rotateY(180deg);transform-style:preserve-3d}#game .card.matched{animation:pulse .6s ease}#game .card.bad-match{animation:shake .6s ease}#game .card img{width:100%;height:100%;border-radius:8px;object-fit:cover}.toast-container{position:absolute;inset:0;height:100svh;width:100vw;pointer-events:none;min-height:1px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:1rem;padding-bottom:4em}.toast-container .toast{pointer-events:all;padding:.5rem 1rem;border-radius:4px;font-size:1.5rem;z-index:50;color:#fff;box-shadow:0 4px 6px #00000073;cursor:pointer;opacity:1;transition:opacity .3s ease,transform .3s ease}@starting-style{.toast-container .toast{opacity:0;transform:translateY(10px)}}.toast-container .toast.closing{transform:translateY(-10px);opacity:0}.toast-container .toast.info{background:#1bd61b}.toast-container .toast.error{background:#ff4c4c}.dev-console{position:fixed;font-family:monospace;font-size:10px;color:#000;bottom:0;left:0;right:0;max-height:50svh;text-align:left;overflow-y:scroll;padding-bottom:2.6em;-ms-overflow-style:none;scrollbar-width:none}.dev-console::-webkit-scrollbar{display:none}.dev-console .visibility-btn,.dev-console .to-bottom-btn{position:fixed;bottom:0;background:var(--m-blue);color:#fff;padding:.5em 1em;cursor:pointer;z-index:10}.dev-console .visibility-btn{left:0}.dev-console .to-bottom-btn{right:0;display:none}.dev-console .entries{opacity:0;height:0}.dev-console.visible .entries{height:auto}.dev-console.visible .to-bottom-btn{display:block}.dev-console.visible .entries{opacity:1}.dev-console .entry{padding-left:1em;text-align:left}.dev-console .entry.log,.dev-console .entry.debug{background:#64646480}.dev-console .entry.info{background:#6464ff80}.dev-console .entry.error{background:#ff646480}.dev-console .entry.warn{background:#ffff6480}.coin-container{position:relative;display:inline-block;width:2rem;border-radius:100%;overflow:hidden}.coin-container svg{width:100%;height:100%;display:block}.coin-container:after{content:"";position:absolute;overflow:hidden;top:0;left:-50%;width:20%;height:100%;background:linear-gradient(45deg,#fff0,#fff9,#fff0);transform:skew(-25deg);animation:coin-shine 3.5s infinite;pointer-events:none}@keyframes coin-shine{0%{left:-50%}to{left:100%}}@keyframes pulse{0%,to{transform:rotateY(180deg) scale(1)}50%{transform:rotateY(180deg) scale(1.1)}}@keyframes shake{0%{transform:rotateY(180deg) translate(0)}10%{transform:rotateY(180deg) translate(-8px)}20%{transform:rotateY(180deg) translate(8px)}30%{transform:rotateY(180deg) translate(-6px)}40%{transform:rotateY(180deg) translate(6px)}50%{transform:rotateY(180deg) translate(-4px)}60%{transform:rotateY(180deg) translate(4px)}70%{transform:rotateY(180deg) translate(-2px)}80%{transform:rotateY(180deg) translate(2px)}90%{transform:rotateY(180deg) translate(-1px)}to{transform:rotateY(180deg) translate(0)}}@keyframes shine{0%{background-position:0 0}to{background-position:90% 90%}}@keyframes wobble{0%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}to{transform:rotate(-3deg)}}@keyframes bounce{0%,to{transform:translateY(0) scale(1)}30%{transform:translateY(-8%) scale(1.05,.95)}60%{transform:translateY(0) scale(.95,1.05)}}@keyframes fadeInOut{0%{opacity:0}10%,90%{opacity:1}to{opacity:0}}
